像componentWillReceiveProps这样的React生命周期方法的典型用例是什么?

What are typical use cases for React lifecycle methods like componentWillReceiveProps

本文关键字：典型 是什么 方法 生命 componentWillReceiveProps React 周期      更新时间：2023-09-26

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

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

下面的信息是基于边开发边学习，并通过多个文档来获得正确的。

如问题所述，以下是react

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

  1. componentWillMount()

    • 如果服务器端呈现，则在服务器端调用一次，在客户端调用一次。
    • 我个人使用它只是为了做api调用，不直接影响组件，例如获得oAuth令牌

  2. componentDidMount()

    • 这个函数主要用于调用API(这就是为什么在componentDidMount中调用它而不是在componentWillMount中调用它)
    • 组件state初始化，基于父级传递的props。

  3. componentWillReceiveProps(nextProps,nextState)

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

  4. shouldComponentUpdate(nextProps, nextState)

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

  5. componentWillUpdate(nextProps,nextState)

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

  6. componentDidUpdate(prevProps,prevState)

    • 在更改被推送到DOM后立即调用
    • 我使用它每当所需的数据不是在第一次渲染(等待api调用通过)和DOM需要根据收到的数据进行更改
    • 示例，根据收到的年龄向用户显示他是否有资格申请某个事件

  7. componentWillUnmount()

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

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

我建议用什么类比

  1. 更改在组件本身触发

    • 示例，点击编辑按钮可以编辑字段
    • 同一个组件中的一个函数改变状态，不涉及生命周期函数

  2. 更改在组件外部触发

      示例，api调用完成后，需要显示接收到的数据
  3. win.

这里有更多的场景-

  1. 状态/道具的改变需要修改DOM吗?

      例如，如果当前的邮件已经存在，给输入类一个错误类。
  2. componentDidUpdate

  3. 状态/道具的改变是否需要更新数据?

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

  4. 传递给子元素的Props被改变了，子元素需要更新

    • ,
    • shouldComponentUpdate

  5. 添加事件监听器

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

  6. Call api

    • "componentDidMount"

来源——

  1. Docs - https://facebook.github.io/react/docs/component-specs.html
  2. 这苏格兰威士忌。清除了生命周期概念的一篇文章
  3. 事件监听器- https://facebook.github.io/react/tips/dom-event-listeners.html

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

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

componentDidMount:在组件呈现后立即调用。在需要访问DOM元素时非常有用。例如，我用它来禁用复制和粘贴到密码输入字段。如果你想知道组件的状态，这对于调试非常有用。

componentWillReceiveProps:当组件接收到新的道具时调用。用于使用新道具设置状态而无需重新渲染。

componentWillReceiveProps是Update生命周期方法的一部分，在呈现开始之前调用。最明显的例子就是将新道具传递给组件。例如，我们有一个Form Component和一个Person Component。表单组件有一个允许用户通过在输入中输入来更改名称的控件。输入被绑定到onChange事件并在Form上设置状态。状态值然后作为道具传递给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组件的更新就开始了。组件上调用的第一个方法是componentWillReceiveProps(nextProps)，传入新的道具值。这允许我们将传入的道具与当前道具进行比较，并根据值做出逻辑决策。我们可以通过调用这个来获取当前的道具。新值是传递给方法的nextProps参数。

相关文章：