javascript - React.js - componentWillReceiveProps 被击中两次

Question

我有一个像这样呈现的 React.js 组件:

    <Social email={this.state.email} />;

页面上有一些事件会更新 this.state.email，结果会通过 render，发送一个新的 email prop 到 Social 组件。

在这个 Social 组件中，我正在监听这样的更新:

  componentWillReceiveProps: function(nextProps) {
    console.log('received props update', nextProps.email);
    this.doSomeWork();
  }

该控制台行被渲染两次，这使得用户界面随着对社交网络的调用而闪烁两次。

我总是可以做这样的事情:

    if (nextProps.email != this.props.email) {
      this.doSomeWork();
    }

但感觉有点hacky...

是否需要双重信息？如果是这样，好奇为什么？

如果不是，追踪和消除它的最佳方法是什么？

Answer 1

您的 Social 组件可能被渲染了两次，因为 setState 在父组件上被调用了两次。它可能正在设置 email 以外的属性，但您的渲染函数被调用，因此 Social 组件渲染了两次。

您可以在 Social 组件中实现 shouldComponentUpdate 方法以防止二次渲染:

shouldComponentUpdate: function(nextProps, nextState) {
    return nextProps.email != this.props.email;
}