当前位置：文江博客文章教程详情

React 的生命周期

发布于 2021-12-18 18:31:18 字数 3794 浏览 1084 评论 0

什么是生命周期方法

生命周期方法可以理解为发生在 React 组件从生到死的各阶段的事件。

组件的生命周期又可以分为三阶段：

Mounting 出生
Update 生长
Unmounted 死亡

生命周期方法概观

如下截图是来自 react-lifecycle-methods-diagram，它列举了生命周期中的重要方法：

react-lifecycle-diagram

生命周期方法详解

static getDerivedStateFromProps()

该方法会在 Mounting 和 Update 阶段，就每次 render 调用之前被调用（如果有声明的话）。

一旦 prop 发生改变，它就会更新 state，相应的它的调用结果会是一个对象，如果没有任何改变被应有到 state，则返回 null。

由于它是个静态方法，不需要通过 this 来获取实例。如下是一个示例：

static getDerivedStateFromProps(props, state) {
    if (props.currentRow !== state.lastRow) {
      return {
        isScrollingDown: props.currentRow > state.lastRow,
        lastRow: props.currentRow,
      };
    }
    // Return null to indicate no change to state.
    return null;
}

render()

render 方法唯一一个组件中必须包含的方法，它的作用是渲染组件到 UI，它会发生在Mounting和Update阶段。

render 方法必须是纯净的

即它在同样的输入（props 和 state）条件下，调用的结果是完全一样的。这意味着，你不能在 render 方法中调用 setState。

保持 render 方法的简单和纯净让你的应用更可控。

componentDidMount

组件被挂载就位以后的事件是 componentDidMount，你可以在这里初始化 API 的调用。

你可以在该方法中调用 setState 方法，调用会导致state更新，进而导致一次新的绘制。

不过它会在浏览器完成当前这次UI的更新后才开始，从而避免同时进行两次UI的更新。

谨慎使用 setState

最好的初始 state 的做法是在 constructor 中，要使用它的原因应该是诸如：tooltip、modals 或者类似的你需要根据 DOM 节点位置来决定渲染效果。

shouldComponentUpdate

当你不想让 React 重新根据 state 和 props 渲染的时候，可以使用这个方法。

它应该被谨慎地应用于性能优化中，并且不应该过度依赖他，因为他可能导致一些bug。

你不能在该方法中更新 state。

shouldComponentUpdate(nextProps, nextState) {
 return this.props.title !== nextProps.title || 
  this.state.input !== nextState.input }

上述例子表明，该方法应该始终放回一个布尔值，用于告诉 React 是否应该重新渲染组件。

getSnapshotBeforeUpdate

该方法在 DOM 被更新后会马上被调用，调用的返回值会被传递给 componentDidUpdate 方法。

同样需要注意的是，这个方法不应该被频繁使用。

getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...
}

componentDidUpdate

组件更新完成后会马上调用该方法，你可以在该方法中使用setState，但是应该带上条件，否则会导致死循环。

componentDidUpdate(prevProps) {
 //Typical usage, don't forget to compare the props
 if (this.props.userName !== prevProps.userName) {
   this.fetchData(this.props.userName);
 }
}