反应生命周期方法的理解

Question

我是React.js的新手，我正在努力理解React生命周期方法中的几个方法。

到目前为止，我有一些让我困惑的事情：

1)

据我所知，componentWillUpdate和componentWillReceiveProps之间的区别在于，当父级更改道具时，将调用componentWillReceiveProps，我们可以使用setState（componentWillReceiveProps中此子级的setState）。

例如：react-table-sorter-demo

var App = React.createClass({
  getInitialState: function() {
    return {source: {limit: "200", source: "source1"}};
  },
  handleSourceChange: function(source) {
    this.setState({source: source});
  },
  render: function() {
    return (
      <div>
        <DataSourceSelectors onSourceChange={this.handleSourceChange} source={this.state.source} />
        <TableSorter dataSource={urlForDataSource(this.state.source)} config={CONFIG} headerRepeat="5" />
      </div>
    );
  }
});

在TableSorter中，我们有

componentWillReceiveProps: function(nextProps) {
    // Load new data when the dataSource property changes.
    if (nextProps.dataSource != this.props.dataSource) {
      this.loadData(nextProps.dataSource);
    }
  }

意思是当我们改变this.state.source时，我们期望在TableSorter中调用componentWillReceiveProps。

但是，我不太明白如何在这种情况下使用componentWillUpdate，componentWillUpdate的定义是

componentWillUpdate(object nextProps, object nextState)

我们如何将nextState从parent传递给child？或许我错了，是从父元素传递的nextState吗？

2）方法componentWillMount让我困惑，因为在官方文档中，它说

在初始渲染发生之前，在客户端和服务器上调用一次。

在这种情况下，如果我在此方法中使用setState，它将覆盖getInitialState，因为它最初只会被调用一次。在这种情况下，在getInitialState方法中设置参数的原因是什么。在这种特殊情况下，我们有：

  getInitialState: function() {
    return {
      items: this.props.initialItems || [],
      sort: this.props.config.sort || { column: "", order: "" },
      columns: this.props.config.columns
    };
  },
  componentWillMount: function() {
    this.loadData(this.props.dataSource);
  },
  loadData: function(dataSource) {
    if (!dataSource) return;

    $.get(dataSource).done(function(data) {
      console.log("Received data");
     this.setState({items: data});
     }.bind(this)).fail(function(error, a, b) {
      console.log("Error loading JSON");
     });
  },

最初的项目将被覆盖，为什么我们仍然需要在getInitialState方法中使用items: this.props.initialItems || []？

希望你能理解我的解释，如果有的话，请给我一些提示。

Answer 1

1）componentWillReceiveProps在React的更新生命周期中在componentWillUpdate之前被调用。你是对的，componentWillReceiveProps允许你打电话给setState。另一方面，当你需要响应状态变化时，componentWillUpdate是一个回调。

props和state之间的根本区别在于state是组件的私有。这就是为什么父组件或其他任何人都无法操纵组件的状态（例如调用setState）的原因。因此，父子组件关系的默认工作流程如下：

• 父母将新道具传递给孩子
• Child在'componentWillReceiveProps'中处理新道具，必要时调用setState
• Child在'componentWillUpdate'中处理新状态 - 但如果你的组件是有状态的，那么在'componentWillReceiveProps'中处理props就足够了。

2）您提供了一个很好的代码示例来说明差异。在getInitialState中设置的默认值将用于初始渲染。来自loadData的componentWillMount调用将启动一个AJAX请求，该请求可能会或可能不会成功 - 而且不知道需要多长时间才能完成。当AJAX请求完成并且使用新状态调用setState时，该组件将使用默认值在DOM中呈现。这就是为什么在getInitialState中提供默认状态是完全合理的。

注意：我发现Understanding the React Component Lifecycle文章对理解React的生命周期方法有很大帮助。

Answer 2

我读过的最好文章，了解React组件生命周期：

Understanding the React Component Lifecycle

Answer 3

这是React生命周期方法（made by Dan Abramov）的惊人图表

Interactive version of this diagram

Answer 4

React组件的四个阶段

初始化

安装

更新

卸载

以下是对该方法的不同方法的快速演练

生命周期

一个组件。您必须充分了解生命周期方法以进行反应编码。

安装阶段的方法：

它在创建组件实例并将其呈现到DOM中时开始。

1.constructor(props) - 首次初始化组件时调用它。此方法仅调用一次。 2.componentWillMount() - 在组件即将安装时调用它。 3.render() -it在渲染组件时被调用。 4.componentDidMount() - 在组件完成安装时调用它。

更新阶段的方法：

它在组件的属性或状态发生变化时开始。

1.componentWillReceiveProps(nextProps) - 当组件更新并接收新道具时调用它。 2.shouldComponentUpdate(nextProps, nextState) - 在收到道具后即被调用，即将更新。如果此方法返回false，则不会执行componentWillUpdate（），render（）和componentDidUpdate（）。 3.componentWillUpdate(nextProps, nextState) - 在组件即将更新时调用它。 4.render() - 在重新渲染组件时调用。 5.componentDidUpdate(prevProps, prevState) - 在组件完成更新时调用它。

卸载阶段的方法：

它从DOM中删除组件时开始。

1.componentWillUnmount() - 在组件卸载之前立即调用它。

参考：https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0

Answer 5

组件生命周期方法是我们可以在基于类的组件内部定义的函数。如果我们决定实现这些方法，它们将在组件生命周期的某些点由React自动调用。

一个组件将被创建并显示在DOM或浏览器中，我们可以执行类似this.setState()的操作，这将导致组件重新渲染，理论上在某个时间点，组件将从DOM中完全删除并停止显示屏幕上的内容。

整个系列事件就是所谓的组件生命周期。

这些生命周期方法在生命周期的非常不同的时间被调用。

有constructor(props)函数，这是我们可以选择定义的函数，如果我们这样做，它将在创建组件的新实例时自动调用。

有render()方法，这是不可选择的，我们必须定义它。 render()方法是一个生命周期函数，它在组件生命周期的某个时刻被调用。

我们从调用constructor(props)开始然后调用render()方法，返回一些jsx并且内容在屏幕上变得可见。

然后在不同的时间点调用另一系列生命周期方法。

首先，在浏览器屏幕上显示组件之后，将立即调用名为componentDidMount()的生命周期方法。这意味着如果我们在我们的类中定义一个函数，在constructor(props)之外，在render()方法之上，我们可以定义一个名为componentDidMount()的方法，如下所示：

componentDidMount() {

}

render() {

}

当组件首次渲染到屏幕上时，此功能将自动调用一次。我们可以将代码放入设置或执行一些初始数据加载或我们可能希望在组件首次出现时执行的各种操作。

在调用该方法之后，组件将坐下来等待更新。更新将以this.setState()的形式出现。

完成后，组件将更新或重新呈现自己，这将调用另一个名为componentDidUpdate()的生命周期方法。如果我们定义该函数，则只要组件自行更新，它就会自动调用。

该组件将坐下来等待另一次更新和componentDidUpdate()再次或大量的时间。

在某些时候，我们可能想要停止qazxsw poi组件，这就是我们实现qazxsw poi的地方，这是我们想要清理组件时要调用的方法。