一、生命周期调用顺序
1. 挂载
- constructor()
- render()
- componentDidMount()
2. 更新
- render()
- componentDidUpdate()
3. 卸载
- componentWillUnmount()
image.png
二、详解生命周期函数
1. construcor()
挂载之前调用，子类调用是须在其他语句之前调用super(props)
构造函数的调用情况：
需要通过this.state复制对象来初始化内部state
为事件函数绑定实例
注意：
在构造函数中不得使用setState()方法复制
constructor(props){
super(props)
// 不要在这里调用 this.setState()
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}
- 避免将 props 的值复制给 state！
2. componentDidMount()
- 组件挂载后调用，依赖DOM节点的初始化应该在此函数中执行，网络请求大多也在次函数中，进行数据初始化
- 次函数可调用setState()方法
- 只要进入页面就会调用该函数
- 适合添加订阅，但不要忘记在componentWillUnmount取消
3. render()
render()方法是class组件唯一必须实现的方法
调用render时，检测this.props和this.state的变化并返回：
React元素
数组或fragment
protals
字符转或数值类型
布尔类型或null
render()不与浏览器直接交互
4. componentDidUpdate()
- 只要页面的state或者model中的state中定义的变量值发生改变，这个方法就会执行，首次渲染不执行，首次渲染不执行
- 例如：在componentDidUpdata()中对originLength的监听从而达到上传或删除的操作
image.png
- 当组件更新后可在此函数中进行DOM操作或网络请求
componentDidUpdate(prevProps){
//典型用法，判断props
if(this.props.userId !== prevProps.userId){
this.fetchData(this.props.userId)
}
}
- 可直接调用setState() ，但必须包裹在条件语句中，否则会造成死循环
5. componentWillUnmount()
- 此函数会在组件卸载及销毁前调用，可执行必要的清理操作，例如定时器，取消请求，清除订阅
- 此函数中不应再调用setState()，因为该组件永远不再重新渲染了
