React的生命周期

xiaoxiao2021-02-28  37

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:在删除组件之前进行清理的操作,比如计时器和时间监听器。
转载请注明原文地址: https://www.6miu.com/read-1950060.html

最新回复(0)