qyhyzard

【详解】 React 组件生命周期 API 及 useEffect Hook 新特性方案

文章目录

一、引言
二、组件生命周期过程及API详解

2.1 Mount

2.1.1 constructor
2.1.2 getDefaultProps
2.1.3 getInitialState
2.1.4 componentWillMount
2.1.5 render
2.1.6 componentDidMount

2.2 Update

2.2.1 componentWillReceiveProps
2.2.2 getDerivedStateFromProps
2.2.3 shouldComponentUpdate
2.2.4 componentWillUpdate
2.2.6 getSnapshotBeforeUpdate
2.2.5 componentDidUpdate

2.3 unmount

2.3.1 componentWillUnmount

三、使用 useEffect 方法替代生命周期API

3.1 componentDidMount vs useEffect
3.2 componentDidUpdate vs useEffect
3.3 componentWillUnmount vs useEffect

四、 React Hooks 推荐阅读

本文篇幅较长，如果你想要：

完整了解整个组件生命周期的变更和对应函数API，那么请从头开始；
快速理解传统生命周期函数API的含义和使用，那么点击目录第二部分；
快速了解如何在函数组件中使用useEffect来替代原有的生命周期API，那么点击目录第三部分。

一、引言

如果你是一名前端开发者，并且使用React开发框架，那么你一定绕不开React的一个核心概念——组件生命周期。 组件的生命周期描述的是一个组件从创建，渲染，加载，显示到卸载的整个过程。其大致过程如下：

图片来源请戳此链接：http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

我们从上图可以得知，一个组件主要包括三种行为，分别是：创建，更新，卸载。每个行为又可以划分为：Render 渲染阶段和 Commit 阶段 （更新时存在Pre-Commit 阶段）。这里先简单了解一下生命周期的概况，后文会进行详细描述。

React 官方开发者在生命周期的每个阶段都提供了相关的API，我们可以使用这些API定义组件在某个生命周期进行执行相关的行为。比较常用的就是使用componentDidMount API，在该函数内部获取来自服务器的数据。

学习这些API函数的使用并了解组件的生命周期的运行机制，是一个React开发者的基本功！

但是，我们必须不能只注重 API 的使用，而忽略了对生命周期的过程理解，API 只是 API，随时都有可能被替代！

这不，在 React v16.8 版本中，横空出世的 Hooks （俗称钩子）颠覆了之前的类组件范式，让函数组件逐渐成为主流，越来越多的团队开始考虑基于Hooks进行项目的重构，过去那种在类组件中调用各种生命周期API函数的方法将会慢慢成为过去（不过现在还是得学呀…）

本文不打算进行详述Hooks的用法及优越性，已经有许多优秀的前端团队对其展开了极富深度的论述啦，我只是一个刚入门不久的前端菜鸟，暂时难以从高层的视角来评判，如果你感兴趣，本文在第四部分推荐阅读给出一些高质量的链接，你可以学到更多。

回到主题。Hooks 提供了一套新的阐释组件生命周期的方式，原先许多生命周期的 API 都有了对应的 Hooks 解决方案——使用强大的useEffect这一Hooks函数。

综上，本文主要关注以下内容：

类组件生命周期理解和API用法；
如何在函数组件中使用useEffect来替代类组件的生命周期API。

攥写本文的初衷是，本人最近在经常使用React框架开发，对生命周期这一核心概念有必要进行一番梳理，同时也发现网上关于讲解如何使用新特性Hooks来定制生命周期行为的博文数目较少而且不全面，所以我花费几个小时的时间来整理这些概念，总结方法并提供具体的代码实例，希望能帮助到大家，互相学习。

二、组件生命周期过程及API详解

这里先放我从谷歌搜到的一张大家都在用的生命周期图（图源见链接），直接从API入手描述整个组件的生命周期过程，如果你已经使用过相关的API，那相当明了，但考虑到初学者，我还是基于个人理解给大家归纳总结一下，帮助大家理解、记忆和使用。

本文将API归为三类：

Mount：挂载API
Update：更新API
Unmount：卸载API

结合上述流程图，我们从这三类API开始展开叙述，简单讲解一些不常用的API (不完全覆盖），多把文字放在常用的API(基本覆盖）上。

2.1 Mount

挂载一个组件的过程是先实例化创建该组件并渲染，然后读取DOM使得组件运行在浏览器中。整个过程涉及到的 API 函数如下：

当组件在客户端实例化首次创建时，以下方法依次被调用：

getDefaultProps(ES5语法，过时）
getInitialState（ES5语法，过时）
componentWillMount（弃用）
render(必须使用）
componentDidMount(常用）

当组件属于服务端渲染时，以下方法依次被调用：

getDefaultProps
getInitialState
componentWillMount
render

服务端渲染没有 componentDidMount 方法时因为其执行阶段是组件挂载（插入DOM树）之后，才会执行，发生在客户端。

但需要提醒的是，getDefaultProps 和 getInitialState 方法仅适用于非ES6语法情况，在ES6语法中我们使用 constructor函数来代替 getInitialState 函数，而getDefaultProps则可以通过手动赋值指定props属性，但已不属于函数方法了。（来源官方文档不适用ES6），但是考虑到可能还有些人依旧会使用ES5语法，这里也会简单介绍这两个函数。（后续若非特别指明，否则讨论范围都在ES6语法之内）

同时在图一，我们可以得知在constructor之后，render之前会有一个getDerivedStateFromProps函数，这个函数在挂载和更新阶段都有可能调用，我们放在update部分来讲。

所以下文我将介绍上述6个函数，包括函数的作用，方法和一些注意事项。

2.1.1 constructor

这是目前常用的一个函数，我们编写的React 类组件都是React.Component基类的继承，组件进行实例化的时候，都会调用其构造函数；如果你不初始化 state，不绑定方法的话，你不需要为 React 组件实现构造函数（它会调用默认构造函数）。

而且在构造函数的开头，你需要调用 super(props), 不然会有许多蜜汁bug难以定义和识别；

通常构造函数的作用就是：

初始化内部state变量
为事件处理函数绑定实例
需要注意的时，在构造函数里不要出现setState方法，我们仅需要为 this.state 赋初始值即可。

一个常见的例子如下：

// credit to https://react.docschina.org/docs/react-component.html#constructor
constructor(props) {
  super(props);
  // 不要在这里调用 this.setState()
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

2.1.2 getDefaultProps

这种方法其实只有在使用非ES6语法定义组件（即采用ES5语法 React.createClass定义组件）的时候才会出现，这是一种声明默认组件属性（props）的方法。该函数只会调用一次。
一个简单的例子：

// credit to https://www.cnblogs.com/MuYunyun/p/6629096.html#_lab2_0_0
var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'  // 声明默认的属性title
    };
  },

  render: function() {
     return <h1> {this.props.title} </h1>;  // 调用props属性
   }
});

ReactDOM.render(
  <MyTitle />,
  document.body
);

而在ES6语法中，这个函数已经被弃用了，起同样作用的写法如下：

// credit to 
// https://zh-hans.reactjs.org/docs/react-without-es6.html#setting-the-initial-state
class Greeting extends React.Component {
  // ...
}

Greeting.defaultProps = {
  name: 'Mary'
};

2.1.3 getInitialState

在ES5语法中，这个函数的作用相当于初始化每个组件实例的state变量；在ES6语法中，我们可以通过在constructor函数里头对this.state赋初始值，以起到同样的效果。
getInitialState和getDefaultProps的区别在于，getDefauProps 对于组件类来说只会调用一次，而getInitalState是在每个组件实例化的时候都会调用，并且只调用一次。而props和state的区别在于props是通过父组件传递，在所有实例中共享，而state只存在组件内部，保存组件的某些状态。
这里提供一个代码实例帮助理解：

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

2.1.4 componentWillMount

这个函数在进行组件渲染之前调用，这个函数内部进行setState时，并不会触发额外的渲染（合并到在下一步的render中执行）。因为此方法在组件的生命周期中只调用一次，而这恰好发生在组件初始化之前。因此，无法访问DOM。

当你使用服务端渲染的时候，这是服务器端惟一调用的生命周期方法。

不过这个函数在较新版本的React中已经被视为不安全(unsafe)，官方建议我们不使用该函数。详见（UNSAFE_componentWillMount()）。
这个方法是特别不常用并且不建议使用的。仅提供一个简单实例：

 componentWillMount() {
    let mode;
    if (this.props.age > 70) {
      mode = 'old';
    } else if (this.props.age < 18) {
      mode = 'young';
    } else {
      mode = 'middle';
    }
    this.setState({ mode });
  }

2.1.5 render

这个方法是最常用，而且在类组件中是必用的方法。该方法用于创建一个虚拟DOM，用来表示组件的结构。需要注意几点的就是：

只能通过props和state来访问数据，不能修改；
支持返回null,false或其他react组件；
只能返回一个顶级组件，如果出现多个组件，你需要用
标签变成一个组件；
无法改变组件的状态，class组件中只能通过setState方法改变。

这里不给出实例，见上面代码即可。

2.1.6 componentDidMount

当组件挂载（Mount）到DOM树上但并未显示到浏览器上时，这个函数方法将会被立即调用。
一些依赖于DOM节点初始化的操作应该要放在这里，如常见的向服务器请求数据。

我们通常在这个函数内部获取数据，然后通过setState的方法触发额外的渲染，也就是说从构造到浏览器运行组件可能会触发两次的render，但是用户并不会看到中间的状态，因为此时的浏览器并未更新屏幕。

不过这个方法内部的数据请求过于庞大可能会引发性能问题，需要谨慎使用。

虽然我们也可以在componentWillMount函数中请求数据，但是官方推荐我们使用这个函数进行数据的异步请求。详细看官方解释fetching-external-data。

我摘取其重要部分代码和内容，浓缩如下：
先看两个函数的使用实例。

// Before 使用componentWillMount
class ExampleComponent extends React.Component {
  state = {
    externalData: null,
  };

  componentWillMount() {
    this._asyncRequest = loadMyAsyncData().then(
      externalData => {
        this._asyncRequest = null;
        this.setState({externalData});
      }
    );
  }

  componentWillUnmount() {
    if (this._asyncRequest) {
      this._asyncRequest.cancel();
    }
  }

  render() {
    if (this.state.externalData === null) {
      // Render loading state ...
    } else {
      // Render real UI ...
    }
  }
}

// After 使用componentDidMout
class ExampleComponent extends React.Component {
  state = {
    externalData: null,
  };

  componentDidMount() {
    this._asyncRequest = loadMyAsyncData().then(
      externalData => {
        this._asyncRequest = null;
        this.setState({externalData});
      }
    );
  }

  componentWillUnmount() {
    if (this._asyncRequest) {
      this._asyncRequest.cancel();
    }
  }

  render() {
    if (this.state.externalData === null) {
      // Render loading state ...
    } else {
      // Render real UI ...
    }
  }
}

官方推荐使用componentDidMount处理组件异步请求的理由如下：

我们知道服务端渲染（SSR）的时候，不会执行componentDidMount但是会执行componentWillMount，此时如果数据请求卸载componentWillMount时，服务器和客户端将会执行两次请求，使用componentDidMount API将会减少不必要的请求。
在服务段渲染的时候，使用componentWillMount时可能有服务端内存泄漏（出现不调用componentWillmount）以及渲染中断，导致异步渲染（渲染中断导致componentWillMount不调用）的情况。
从react16.3开始 componentWillMount API被视为不安全，逐渐弃用。

同时官方也推荐在componentDidMount进行事件订阅的操作。有一点要注意的是如果你在componentDidMount使用了订阅事件，那么你要在卸载API componentWillUnmount中取消订阅。请求发送数据同理。

下面是一段实例代码，帮助你理解。

// After
class ExampleComponent extends React.Component {
  state = {
    subscribedValue: this.props.dataSource.value,
  };

  componentDidMount() {
    // Event listeners are only safe to add after mount,
    // So they won't leak if mount is interrupted or errors.
    this.props.dataSource.subscribe(
      this.handleSubscriptionChange
    );

    // External values could change between render and mount,
    // In some cases it may be important to handle this case.
    if (
      this.state.subscribedValue !==
      this.props.dataSource.value
    ) {
      this.setState({
        subscribedValue: this.props.dataSource.value,
      });
    }
  }

  componentWillUnmount() {
    this.props.dataSource.unsubscribe(
      this.handleSubscriptionChange
    );
  }

  handleSubscriptionChange = dataSource => {
    this.setState({
      subscribedValue: dataSource.value,
    });
  };
}

当 componentDidMount 函数运行完毕之后，我们的组件就显示在屏幕上啦。

接下来介绍组件运行在浏览器之后，如何更新。

2.2 Update

我们的组件运行在浏览器的时候，会随着数据状态的变动进行更新。变动主要包括组件自身state的变动，以及父组件传递下来的props的变动。对应的流程图部分如下：

可以看到执行过程类似Mount，都有 will render did 过程对应的API，但区别在于挂载中的组件需要根据props和state的变化判定是否需要更新（当然通常情况下是需要更新）。

上述流程主要包括了以下方法：

componentWillReceiveProps：props 触发更新API；（弃用）
shouldComponentUpdate: 确定是否触发更新；（不常用）
componentWillUpdate：渲染前的组件更新API；（弃用）
render：渲染函数；（必用）
componentDidUpdate：渲染后更新的API；（常用）

同时我们还会介绍 getDerivedStateFromProps 这一函数，它在挂载和更新都可以使用，但不是常用函数。

2.2.1 componentWillReceiveProps

这个函数会在已挂载的组件接受新的props之前被调用，如果你需要更新状态以及相应prop的更改，
那么你需要比较this.props和nextProps并在这个函数中使用this.setState()执行state转换。但在Mount阶段不会使用。

需要明白的是，只要父组件重新渲染，那么即便props没有更改，本方法也会调用。
虽然本方法是处于弃用(官方标记为 unsafe)的状态，但是也有一个重要的好处，就是可以定义子组件接受父组件props之后的状态和行为。
下面给出一个简单例子：

//这种方式十分适合父子组件的互动，通常是父组件需要通过某些状态控制子组件渲染亦或销毁...
// credit to https://juejin.im/post/5a39de3d6fb9a045154405ec
componentWillReceiveProps(nextProps) {
//componentWillReceiveProps方法中第一个参数代表即将传入的新的Props
    if (this.props.sharecard_show !== nextProps.sharecard_show){
        //在这里我们仍可以通过this.props来获取旧的外部状态
        //通过新旧状态的对比，来决定是否进行其他方法
        if (nextProps.sharecard_show){
            this.handleGetCard();
        }
    }
}

父组件通过setState的方法触发更新渲染（可能不会改变子组件的props），从而触发上述的函数。

2.2.2 getDerivedStateFromProps

static getDerivedStateFromProps(props, state)

这个函数是新版本的react中提出来的，会在调用render方法之前调用，并且在初始挂载和后续更新过程中都会被调用，它应该返回一个对象来更新state，如果返回null，那么就不想需要更新内容。
不过这个函数也处于不常用的状态，原因是会带来代码的冗余。官方给出了一些替代的方案。

派生状态会导致代码冗余，并使组件难以维护。确保你已熟悉这些简单的替代方案：

如果你需要执行副作用（例如，数据提取或动画）以响应 props 中的更改，请改用componentDidUpdate。

如果只想在 prop 更改时重新计算某些数据，请使用 memoization helper 代替。

如果你想在 prop 更改时“重置”某些 state，请考虑使组件完全受控或使用 key 使组件完全不受控代替。

这个方法每次渲染前都会触发，不同于 componentWillReceiveProps仅在父组件重新渲染时进行触发。图一指出了更新阶段的三种情况下，这个函数会被触发：

setState()方法
props 改变
forceUpdate方法调用

给出一个官方实例：

// credit to https://react.docschina.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state
class EmailInput extends Component {
  state = {
    email: this.props.defaultEmail,
    prevPropsUserID: this.props.userID
  };

  static getDerivedStateFromProps(props, state) {
    // Any time the current user changes,
    // Reset any parts of state that are tied to that user.
    // In this simple example, that's just the email.
    if (props.userID !== state.prevPropsUserID) {
      return {
        prevPropsUserID: props.userID,
        email: props.defaultEmail
      };
    }
    return null;
  }

  // ...
}

2.2.3 shouldComponentUpdate

这个函数发生在上面的函数 componentWillReceiveProps之后，其返回值true or false用于判断当前的state和props变化是否需要触发组件的更新。

默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。
这个函数是一个不常用的函数，如果你想避免一些无谓的渲染以提升性能的话，那么可以考虑使用它。

用法比较简单，一般是在函数内部添加一些比较条件即可。
给出一个简答的例子帮助理解。

// credit to https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/using_should_component_update.html

/**
 * Performs equality by iterating through keys on an object and returning false
 * when any key has values which are not strictly equal between the arguments.
 * Returns true when the values of all keys are strictly equal.
 */
function shallowEqual(objA: mixed, objB: mixed): boolean {
  if (objA === objB) {
    return true;
  }

  if (typeof objA !== 'object' || objA === null ||
      typeof objB !== 'object' || objB === null) {
    return false;
  }

  var keysA = Object.keys(objA);
  var keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  // Test for A's keys different from B.
  var bHasOwnProperty = hasOwnProperty.bind(objB);
  for (var i = 0; i < keysA.length; i++) {
    if (!bHasOwnProperty(keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) {
      return false;
    }
  }

  return true;
}

function shallowCompare(instance, nextProps, nextState) {
  return (
    !shallowEqual(instance.props, nextProps) ||
    !shallowEqual(instance.state, nextState)
  );
}

var ReactComponentWithPureRenderMixin = {
  shouldComponentUpdate: function(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  },
};

2.2.4 componentWillUpdate

当组件收到新的props或state，经过函数shouldComponentUpdate确认允许组件更新之后，这个函数会在组件更新渲染之前被调用。

这个函数在更新渲染前被使用，初始挂载阶段的渲染将不会调用此方法。这个方法中不能调用setState方法，而且也不能执行任何操作触发对 react组件的更新。

不过这个方法已经被新版本的react标记为不安全，属于弃用状态。

不过还是提供一个简单的例子，如下：

// credit to https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/tapping_into_componentwillupdate.html
// dispatching an action based on state change
componentWillUpdate(nextProps, nextState) {
  if (nextState.open == true && this.state.open == false) {
    this.props.onWillOpen();
  }
}

2.2.6 getSnapshotBeforeUpdate

这个函数比较不常用，在最近一次渲染输出（提交到 DOM 节点）之前被调用（render之后）。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。
从图一中可看出，这个函数发生在render之后，属于一个特殊的pre-commit阶段，可以读取DOM数据。

贴一个官网的简单实例，关于如何捕获滚动位置并利用：

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 我们是否在 list 中添加新的 items ？
    // 捕获滚动位置以便我们稍后调整滚动位置。
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 如果我们 snapshot 有值，说明我们刚刚添加了新的 items，
    // 调整滚动位置使得这些新 items 不会将旧的 items 推出视图。
    //（这里的 snapshot 是 getSnapshotBeforeUpdate 的返回值）
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

2.2.5 componentDidUpdate

这个函数是最常用的了，会在更新并且shouldComponentUpdate返回true的情况下，render之后调用，但是mount阶段的render则不会执行此方法。
组件进行更新之后，我们可以在这个函数中对DOM进行操作,以及setState()操作（需要注意包裹在条件语句中，不然一直处于setState更新状态导致死循环），同时可以根据前后的props差别来进行网络请求，这一点类似于componentDidMount。

再提醒一遍，函数内部需要有条件约束才能进行DOM操作，setState和获取数据，不然会导致一直更新死循环！

给出官方一个实例：

componentDidUpdate(prevProps) {
  // 典型用法（不要忘记比较 props）：
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);  
  }
}

2.3 unmount

这个阶段比较好理解，就是组件从DOM树上销毁卸载的过程，只涉及一个 componentWillUnmount API。

2.3.1 componentWillUnmount

我们通常会在此方法中执行必要的清理操作，如取消网络请求，移除事件订阅等，而且要不应该调用setState()方法。
这个阶段我们就只负责清理就好了！一般和componentDidMount和componentDidUpdate搭配一起出现。
摘取上面一个例子。

componentDidMount() {
    this.props.dataSource.subscribe(
      this.handleSubscriptionChange
    );
    if (
      this.state.subscribedValue !==
      this.props.dataSource.value
    ) {
      this.setState({
        subscribedValue: this.props.dataSource.value,
      });
    }
  }

  componentWillUnmount() {
    this.props.dataSource.unsubscribe(
      this.handleSubscriptionChange
    );
  }

到此,传统但重要的生命周期API已经基本介绍完毕啦。

三、使用 useEffect 方法替代生命周期API

useEffect 是react 新版本推出的一个特别常用的 hooks 功能之一，useEffect 可以在组件渲染后实现各种不同的副作用，它使得函数式组件同样具备编写类似类组件生命周期函数的功能。在这里我们仅仅介绍三个常用的生命周期替代方案，分别是：

componentDidMount vs useEffect
componentDidUpdate vs useEffect
componentWillUnmount vs useEffect

useEffect作用于渲染后！！所以只能替代这三个render阶段后的 lifecycle API~

详细的useEffect使用请看官方文档: 使用useEffect hook,文档中给出了比较详细的useEffect的API解释，这里我就不赘述了。理解完上面的概念之后，看下面几个经过简化后的例子之后，我们就可以快速进行迁移使用useEffect来替代原来的API啦。

3.1 componentDidMount vs useEffect

类组件中，我们这样编写componentDidMount：

class Example extends React.Component {
  componentDidMount() {
    console.log('Did mount!');
  }
  render() {
    return null;
  }
}

在函数组件中，我们可以使用useEffect这样编写：

function Example() {
  // 注意不要省略第二个参数 []，这个参数保证函数只在挂载的时候进行，而不会在更新的时候执行。
  useEffect(() => console.log('mounted'), []);  
  return null;
}

3.2 componentDidUpdate vs useEffect

类组件中，我们这样编写componentDidUpdate：

componentDidMount() {
  console.log('mounted or updated');
}

componentDidUpdate() {
  console.log('mounted or updated');
}

而在函数组件中，我们使用useEffect起到同样的效果：

useEffect(() => console.log('mounted or updated'));  // 不需要指定第二个参数

值得一提的是，现在官方推荐的编程规范就是不区分 update 阶段和 mount 阶段，两个阶段视为一致。

3.3 componentWillUnmount vs useEffect

类组件中，我们这样编写componentWillUnmount：

componentWillUnmount() {
  console.log('will unmount');  
}