反应生命周期方法理解

Question

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

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

1)

据我了解，componentWillUpdate和componentWillReceiveProps的区别是 componentWillReceiveProps 会在父级更改道具时调用，我们可以使用 setState（setState of this child inside componentWillReceiveProps）。

例如：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 时，我们将期望 componentWillReceiveProps 在 TableSorter 中被调用。

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

componentWillUpdate(object nextProps, object nextState)

我们如何将 nextState 从父级传递给子级？或者我错了，nextState是从父元素传来的吗？

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

Invoked once, both on the client and server, immediately before the initial rendering occurs.

在这种情况下，如果我在此方法中使用 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");
     });
  },

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

希望你能看懂我的解释，有问题还请多多指教。

Answer 1

1) 在 React 的更新生命周期中，componentWillReceiveProps 在 componentWillUpdate 之前被调用。你是对的 componentWillReceiveProps 允许你调用 setState。另一方面，componentWillUpdate 是当您需要响应状态更改时使用的回调。

props 和 state 的根本区别是 state 是组件私有的。这就是为什么 parent 组件或任何其他人都不能操纵组件的状态（例如调用 setState）的原因。因此 parent-child 组件关系的默认工作流程如下：

Parent 将新道具传递给 child
Child 处理 'componentWillReceiveProps' 中的新道具，必要时调用 setState
Child 处理 'componentWillUpdate' 中的新状态 - 但如果您的组件是有状态的，则处理 'componentWillReceiveProps' 中的道具就足够了。

2) 您提供了一个很好的代码示例来说明差异。 getInitialState 中设置的默认值将用于初始渲染。来自 componentWillMount 的 loadData 调用将发起一个 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

组件生命周期方法是一个函数，我们可以选择在基于 class 的组件中定义它。如果我们决定实现这些方法，它们将在组件生命周期的某些时刻由 React 自动调用。

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

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

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

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

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

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

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

首先，当组件出现在浏览器屏幕上后，将立即调用名为 componentDidMount() 的生命周期方法。这意味着如果我们在 class 内部定义一个函数，在 constructor(props) 外部，就在 render() 方法之上，我们可以像这样定义一个名为 componentDidMount() 的方法：

componentDidMount() {

}

render() {

}

当组件首次呈现在屏幕上时，该函数将被自动调用一次。当组件第一次出现时，我们可以将代码放入其中以进行设置或执行一些初始数据加载或我们可能想一次性执行的各种操作。

调用该方法后，组件将等待更新。更新将以 this.setState().

的形式出现

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

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

在某些时候，我们可能想要停止 componentDidUpdate() 组件，这就是我们实现 componentWillUnmount() 的地方，这是我们想要在清理组件时调用的方法.

Answer 5

React 组件生命周期的四个阶段

Initialization

Mounting

Update

Unmounting

下面是组件生命周期的不同方法的快速演练。您必须充分理解生命周期方法才能在 React 中高效编码。

Life Cycle Phase Methods

Methods in Mounting Phase:

此阶段在创建组件实例并呈现到 DOM 时开始。

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

Methods in Updating Phase:

当组件的属性（a.k.a 道具）或状态发生变化时，此阶段开始。

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

Methods in Unmounting Phase:

当组件从 DOM 中删除时，此阶段开始。

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

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

反应生命周期方法理解

react lifecycle methods understanding

javascript

lifecycle

reactjs