React生命周期是使用React开发中非常重要的一环。概括来说React的生命周期分为三个阶段: Mounting、Updating、Unmounting
Mounting 阶段出发的方法有:
constructor()
componentWillMount()
render()
componentDidMount()
Updating阶段出发的方法有:
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
Unmounting阶段触发的方法
componentWillUnmount()
现在逐一说一下每个方法的用法
constructor()
构造函数用来初始化state和props,组件创建的时候调用一次。
componentWillMount()
见名知意,组件将要挂载,在组件挂载之前调用,此方法还能修改state(调用setState方法)
render()
必选的方法 ,创建虚拟的DOM,该方法中有两点需要特别注意:
1、不能修改state
2、返回的组件中只能有一个顶级组件
componentDidMount()
真是的DOM被渲染后调用,所以可以在该方法中获取真实的DOM节点,可以用refs获取DOM节点
componentWillReceiveProps()
组件接收到新的props时调用;父组件发生render()的时候也会调用(不管props有没有更新)。该方法中可以修改state和props
shouldComponentUpdate()
组件是否可以更新。返回一个Boolean值,默认为true。如果返回false则不会触发组件的更新。每次setState都会触发该方法,但是有些时候数据的变化并不需要重新渲染组件,所以可以在这个方法中做判断来决定是否要更新组件(返回true或false)
componentWillUpdate()
组件将要更新。可以和componentWillMount()对应起来,该方法中不可以修改state或props,否则又会循环到之前的生命周期方法中。调用forceUpdate()方法也会触发该方法。
componentDidUpdate()
组件完成更新后调用。可以方法DOM元素,可以和componentDidMount()对应起来
componentWillUnmount()
组件将要销毁前调用,一般做一些清理工作,一般在componentDidMount注册的事件可以在该方法中删除。比如创建的计时器和事件监听器。
我本人总结了一个生命周期的流程图,大家参考: