React组件生命周期

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React组件生命周期相关的知识,希望对你有一定的参考价值。

组件的生命周期

组件有两个值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 在删除组件之前进行清理操作,比如计时器和事件监听器。

以上是关于React组件生命周期的主要内容,如果未能解决你的问题,请参考以下文章

react 生命周期

[RN] React Native 中组件的生命周期

React-Native从入门到深入--组件生命周期

react 组件的生命周期

React生命周期

React中组件的生命周期(详细)