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

Question

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

Answer 1

我一直在使用几个月的反应，而我的大部分工作是从头开始创建一个大型应用程序。因此，一开始就提出了同样的问题。

下面的信息是基于学习，同时发展和通过多个文档在那里得到它的权利。

至于问这里的问题是在生命周期方法夫妇的用途的情况下反应

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获取收益数据，原始数据模拟成道具要传递给孩子
   • this.setState()不允许在此功能，它是在componentWillReceiveProps做或componentDidUpdate

6. componentDidUpdate(prevProps,prevState)

   • 后调用权的变化都推到DOM
   • 我已经用它的时候所需要的数据是不是在第一渲染（等待API调用来通过）和DOM要求是陈基于数据GED收到
   • 例如，根据收到的年龄显示给用户，如果他有资格申请的事件

7. componentWillUnmount()

   • 作为官方文档中提到的任何事件在组件中使用监听器或定时器这里要清洁

---

在不确定的时刻，我将如何知道答案在于生命周期方法的 ？

我建议什么比喻

1. 变化是组件本身

   • 例触发，启用字段编辑在编辑按钮
   • 在同一个函数的点击组件更改状态不涉及生命周期功能
2. 变更被触发组件
   • 实施例之外，API调用完成时，需要显示所接收的数据
   • 为胜生命周期方法。

---

这里有一些更多的场景 -

1. 处于状态/道具的变化需要修改的DOM？

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

2. 处于状态/道具的变化，需要对数据进行更新？

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

3. 道具被传递到一个子被改变，孩子需要更新

   • 实施例，
   • shouldComponentUpdate

4. 添加一个事件监听器

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

5. 调用API

   • 'componentDidMount'

来源 -

个

1. 文档 - 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是更新lifce周期方法的一部分和渲染开始之前被称为 - 这扫清了生命周期概念

事件监听器https://facebook.github.io/react/docs/component-specs.html

this scotch.io文章。最明显的例子是当新的道具被传递给组件时。例如，我们有一个表单组件和一个人员组件。表单组件有一个允许用户通过在输入中键入来更改名称的单个表单组件。输入绑定到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> 
    ); 
    } 
} 

任何时候用户键入到这里，都会开始更新Person组件。在Component上调用的第一个方法是componentWillReceiveProps（nextProps）传入新的prop值。这使得我们可以将传入的道具与我们当前的道具进行比较，并根据价值做出合理的决定。我们可以通过调用this.props来获得我们当前的道具，并且新值是传递给该方法的nextProps参数。