关于 React 组件的生命周期

1,611 阅读5分钟

组件的生命周期

React 组件的生命周期广义上可以分为四个阶段:初始化阶段,挂载阶段、更新阶段、卸载阶段

初始化阶段

constructor()

挂载阶段

componentWillMount() : void

componentDidMount() : void

更新阶段

componentWillReceiveProps(nextProps) : void

shouldComponentUpdate(nextProps, nextState) : bool

componentWillUpdate(nextProps, nextState) : void

render : jsx

componentDidUpdate(prevProps, prevState) : void

卸载阶段

componentWillUnmount() : void

API详解

constructor()

组件实例的构造函数。 它可以接收 propscontext 参数,如果显式的接收参数,还需将参数通过 super() 传递给组件的基类。 此时可以对 this.state 进行初始化赋值。

这个函数不处理返回值。

componentWillMount() : void

当组件已经被初始化,并被挂载,还未被首次渲染到 dom 之前执行。

一般用于服务端渲染使用,React官方不建议前端在这个函数中通过异步方法去加载数据。

这个函数不处理返回值。

注意,该函数在 React 17 中已经被弃用,如果需要强制启用需采用 UNSAFE_componentWillReceiveProps 的函数名。

componentDidMount() : void

当组件已经被初始化,并且已经完成第一次的渲染后执行。

此时基础的 dom 节点已经生成,可以在这个函数中通过异步方法去加载远程数据,然后再通过 setState 函数触发重新渲染机制。

这个函数不处理返回值。

componentWillReceiveProps(nextProps) : void

当组件接收到由父组件发起的 Props 变化前执行。

它接收一个 nextProps 的参数,代表的是最新的属性,如果此时要访问当前的属性,还可以通过 this.Props 访问。 如果组件内部有建立 PropsState 的关系,可以在这个函数中通过 setState 函数去更新相关的 State

这个函数不处理返回值。

注意,如果在该函数中不论调用 setState 多少次,那么 shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate 的过程也只会执行一次,也就是说 setState 触发的渲染流程会和父组件发起 Props 变化所触发的渲染流程合并在一起处理。

注意,该函数在 React 17 中已经被弃用,如果需要强制启用需采用 UNSAFE_componentWillReceiveProps 的函数名。

shouldComponentUpdate(nextProps, nextState) : bool

当组件接收到由父组件发起的 Props 变化前或者当 State 变化前执行。

它接收 nextPropsnextState 参数,代表的是最新的属性和状态,如果此时要访问当前的属性或状态,可以通过 this.Propsthis.State 访问。

这个函数是 React 组件性能优化的关键,当该函数返回 true 时, PropsState 的值会被正常更新,同时会触发相应的渲染操作,在某些情况下如果要忽略掉因 nextPropsnextState 变化而导致的渲染过程可以通过返回 false 来达到目的。

这个函数处理 bool 类型的返回值,并根据该返回值决定是否要执行后续的渲染过程。

注意,当这个函数返回 false 的值时,后续的渲染过程将不会再执行,但是相应的 PropsState 的值会被更新。

注意,在该函数中不允许使用 setState 函数,否则会出现 Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. 错误

componentWillUpdate(nextProps, nextState) : void

shouldComponentUpdate 返回为 true 后,在执行 render 之前执行。

它同样接收 nextPropsnextState 参数,代表的是最新的属性和状态,如果此时要访问当前的属性或状态,可以通过 this.Propsthis.State 访问。

这个函数不处理返回值。

注意,在该函数中不允许使用 setState 函数,否则会出现 Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. 错误

注意,该函数在 React 17 中已经被弃用,如果需要强制启用需采用 UNSAFE_componentWillUpdate 的函数名。

componentDidUpdate(prevProps, prevState) : void

组件除了首次渲染后会执行 componentDidMount 之外,其余的情况下被重新渲染会执行 componentDidUpdate 函数。

它接收 prevPropsprevState 参数,代表的是渲染之前的属性和状态,此时通过 this.Propsthis.State 访问的是最新的属性和状态。

这个函数不处理返回值

注意,在该函数中不允许使用 setState 函数,否则会出现 Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. 错误

render() : jsx

组件的核心渲染函数,当首次渲染以及通过更新 PropsState 后导致触发的重新渲染过程会被执行。

这个函数处理 jsx 类型的返回值,React 内核会根据返回的 jsx 生成 virtual dom,然后与当前的 virtual dom 进行比较,从中计算出最小的变化(以节点为单位),同时将变化的节点同步渲染到真正的 dom 中。

这个函数处理 jsx 类型的返回值

注意,在该函数中不允许使用 setState 函数,否则会出现 Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. 错误

componentWillUnmount() : void

此方法在组件被卸载前调用,可以在这里执行一些清理工作,比如清楚组件中使用的定时器,清楚 componentDidMount 中手动创建的 dom 元素等,以避免引起内存泄漏。

这个函数不处理返回值