1.基本理解和使用
1.1.使用React开发者工具调试
1.2.效果
函数式组件：
类式组件：
1.3.注意
组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签
1.4.渲染类组件标签的基本流程
React内部会创建组件实例对象
调用render()得到虚拟DOM,并解析为真实DOM
插入到指定的页面元素内部
2.2.组件三大核心属性1:state
2.1.效果
需求:定义一个展示天气信息的组件
默认展示天气炎热或凉爽
点击文字切换天气
Object:word/embeddings/oleObject1.bin
2.2.理解
state是组件对象最重要的属性,值是对象(可以包含多个key-value的组合)
组件被称为"状态机",通过更新组件的state来更新对应的页面显示(重新渲染组件)
2.3.强烈注意
组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？
强制绑定this:通过函数对象的bind()
箭头函数
状态数据，不能直接修改或更新
3.组件三大核心属性2:props
3.1.效果
需求:自定义用来显示一个人员信息的组件
姓名必须指定，且为字符串类型；
性别为字符串类型，如果性别没有指定，默认为男
年龄为字符串类型，且为数字类型，默认值为18
3.2.理解
每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中
3.3.作用
通过标签属性从组件外向组件内传递变化的数据
注意:组件内部不要修改props数据
3.4.编码操作
内部读取某个属性值
对props中的属性值进行类型限制和必要性限制
第一种方式（Reactv15.5开始已弃用）：
第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）
扩展属性:将对象的所有属性通过props传递
默认属性值：
组件类的构造函数
4.组件三大核心属性3:refs与事件处理
需求:自定义组件,功能说明如下:
1.点击按钮,提示第一个输入框中的值
2.当第2个输入框失去焦点时,提示这个输入框中的值
效果如下：
Object:word/embeddings/oleObject2.bin
4.2.理解
组件内的标签可以定义ref属性来标识自己
2.4.3.编码
字符串形式的ref
回调形式的ref
createRef创建ref容器·
4.4.事件处理
通过onXxx属性指定事件处理函数(注意大小写)
React使用的是自定义(合成)事件,而不是使用的原生DOM事件
React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
通过event.target得到发生事件的DOM元素对象
5.收集表单数据
5.1.效果
需求:定义一个包含表单的组件
输入用户名密码后,点击登录提示输入信息
Object:word/embeddings/oleObject3.bin
5.2.理解
包含表单的组件分类
受控组件
非受控组件
6.组件的生命周期
6.1.效果
需求:定义组件实现以下功能：
1.让指定的文本做显示/隐藏的渐变动画
2.从完全可见，到彻底消失，耗时2S
3.点击“不活了”按钮从界面中卸载组件
Object:word/embeddings/oleObject4.bin
6.2.理解
组件从创建到死亡它会经历一些特定的阶段。
React组件中包含一系列勾子函数(生命周期回调函数),会在特定的时刻调用。
我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。
6.3.生命周期流程图(旧)
生命周期的三个阶段（旧）
初始化阶段:由ReactDOM.render()触发---初次渲染
constructor()