我们有一个聊天页面,其中结构基本上是,消息在一个div中呈现,然后一个按钮和一个包含单个redux表单字段的输入表单在下面呈现:

<div class='container'>
  <div class='messages'>
    {thisConversation.messages
      ? thisConversation.messages.map((message, i) =>
        <Message
          key={i}
          myUserId={this.props.userId}
          {...message}
        />)
      : ''}
  </div>
  <div className='send-button'>
    <FlatButton
      label='SEND'
      onClick={() => this.props.submitMessage()}
    />
  </div>
  <InputForm handleSubmit={(e) => this.props.submitMessage(e)} />
</div>

我们遇到了性能问题,并注意到在表单中键入时消息中闪烁的图像和div . 我们调查了它并使用Chrome的绘画闪烁功能 Build 起来,该功能可以重新呈现表单中任何按键上的所有消息 . 情况应该不是这样,因为消息没有收到任何新的道具或根本没有变化 .

由于 <Message /> 组件是无状态的,我们将其更改为类以尝试使用 shouldComponentUpdate 解决问题 . 但是,只要我们将它从无状态组件更改为类,React就会以相同的方式停止重新呈现它 . 实际上,这解决了我们的问题 - 我们根本不需要 shouldComponentUpdate .

我不明白a)为什么错误发生在第一位,b)为什么它被解决了 . React如何在重新渲染方面处理类组件和无状态组件有什么不同?