反应js-组件将收到被击中两次的道具

Question

我有一个React.js组件，它被渲染成这样：

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

页面上有一些事件更新了此。状态电子邮件，因此，执行render，它会向社交组件发送一封新的电子邮件道具。

在这个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。它可能设置的属性不是电子邮件，但是会调用渲染函数，因此社交组件渲染两次。

您可以在社交组件中实现acidComponentUpdate方法来防止二次渲染：

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