1.组件挂载和卸载时
-
componentWillMount
在render方法之前执行,只会在组件初始化时运行一次,执行setState但是组件只会渲染一次,初始化state应该在构造函数中初始化 -
componentDidMout
在render方法之后执行,也只会在组件初始化时运行一次,执行setState会再次渲染组件- 执行fetch操作获取数据后将loading信息替换为实际数据
- 绑定原生事件处理程序
-
componentWillUnmout
组件卸载前执行- 事件回收
- 清除定时器
2.数据更新过程
组件自身state更新了,会依次执行shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate
-
shouldComponentUpdate
接受需要更新的props和state,让开发者执行条件判断,在需要时更新,不需要时不更新 -
componentWillUpdate
更新过程中渲染之前,提供新的props和state,如果在这里直接调用setState,则又需要重新渲染,会陷入死循环 -
componentDidUpdate
更新过程中渲染之后,提供以前的props和state -
componentWillReceiveProps
组件是由父组件更新props而更新的,则在调用shouldComponentUpdate之前调用componentWillReceiveProps方法,可以在props传入后,渲染之前改变组件state的机会,在这里调用setState是不会二次渲染
3.使用createClass创建自定义组件
createClass是创建自定义组件的入口方法,管理生命周期中的getDefaultProps,依次执行
- 利用原型继承Component父类
- 按顺序合并mixin
- 设置初始化defaultProps
- 返回构造函数
4.MOUTING阶段
MOUTING阶段管理生命周期中的getInitialState, componentWilMount, render, componentDidMount
- 因为只会创建一次组件的构造函数,所以只会调用一次getDefaultProps来获取组件的默认输入属性
- 组件初始化,初始化props, context, 利用getInitialState获取初始化state,初始化更新队列和更新状态
- 若存在componentWillMount,则执行。在这里调用setState不会触发render,会将state变化加入更新队列,在render中统一对state进行更新,在render中才能获取到更新后的state
- 执行render,进行递归渲染子组件的内容
- 渲染完成后,若存在componentDidMount,则执行
5.RECEIVE_PROPS阶段
RECEIVE_PROPS阶段负责管理生命周期中的componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate
- 若存在componentWillReceiveProps,则执行。在这里调用setState也不会触发render,会将state变化加入更新队列,最后在render中才会统一对state进行更新,只有在render和componentDidUpdate中才能获取到更新后的state
- 执行shouldComponentUpdate,判断是否需要进行组件更新
- render本质上也是递归渲染内容
- 渲染完成,若存在componentDidUpdate,则执行
性能优化:因为组件的渲染是进行递归渲染子组件,此时可能子组件的props和state并没有发生变化,并不需要更新组件,所以应该在shouldComponentUpdate中引入PureRenderMixin,来判断是否需要更新组件,不需要则无需进行虚拟DOM的比较
注意:禁止在shouldComponentUpdate和componentWillUpdate中调用setState,这会造成循环调用,因为setState会引起重渲染;与之相对的,在componentWillReciveProps中调用setState是不会触发重渲染,而是会在调用render方法时,才会进行state合并
6.UNMOUNTING阶段
UNMOUNTING阶段负责管理生命周期中的componentWillUnmount
- 若存在componentWillUnmount,则执行。在这里调用setState不会触发render,因为组件之后要进行卸载
- 将更新队列和更新状态都被重置为null,并清除公共类,完成组件的卸载操作
7.无状态组件
生命周期和组件state让React越来越灵活,但是很多时候需要的只是一个仅负责渲染的组件
无状态组件只是一个render方法,无法实现组件生命周期方法,如果需要对其进行强化,可以考虑使用高阶组件,对无状态组件进行封装
例如,如果要根据窗口的大小对组件的大小进行实时更新,可以创建一个高阶组件,来将窗口信息通过props传递给子组件:
const withViewport=(ComposedComponent)=>{
return class Viewport extends Component{
constructor(props){
super(props);
this.state={
viewport: {
width: 1366,
height: 768
}
};
}
componentDidMount(){
this.handleResize();
window.addEventListener('resize',this.handleResize);
}
componentWillUnmount(){
window.removeEventListener('resize',this.handleResize);
}
handleResize=()=>{
const {viewport}=this.state;
if(viewport.width!==window.width || viewport.height!==window.height){
this.setState({
viewport: {
width: window.innerWidth,
height: window.innerHeight
}
});
}
}
render(){
return <ComposedComponent viewport={this.state.viewport} {...this.props}/>
}
}
};
8.生命周期总结
首次渲染时:
1.getDefaultProps
2.getInitialState
3.componentWillMount
4.render //递归渲染子组件
5.componentDidMount
卸载组件时:
1.componentWillUnmount
再次渲染组件时:
1.componentReceiveProps
2.shouldComponentUpdate
3.componentWillUpdate
4.render
5.componentDidUpdate
组件内部state改变时:
1.shouldComponentUpdate
2.componentWilUpdate
3.render
4.componentDidUpdate
网友评论