Question

假设一个组件需要检查当前状态，并在传入新的props时有条件地允许组件更新。

在内部传递道具时，有哪些方法可以存储组件的内部状态。

Answer 1

在React组件中，更新可能由props或state的更改引起。对props的更改可以从顶层传递下来，也可以从Redux state中的更改传递（使用connect(mapStateToProps, mapDispatchToProps)映射到组件）。

使用shouldComponentUpdate()让React知道某个组件的输出是否不受state或props中当前更改的影响。

在收到新的shouldComponentUpdate()或props时，会在呈现前调用

state。默认为true。

假设某个时候应用程序的当前state如下：

this.state = {
     firstName: 'John Doe',
     updateError: '',
     canEdit: 1
}

例如：我们需要确保如果组件需要更新，那么当前state应为空，因为它的初始state如下所示：

this.state = {
     firstName: '',
     updateError: '',
     canEdit: null
}

然后可以使用shouldComponentUpdate()，如下所示：

shouldComponentUpdate(nextProps, nextState) {
  let _this = this;
  let isStateEmpty = Object.keys(this.state).some(function(k) {
    let _item = _this.state[k];
    if (_item) {
      return false;
    }
  });
  return isStateEmpty;
}

如果shouldComponentUpdate()返回false，则不会调用componentWillUpdate()，render()和componentDidUpdate()。当Redux用于更改应用程序的外部shouldComponentUpdate()时，也可以使用state。（使用connect(mapStateToProps, mapDispatchToProps)）。

shouldComponentUpdate()可以与componentWillUpdate()一起有效地用于在更新发生之前执行准备工作。初始渲染不会调用此方法。

希望这有帮助。感谢

如何在更新时在React中有条件地保持内部状态

1 个答案: