React 生命周期
从图上可以知道react 生命周期可以分为三个状态
- 挂载时
- 更新时
- 卸载时
挂载阶段
constructor :初始化阶段
- 可以接受来自super(props)或者父组件传递的props属性
- 可以定义state对象
- 通过this绑定自身定义的方法
getDerivedStateFromProps:新增的生命周期函数
在挂载以及后续更新时都会被调用。static getDerivedStateFromProps(nextProps, state),第一个参数是即将更新的props ,第二个参数是上一个状态的state,可以进行比较然后更新,返回一个对象来更新 state, 如果返回 null 则不更新任何内容。
render()函数:渲染DOM结构
render() 方法是 class 组件中唯一必须实现的方法。
componentDidMount :在组件渲染之后执行
componentDidMount() 是发送网络请求、启用事件监听方法的好时机,并且可以在 此钩子函数里直接调用 setState()
可以调用后端接口获取数据
componentDidMount() {
//organQueryTree为后端接口
organQueryTree = () => {
return organQueryTree({ organType: '001' }).then(res => {
if (res && res.data.organTreeDto) {
this.setState({ organTreeDtoLIst: res.data.organTreeDto[0].children });
}
});
};
更新阶段
getDerivedStateFromProps:新增的生命周期函数
shouldComponentUpdate:render之前调用
大量的数据更新会触发组件一遍又一遍的更新,会造成不小的性能损耗,这里就需要shouldComponentUpdate(nextProps, nextState),第一个参数是即将更新的props ,第二个参数是上一个状态的state,用于控制是否根据当前的props 和state 重新渲染组件,可以通过返回值来判断是否更新,返回true则更新,不能再这个阶段使用setState(),否则会无限循环。
render()函数:渲染DOM结构
render() 方法是 class 组件中唯一必须实现的方法。
getSnapshotBeforeUpdate:render之后 componentDidUpdate之前调用
getSnapshotBeforeUpdate(prevProps, prevState) 有两个参数prevProps和prevState,表示之前的属性和之前的state,这个函数有一个返回值,会作为第三个参数传给componentDidUpdate,如果你不想要返回值,可以返回null,此生命周期必须与componentDidUpdate搭配使用
componentDidUpdate:组件更新后立即执行, 首次渲染不会执行
componentDidUpdate(prevProps, prevState, snapshot),prevProps:上一次 props 的值,prevState: 上一次 state 的值,snapshot: getSnapshotBeforeUpdate() 返回值的参数传递,当组件更新后,可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较,也可以选择在此处进行网络请求。可以在componentDidUpdate() 中直接调用 setState(),但请注意它必须被包裹在一个条件语句里。注意: 如果 shouldComponentUpdate() 返回值为 false ,则不会调用 componentDidUpdate()
卸载阶段
componentWillUnmount() 在组件即将被卸载或销毁时进行调用。
此生命周期是取消网络请求、移除监听事件、清理 DOM 元素、清理定时器等操作的好时机
总结 —新旧周期的比较
旧的生命周期
生命周期的三个阶段(旧)
1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
constructor()
componentWillMount()
render()
componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount()
对比新的生命周期图以及旧的生命周期图可以发现
即将在新的版本中废弃三钩子函数
1.componentWillMount
2.componentWillReceiveProps
3.componentWillUpdate
如果要使用需要在每个钩子函数前面加上“UNSAFE_” 的前缀 比如
UNSAFE_componentWillMount()
在新的React 生命周期中提出了两个新的钩子函数
1.getDerivedStateFromProps
2.getSnapshotBeforeUpdate
在这众多的钩子函数中 使用最多的就是
1.render:初始化渲染或更新渲染调用
2.componentDidMount:开启监听, 发送ajax请求
3.componentWillUnmount:做一些收尾工作, 如: 清理定时器
参考:
1.https://www.cnblogs.com/houxianzhou/p/15047494.html
2.https://blog.csdn.net/qq_16525279/article/details/116839734
3.https://www.bilibili.com/video/BV1wy4y1D7JT?p=48&spm_id_from=pageDriver