反应生命周期方法的理解 [英] react lifecycle methods understanding

问题描述

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

I am a newbie to React.js and I am trying hard to understand several methods in react lifecycle methods.

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

So far, I still have something that confuses me:

1）

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

As far as my understanding, the difference between componentWillUpdate and componentWillReceiveProps is that componentWillReceiveProps will called when parent change the props and we can use setState (setState of this child inside componentWillReceiveProps).

例如：
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中，我们有

In TableSorter, we have

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

意味着我们更改这个.state.source ，我们希望在TableSorter中调用 componentWillReceiveProps

meaning when we change this.state.source, we will expect componentWillReceiveProps be called in TableSorter

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

However, I don't quite understand how to use componentWillUpdate in this case, the definition of componentWillUpdate is

componentWillUpdate(object nextProps, object nextState)

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

How can we pass nextState from parent into child? Or maybe I am wrong, is the nextState passed from the parent element ?

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

2) method componentWillMount confuses me because in the official document, it says that

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

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

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

In this case, if I use setState in this method, it will overrides the getInitialState since it will called once only on initial. In this case, what the reason to set the parameters in the getInitialState method. In this particular case, we have

  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方法？

items will be overrode initially and why we still need items: this.props.initialItems || [] int the getInitialState method?

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

Hope you can understand my explanation, and please give me some hints if you have any. Many thanks for that :)

推荐答案

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

1) componentWillReceiveProps is called before componentWillUpdate in React's update lifecycle. You are right that componentWillReceiveProps allows you to call setState. On the other hand componentWillUpdate is a callback to use when you need to respond to a state change.

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

The fundamental difference between props and state is that state is private to the component. That's why neither a parent component or anybody else can manipulate the state (e.g. call setState) of the component. So the default workflow for the parent-child component relationship would be the following:

• 父将新道具传递给孩子


• Child处理'componentWillReceiveProps'中的新道具，必要时调用 setState


• 子处理'componentWillUpdate中的新状态' - 但是如果你的组件是有状态的，那么处理'componentWillReceiveProps'中的道具就足够了。

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

2) You provided quite a good code example to illustrate the difference. Default values set in getInitialState will be used for initial rendering. The loadData call from componentWillMount will initiate an AJAX request which may or may not succeed - moreover it is unknown how long it will take to complete. By the time the AJAX request completes and setState is called with new state, the component will be rendered in the DOM with default values. That is why it makes total sense to provide default state in getInitialState.

注意：我发现了解React组件生命周期文章对理解React的生命周期方法有很大帮助。

Note: I found Understanding the React Component Lifecycle article a huge help for understanding React's lifecycle methods.

这篇关于反应生命周期方法的理解的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！