React三个状态时触发的相应钩子

01.初始化状态。

这个阶段由render()函数触发;

1.constructor();

2.componentWillMount();

在17版本以后改为UNSAFE_componentWillMount()

reason:react为组件异步渲染做准备;

3.render();

4.componentDidMount();

这个钩子常用;一般在这个组件中做一些初始化的事情,利用开启计时器,发起网络请求,请阅消息。(如果小伙伴学过vue的话可以对标created()钩子和mounted()两个钩子)

02.更新阶段;

由内部组件setState()或父组件render触发;

1.shouldComponentUpdate();

2.componentWillUpdate();

在17版本以后改为UNSAFE_componentWillUpdate();

reason:react为组件异步渲染做准备;

3.render();

这个是最最常用的钩子,用作渲染;

4.componentDidUpdate();

5.componentWillReceiveProps();

在17版本以后改为UNSAFE_componentWillReceiveProps();

reason:react为组件异步渲染做准备;

03.卸载阶段;

由ReactDom.unmountComponentAtNode()触发;

1.ComponentWillUnmount()        

这个钩子也常用;一般在这个组件中做一些收尾的事情,利用开启计时器,发起网络请求,请阅消息。(如果小伙伴学过vue的话可以对标beforeDestroy()和destroyed()两个钩子)

猜你喜欢

转载自blog.csdn.net/2201_75705263/article/details/132252778