反应生命周期方法的理解

Question

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

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

1)

据我了解,之间的差别componentWillUpdate,并componentWillReceiveProps 是,componentWillReceiveProps当父母改变的道具,我们可以使用的setState(这里面孩子的setState会叫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中,我们有

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从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 || []使用getInitialState方法？

希望你能理解我的解释,如果有的话,请给我一些提示.非常感谢:)

Answer 1

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

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

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

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

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

Answer 2

这是 React 生命周期方法的惊人图表（由 Dan Abramov 制作）

此图的交互式版本

Answer 3

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