React组件的生命周期
组件的生命周期可以分成三个状态:
Mounting 已插入真实的DOMUpdating 正在被重新渲染Unmounting 已经被移出真实的DOM
React为每个状态提供了两种处理函数
will 函数在进入状态前进行调用did 函数在进入状态后调用
三种状态共有5种处理函数
componentWillMount()componentDidMount()componentWillUpdate()componentDidUpdate()componentWillUnmount()
React还提供了一些特殊的处理函数,下面我们分阶段来介绍:
在不同的生命周期内可以自定义的函数: ## 初始化## - getDefaultProps - getInitialState - componentWillMount - render - componentDidMount (这几个函数的执行顺序也是按照上面的顺序从上到下开始执行) ## 运行中## - componentWillReceiveProps - shouldComponentUpdate - render - componentDidUpdate ##销毁## - componentWillUnmount
各个阶段函数使用介绍
初始化阶段
getDefaultProps:只调用一次,实例之间共享引用getInitialState:初始化每个实例特有的状态componentWillMount:render之前最后一次修改状态的机会render:只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和DOM输出componentDidMount:成功render并渲染完成真是DOM之后触发,可以修改DOM
运行中阶段
componentWillReceiveProps:父组件修改属性触发,可以修改新的属性,新的状态shouldComponentUpdate:返回false会阻止render调用render:只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和DOM输出componentDidUpdate:可以修改DOM
销毁阶段
componentWillUnmount:在删除组件之前进行清理的操作,比如计时器和时间监听器。