React中componentDidUpdate与componentWillReceiveProps的用法对比及差异问询

咱们来聊聊React里这两个常用的生命周期方法，帮你搞清楚它们该什么时候用，又有哪些不一样的地方。

componentWillReceiveProps的用法 #

这个方法会在组件即将接收新的props时触发（首次渲染不会调用它）。通常我们会在这里对比新旧props的值，当目标props发生变化时执行一些逻辑，比如数据请求、状态更新之类的。

示例代码：

componentWillReceiveProps(nextProps) {
  if(nextProps.myProp !== this.props.myProp) {
    // 当nextProps.myProp和当前props的myProp值不同时，执行这里的逻辑
  }
}

componentDidUpdate的用法 #

和前者类似，但它是在组件完成更新之后才触发的（同样首次渲染不会调用）。这里我们会拿更新前的旧props和当前的props做对比，来处理props变化后的后续操作。

示例代码：

componentDidUpdate(prevProps) {
  if(prevProps.myProp !== this.props.myProp) {
    // 当this.props.myProp的值已经变更时，执行这里的逻辑
    // ...
  }
}

二者的核心差异 #

虽然它们都用来处理props变化后的逻辑，但还是有不少关键区别：

• 执行时机不同：componentWillReceiveProps在props更新前触发，属于更新流程的“准备阶段”；componentDidUpdate在组件DOM更新完成后触发，属于更新流程的“收尾阶段”。
• setState的影响不同：在componentDidUpdate里调用setState会触发额外的一次render，导致组件总共渲染两次；而在componentWillReceiveProps里调用setState不会触发额外渲染，因为此时还没进入本次的更新渲染环节。
• 参数对比逻辑不同：componentWillReceiveProps拿nextProps（即将到来的新值）和当前的this.props对比；componentDidUpdate拿prevProps（更新前的旧值）和更新后的this.props对比。

内容的提问来源于stack exchange，提问作者Jamie Aden