React 生命周期方法（如 componentWillReceiveProps）的典型用例是什么

Question

componentWillReceiveProps 和其他生命周期方法似乎具有欺骗性的诱惑，给没有经验的 React 编码人员手中的代码带来不必要的复杂性和噪音。它们为什么存在？他们最典型的用例是什么？在不确定的时刻，我怎么知道答案是否在生命周期方法中？

Answer 1

我已经使用 react 几个月了，我的大部分工作都是从头开始创建一个大型应用程序。所以同样的问题一开始就出现了。

以下信息基于在开发过程中的学习以及查阅多个文档以使其正确。

正如问题中所问的，这里有几个反应生命周期方法的用例

1. componentWillMount()

   • 如果存在服务器端渲染，则在服务器端调用一次，然后在客户端调用一次。
   • 我个人只是用它来进行对组件没有直接影响的 api 调用，例如获取 oAuth 令牌

2. componentDidMount()

   • 这个函数主要用于调用API的(here是为什么在componentDidMount而不是componentWillMount中调用它）
   • 组件state 初始化基于父母传递的道具。

3. componentWillReceiveProps(nextProps,nextState)

   • 每次收到道具时都会调用此函数第一次渲染除外
   • 我遇到的最常见的用途是更新我当前组件的状态，而我在componentWillUpdate 中无法做到这一点。

4. shouldComponentUpdate(nextProps, nextState)

   • 在接收到新的道具或状态时，在渲染发生之前调用此方法。如果不需要重新渲染，这里我们可以返回 false。
   • 我认为这是一个性能优化工具。在频繁重新渲染父组件的情况下，应该使用此方法来避免对当前组件进行不必要的更新

5. componentWillUpdate(nextProps,nextState)

   • 该函数在每次更新组件时调用，组件挂载时不调用
   • 在此处执行任何数据处理。例如，当 api fetch 返回数据时，将原始数据建模为 props 以传递给孩子
   • this.setState() 在这个函数中是不允许的，它是在 componentWillReceiveProps 或 componentDidUpdate 中完成的

6. componentDidUpdate(prevProps,prevState)

   • 在将更改推送到 DOM 后立即调用
   • 每当所需数据不在第一次渲染时（等待 api 调用通过）并且需要根据收到的数据更改 DOM 时，我都会使用它
   • 例如，根据收到的年龄向用户显示他是否有资格申请活动

7. componentWillUnmount()

   • 正如官方文档所提到的，这里要清理的组件中使用的任何事件侦听器或计时器

---

在不确定的时刻，我怎么知道答案是否在 生命周期方法？

我建议什么类比

1. 更改是在组件本身中触发的

   • 示例，通过单击编辑按钮启用字段编辑
   • 同一组件中的函数改变状态，不涉及生命周期函数

2. 更改在组件外部触发

   • 示例，api调用完成，需要显示接收到的数据
   • 成功的生命周期方法。

---

这里还有一些场景 -

1. state/props 的变化是否需要修改 DOM？

   • 例如，如果当前电子邮件已经存在，则给输入类一个错误类。
   • componentDidUpdate

2. 状态/道具的变化是否需要更新数据？

   • 例如，父容器对 api 调用后接收到的数据进行格式化，并将格式化后的数据传递给子容器。
   • componentWillUpdate

3. 传递给孩子的道具发生了变化，孩子需要更新

   • 例如，
   • shouldComponentUpdate

4. 添加事件监听器

   • 例如，根据窗口大小添加监听器来监控 DOM。
   • componentDidMount
   • 'componentWillMount' ，销毁listner

5. 调用api

   • 'componentDidMount'

来源 -

1. 文档 - https://facebook.github.io/react/docs/component-specs.html
2. thisscotch.io 文章清除了生命周期概念
3. 事件监听器 - https://facebook.github.io/react/tips/dom-event-listeners.html

Answer 2

最常用的生命周期方法的一些典型用例：

componentWillMount：在初始渲染之前调用。用于进行 AJAX 调用。例如，如果您需要获取用户信息来填充视图，这是一个很好的地方。如果您确实有 AJAX 调用，最好在 AJAX 调用完成之前呈现一个不确定的加载栏。我还使用 componentWillMount 调用 setInterval 并在页面呈现之前禁用 Chrome 的拖放功能。

componentDidMount：在组件渲染后立即调用。如果您需要访问 DOM 元素，这很有用。例如，我用它来禁用复制和粘贴到密码输入字段。如果您想知道组件的状态，非常适合调试。

componentWillReceiveProps：当组件接收到新的 props 时调用。用于在不重新渲染的情况下使用新道具设置状态。

Answer 3

componentWillReceiveProps 是更新生命周期方法的一部分，在渲染开始之前被调用。最明显的例子是当新的道具被传递给组件时。例如，我们有一个 Form 组件和一个 Person 组件。表单组件有一个允许用户通过输入来更改名称的单一组件。输入绑定到 onChange 事件并设置表单上的状态。然后将状态值作为道具传递给 Person 组件。

import React from 'react';
import Person from './Person';

export default class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state        = { name: '' } ;
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ name: event.currentTarget.value });
  }

  render() {
    return (
      <div>
        <input type="text" onChange={ this.handleChange } />
        <Person name={ this.state.name } />
      </div>
    );
  }
}

只要用户在 this 中输入，就会开始对 Person 组件进行更新。在 Component 上调用的第一个方法是 componentWillReceiveProps(nextProps) 传入新的 prop 值。这允许我们将传入的 props 与我们当前的 props 进行比较，并根据值做出合乎逻辑的决策。我们可以通过调用 this.props 来获取我们当前的 props，新的值是传递给方法的 nextProps 参数。