react生命周期
2017-02-17 10:57
197 查看
react生命周期整理如下图 :
第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化;
第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;
第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作。
getDefaultProps:
对于每个组件实例来讲,这个方法只会调用一次,该组件类的所有后续应用,getDefaultPops 将不会再被调用,其返回的对象可以用于设置默认的 props(properties的缩写) 值。getInitialState:
对于组件的每个实例来说,这个方法的调用有且只有一次,用来初始化每个实例的 state,在这个方法里,可以访问组件的 props。每一个React组件都有自己的 state,其与 props 的区别在于 state只存在组件的内部,props 在所有实例中共享。getInitialState 和 getDefaultPops 的调用是有区别的,getDefaultPops 是对于组件类来说只调用一次,后续该类的应用都不会被调用,而 getInitialState 是对于每个组件实例来讲都会调用,并且只调一次。
Mounting
constructor()
componentWillMount() :
准备加载组件,这个函数调用时机是在组件创建,并初始化了状态之后,在第一次绘制render()之前。可以在这里做一些业务初始化操作,也可以设置组件状态。这个函数在整个生命周期中只被调用一次。
render()
componentDidMount():
通知组件已经加载完成(不会在服务端被渲染的过程中调用)
Updating
componentWillReceiveProps():
如果组件收到新的属性(props),就会调用
componentWillReceiveProps(),可以在这个方法里更新 state,以触发 render 方法重新渲染组件
shouldComponentUpdate():
如果你确定组件的 props 或者 state 的改变不需要重新渲染,可以通过在这个方法里通过返回false来阻止组件的重新渲染,返回 `false 则不会执行 render 以及后面的 componentWillUpdate,componentDidUpdate 方法。(该方法是非必须的,并且大多数情况下没有在开发中使用)
componentWillUpdate():
这个方法和 componentWillMount 类似,在组件接收到了新的 props 或者 state 即将进行重新渲染前,componentWillUpdate(object nextProps, object nextState) 会被调用,注意不要在此方面里再去更新 props 或者 state。
render()
componentDidUpdate():
这个方法和 componentDidMount 类似,在组件重新被渲染之后,componentDidUpdate(object prevProps, object prevState) 会被调用。可以在这里访问并修改 DOM。
Unmounting 销毁时
componentWillUnmount():
每当React使用完一个组件,这个组件必须从 DOM 中卸载后被销毁,此时 componentWillUnmout 会被执行,完成所有的清理和销毁工作,在 componentDidMount 中添加的任务都需要再该方法中撤销,如创建的定时器或事件监听器。
生命周期的回调函数总结
生命周期 | 调用次数 | 能否使用 setSate() |
---|---|---|
getDefaultProps | 1(全局调用一次) | 否 |
getInitialState | 1 | 否 |
componentWillMount | 1 | 是 |
render | >=1 | 否 |
componentDidMount | 1 | 是 |
componentWillReceiveProps | >=0 | 是 |
shouldComponentUpdate | >=0 | 否 |
componentWillUpdate | >=0 | 否 |
componentDidUpdate | >=0 | 否 |
componentWillUnmount | 1 | 否 |
相关文章推荐
- React 组件生命周期的说明及相关API
- 【RN - 基础】之React Native组件的生命周期
- react知识(二) 组件的生命周期【装载过程】
- [置顶] react组件生命周期详解
- vue react 生命周期图解
- React组件生命周期及组件之间的通信
- react组件生命周期方法说明
- React生命周期
- react this.state + 组件生命周期
- React:组件的生命周期
- react.js 从零开始(二)组件的生命周期
- react-native 组件生命周期
- React组件生命周期
- react生命周期
- React组件生命周期过程说明
- react-native生命周期
- React中组件的生命周期
- react生命周期
- React 组件生命周期
- React生命周期