react生命周期方法理解

IT技术 javascript reactjs lifecycle
2021-05-06 00:10:15

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

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

1)

据我了解,之间的差别componentWillUpdate,并componentWillReceiveProps 是,componentWillReceiveProps当父改变了props,我们可以使用的setState(这个孩子里面的setState将被调用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 从 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 方法中?

希望你能理解我的解释,如果你有任何提示,请给我一些提示。

4个回答

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

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

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

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

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

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

初始化

安装

更新

卸载

这是组件生命周期的不同方法的快速演练。必须对生命周期方法有很好的理解才能在 React 中高效编码。

生命周期阶段方法

安装阶段的方法:

这个阶段开始于组件实例的创建以及它被渲染到 DOM 中时。

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

更新阶段的方法:

当组件的属性(又名 props)或状态发生变化时,这个阶段就开始了。

1. componentWillReceiveProps(nextProps)- 当组件更新并接收新props时调用。
2. shouldComponentUpdate(nextProps, nextState)- 收到props后调用,即将更新。如果此方法返回 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

这是 React 生命周期方法的惊人图表(由 Dan Abramov 制作在此处输入图片说明

此图的交互式版本

我读过的最好的文章来理解 React 组件生命周期:

理解 React 组件生命周期