React.js-componentWillReceiveProps被击中两次

Question

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

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

页面上有一些事件会更新this.state.email，结果是经过渲染，这会将新的emailprop 发送到Social组件。

在此Social组件中，我正在侦听这样的更新：

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

该控制台行被渲染两次，这使UI两次闪烁，同时调用社交网络。

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

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

但是感觉有点…

是否会出现双重消息？如果是这样，好奇为什么？

如果没有，找到并消除它的最佳方法是什么？

Answer 1

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

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

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