Question

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

Answer 1

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

以下信息基于在开发过程中学习并通过多个文档来实现正确。

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

componentWillMount()
- 如果服务器端呈现，则在服务器端调用一次，在客户端调用一次。
- 我个人用它来做api调用，这些调用对组件没有直接影响，例如获取oAuth令牌
componentDidMount()
- 此功能主要用于调用API (here是为什么要在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()
- 正如官方文档所述，此处要清理的组件中使用的任何事件监听器或计时器

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

我建议的类比

在组件本身中触发更改
- 示例，单击编辑按钮启用字段编辑
- 同一组件中的功能会更改状态，不涉及生命周期功能
在组件外部触发更改
- 例如，api调用完成后，需要显示收到的数据
- 胜利的生命周期方法。

以下是一些其他方案 -

状态/道具的更改是否需要修改DOM？
- 示例，如果当前的电子邮件已存在，请为输入类提供错误类。
- componentDidUpdate
状态/道具的更改是否需要更新数据？
- 示例，父容器，用于格式化api调用后收到的数据，并将格式化数据传递给子项。
- componentWillUpdate
传递给孩子的道具被更改，孩子需要更新
- 示例，
- shouldComponentUpdate
添加事件监听器
- 示例，根据窗口大小添加一个侦听器来监视DOM。
- componentDidMount
- ＆＃39; componentWillMount＆＃39; ，销毁列表
致电api
- ＆＃39; componentDidMount＆＃39;

来源 -

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

Answer 2

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

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

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

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

Answer 3

componentWillReceiveProps是Update lifce cycle方法的一部分，在渲染开始之前调用。最明显的例子是将新的道具传递给Component。例如，我们有一个Form Component和一个Person Component。表单组件有一个允许用户通过键入输入来更改名称的单个组件。输入绑定到onChange事件并在Form上设置状态。然后将状态值作为prop传递给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>
    );
  }
}

每次用户键入此内容都会启动Person组件的更新。调用Component的第一个方法是传递新prop值的componentWillReceiveProps（nextProps）。这允许我们将传入的道具与我们当前的道具进行比较，并根据值做出逻辑决策。我们可以通过调用this.props获取当前的props，新值是传递给方法的nextProps参数。

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

3 个答案: