react学习笔记之组件生命周期

Posted 2020-08-06 niconi

React 中的组件有三种状态：

• Mounted：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounted：已移出真实 DOM

它为每个状态都提供了两种处理函数：

　　will：函数在进入状态之前调用，

　　did： 函数在进入状态之后调用，三种状态共计五种处理函数。

所以，除了组件初始化时调用的getDefaultProps，getInitialState方法外，每个组件还有

componentWillMount，componentDidMount，componentWillUpdate，componentDidUpdate，componentWillUnmount五种方法；

除此之外，react还提供了两种特殊状态的处理函数：

• componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
• shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

 

当一个组件被调用的时候先执行getDefaultProps，getInitialState获取他的默认属性和状态，然后执行componentWillMount（即将渲染），接下来渲染到dom树上，渲染完成触发componentDidMount函数；

这时候，该组件就进入了一个running状态，并监视他的props和state以及被移除事件：

　　当props发生变化时执行componentWillReceiveProps然后去判断是否需要重新渲染（shouldComponentUpdate），如果不需要则继续保持running状态；如果需要则如初始时一样，执行componentWillMount（即将渲染），接下来渲染到dom树上，渲染完成触发componentDidMount函数，保持running状态继续监视；

　　当state发生变化时，则直接判断是否需要重新渲染（shouldComponentUpdate），然后根据是否需要决定执行渲染过程还是继续保持running状态；

　　当该组件被移除（unmount）时，将直接执行componentWillUnmount，该组件从dom树上消失；