相关疑难解决方法(0)

我一直无法找到明确的答案,希望这不是重复的.

我使用React + Redux作为一个简单的聊天应用程序.该应用程序由InputBar,MessageList和Container组件组成.Container(如您所想)包装其他两个组件并连接到商店.我的消息的状态以及当前消息(用户当前正在键入的消息)保存在Redux存储中.简化结构:

class ContainerComponent extends Component {
  ...
  render() {
    return (
      <div id="message-container">
        <MessageList 
          messages={this.props.messages}
        />
        <InputBar 
          currentMessage={this.props.currentMessage}
          updateMessage={this.props.updateMessage}
          onSubmit={this.props.addMessage}
        />
      </div>
    );
  }
}

更新当前消息时出现的问题.更新当前消息会触发更新存储的操作,该操作会更新通过容器并返回到InputBar组件的props.

这是有效的,但副作用是每次发生这种情况时我的MessageList组件都会被重新渲染.MessageList没有收到当前消息,也没有任何更新的理由.这是一个很大的问题,因为一旦MessageList变大,每次当前消息更新时应用程序都会变得明显变慢.

我已经尝试直接在InputBar组件中设置和更新当前消息状态(因此完全忽略了Redux架构)并"修复"了问题,但是如果可能的话我想坚持使用Redux设计模式.

我的问题是:

• 如果更新了父组件,React是否始终更新该组件中的所有直接子组件？

• 这里的正确方法是什么？