Question

我们有一个聊天页面，其中结构基本上是，消息在一个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的绘画闪烁功能建立起来，该功能可以重新呈现表单中任何按键上的所有消息。情况应该不是这样，因为消息没有收到任何新的道具或根本没有变化。

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

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

React / Redux-form不必要地使用无状态组件重新渲染但不使用类

0 个答案: