挂载阶段【 初始化阶段 】
初始化阶段就是将我们的组件插入到DOM中,只会发生一次
- constructor :初始化动作,比如: state的定义和初始化赋值、比如非箭头函数的this的绑定
- getDerivedStateFromProps :这个钩子函数要求要有返回值,返回值是一个新的状态或是null,这个钩子函数 this的值为undefined
触发条件- 初始化执行一次 - 因为它替代了componentWillMount
- props改变可以触发 - 因为它替代了componentWillReceiveProps
- state改变也可以触发 - 因为它替代了componentWillUpdate
- componentWillMount/UNSAVE_componentWillMount:表示组件即将挂载,为挂载做准备
- render:通过React.createElement将jsx结构渲染为vdom对象模型, 可以进行this.prop 和 this.state 的计算,
- componentDidMount :组件挂载结束
- 可以做数据请求,然后将数据请求结果给我们的state
- 这个阶段已经生成了真实DOM,所以我们做DOM操作
- 我们可以做第三方类库实例化
更新阶段
- componentWillReceiveProps/UNSAFE_componentWillReceiveProps:监听属性是否改变,接收nextProps表示修改后的新属性
- getDerivedStateFromProps:这个钩子函数要求要有返回值,返回值是一个新的状态或是null,这个钩子函数 this的值为undefined
触发条件- 初始化执行一次 - 因为它替代了componentWillMount
- props改变可以触发 - 因为它替代了componentWillReceiveProps
- state改变也可以触发 - 因为它替代了componentWillUpdate
- shouldComponentUpdate:组件是否应该更新,这个钩子函数可以决定组件是否要更新,必须要有返回值,返回值是布尔值,是性能优化的方案,减少重新渲染
- componentWillUpdate/UNSAFE_componentWillUpdate:组件即将更新
- render:更新阶段也会再次出发
- getSnapshotBeforeUpdate:这个钩子存在的意义就是通过返回值给componentDidUpdate传递一个数据
- componentDidUpdate:组件更新结束
- 真实DOM渲染出来了,可以操作DOM
- 第三方库实例化 - 动态数据的实例化
卸载阶段
- componentWillUnmount:表示组件卸载时触发,我们可以在这个函数里去清除一些定时器,取消网络请求,清理无效的DOM元素等垃圾清理工作
错误处理阶段
- componentDidCatch(error, info):记录错误