Question

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

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

1）

就我的理解而言，componentWillUpdate和componentWillReceiveProps之间存在差异是父进行更改道具时会调用componentWillReceiveProps，我们可以使用setState（componentWillReceiveProps内的这个子进程的setState。）

例如： https://github.com/bgerm/react-table-sorter-demo/blob/master/jsx/app.jsx

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");
     });
  },

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

希望你能理解我的解释，如果有的话，请给我一些提示。非常感谢：）

Answer 1

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

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

父母将新道具传递给孩子
儿童处理＆＃39; componentWillReceiveProps＆＃39;中的新道具，必要时调用setState
Child处理＆＃39; componentWillUpdate＆＃39;中的新状态 - 但是如果你的组件是有状态的，那么处理“＆＃39; componentWillReceiveProps＆＃39;中的道具”。就足够了。

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

注意：我发现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组件的四个阶段

初始化

安装

更新

卸载

以下是

的不同方法的快速演练

生命周期

组件的

。您必须对生命周期方法有足够的了解，以便在React中进行编码。

安装阶段的方法：

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

1。constructor(props)-首次初始化组件时调用。此方法仅调用一次。
2。componentWillMount()-在即将安装组件时调用。
3。render()-在渲染组件时调用。
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()或花费大量时间。

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

反应生命周期方法的理解

5 个答案: