React组件生命周期

Posted 2020-10-06

（A）父组件和子组件：
<Header>
<Nav></Nav>
</Header>
如同html一样 header是nav的父组件 nav是header的子组件
为子组件添加数据有两种：传递属性和传递状态
<Nav data={this.props.data}></Nav>
<Nav data={this.state.data}></Nav> 特征：父组件状态改变，子组件发生属性改变，进入存在期
（B）React将组件看成是一个有生命的物体，具有一个周期，组件的周期分成三大周期，生命周期的三个阶段，三者时间是不固定的，只是在逻辑上的分类，组件本质上是状态机，输入确定，输出一定确定
具体的三大周期：
1:Mounting：已插入真实 DOM
创建期 在组件创建的时候，进入该阶段
2:Updating：正在被重新渲染 （最常用的时期）
存在期 组件已经创建完成，内部的状态，属性发生改变的时候，会进入该阶段
3Unmounting：已移出真实 DOM
销毁期 组件从页面中删除的时候，进入该阶段
（一）创建期：
在创建的时候，组件会进入五个阶段：
1）getDefaultProps:获取实例的默认属性(即使没有生成实例，组件的第一个实例被初始化CreateClass的时候调用，只调用一次,)
注意：组件还没有创建出来我们还看不到组件内部的对象属性
2）getInitialState:获取实例的默认状态（每个实例自己维护）
组件内部数据已经创建出来，我们可以访问到组件实例化对象了
在该阶段已经解析了属性，因此，我们可以将属性的值赋值给状态
处理状态的阶段在处理属性的阶段后面，因此可以在状态处理方法中处理属性的数据
在组件外部只能为组件添加属性数据，而不能添加状态数据
3）componentWillMount：组件将要被构建，组件即将被装载、渲染到页面上（render之前最后一次修改状态的机会）组件的虚拟dom
4）render:组件渲染输出虚拟dom
通过return返回虚拟dom树（必须有返回值，返回值必须是虚拟dom）
所有的dom都要在一个父dom中
组件在这里生成虚拟的DOM节点（只能访问this.props和this.state，不允许修改状态和DOM输出）
5）componentDidMount:组件已经被构建完成，可以修改DOM
组件已经创建完成虚拟dom，在这个阶段可以操作真实的dom元素
注意：这五个阶段所有方法的参数都是空的，并且除了第一个阶段方法的作用域是构造函数，其他的作用域都是组件的实例化对象

（二）存在期：
1）componentWillReceiveProps:组件将要接收到新的属性的时候调用
（赶在父组件修改真正发生之前,可以修改属性和状态）
2）shouldComponentUpdate:组件接受到新属性或者新状态的时候是否更新
（可以返回false，接收数据后不更新，阻止render调用，后面的函数不会被继续执行了
返回true，接受数据更新）
3）componentWillUpdate:组件将要被更新。
不能修改属性和状态
4）render:组件更新输出虚拟dom
只能访问this.props和this.state；只有一个顶层组件，也就是说render返回值只能是一个组件；不允许修改状态和DOM输出
5）componentDidUpdate: 组件已经更新完成
可以修改DOM

（三）销毁期：
componentWillUnmount:开发者需要来销毁（组件真正删除之前调用，比如计时器和事件监听器）
作用域是实例化对象
参数是空
组件从页面中删除的时候出发该方法
// 过五秒钟我们将组件删除
setTimeout(function () {
ReactDOM.render(<div />, document.getElementById(‘app‘))
}, 1000)