关于 javascript：React 生命周期方法(如 componentWillReceiveProps)的典型用例是什么


What are typical use cases for React lifecycle methods like componentWillReceiveProps

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

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

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

正如问题中所问的，这里是 react

中生命周期方法的几个用例

  • componentWillMount()

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

  • componentDidMount()

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

  • componentWillReceiveProps(nextProps,nextState)

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

  • shouldComponentUpdate(nextProps, nextState)

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

  • componentWillUpdate(nextProps,nextState)

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

  • componentDidUpdate(prevProps,prevState)

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

  • componentWillUnmount()

    • 正如官方文档所提到的，组件中使用的任何事件侦听器或计时器都将在此处清理

    • In the moment of uncertainty, how would I know if the answer lies in
    the lifecycle methods?

    我建议什么类比

  • 在组件本身中触发更改

    • 示例，在单击编辑按钮时启用字段编辑
    • 同一组件中的功能改变状态不涉及生命周期功能

  • 变化是在组件外部触发的

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

    • 这里还有一些场景 -

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

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

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

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

  • 传递给孩子的道具改变了，孩子需要更新

    • 例子，
    • shouldComponentUpdate

  • 添加事件监听器

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

  • 调用api

    • 'componentDidMount'

    • 来源 -

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

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

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

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    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 (
         
            <input type="text" onChange={ this.handleChange } />
            <Person name={ this.state.name } />
         
        );
      }
    }

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