React组件生命周期

Posted 2020-10-02

组件的生命周期

组件有两个值State状态和PorpType属性，当状态发生变化属性就会发生变化。状态确定属性确定。

状态发生变化时会触发不同的钩子函数，从而让开发者有机会做出响应。状态可以理解为事件。

组件生命周期内 初始化-运行- 销毁

初始化阶段可以使用的钩子函数：getDefaultPorps 获取实例的默认属性／getInitialState获取实例的初始化状态／componentWillMount组件即将被渲染／

　　　　　　　　　　　　　　　render渲染／componentDidMount组件装载之后

运行阶段可以使用的钩子函数：componentWillRecelveProps 组件将接收属性之前／shouldComponentUpdate 接收到新属性时触发 在不需要更新时直接使用 则可以提高效率／　　　　　　　　componentWillUpdate 更新之前 ／render 渲染／componentDidUpdate dom渲染后

销毁阶段可以使用的钩子函数：componentWillUnmount 销毁之前

 

钩子函数特性

初始化

getDefaultPorps：只调用一次，实例之间共享引用。使用时要主要返回的是引用还是值。

getInitialState：每个实例特用的状态。

componentWillMount：render之前的最后修改机会。

render：只能访问this.props和this.state ，只有一个顶层组件，不允熙修改状态和dom输出。

componentsDidMount：可以修改dom。

运行时

componentWillRecelveProps：父组件修改属性触发，可以修改新属性，修改状态。

shouldComponentUpdate：返回false阻止render调用。

componentWillUpdate：不能修改属性和状态。

render：与初始化时的特性一致

componentDidUpdate：与初始化时的特性一致

销毁

componentWillUnmount 在删除组件之前进行清理操作，比如计时器和事件监听器。