javascript - react 生命周期方法理解

Question

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

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

1)

据我了解，componentWillUpdate 和 componentWillReceiveProps 的区别就是 componentWillReceiveProps 会在父级更改 props 时调用，我们可以使用 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 时，我们将期望在 TableSorter 中调用 componentWillReceiveProps。

但是，我不太明白在这种情况下如何使用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");
     });
  },

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

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

Answer 1

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

props 和 state 的根本区别是 state 是组件私有(private)的。这就是为什么父组件或任何其他人都不能操纵组件的状态(例如调用 setState)的原因。因此，父子组件关系的默认工作流程如下:

• parent 将新 Prop 传递给 child
• child 处理“componentWillReceiveProps”中的新 Prop ，必要时调用setState
• 子组件在“componentWillUpdate”中处理新状态 - 但如果您的组件是有状态的，则在“componentWillReceiveProps”中处理 Prop 就足够了。

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

注意:我找到了Understanding the React Component Lifecycle文章对理解 React 的生命周期方法有很大帮助。