我还没有找到一个明确的答案,希望这不是重复.
我正在使用React+Redux作为一个简单的聊天应用程序.该应用程序由输入栏、消息列表和容器组件组成.容器(正如您可能想象的)包装了其他两个组件,并连接到store .我的消息的状态以及当前消息(用户当前键入的消息)保存在Redux存储中.简化 struct :
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没有收到当前消息,没有任何更新的理由.这是一个大问题,因为一旦消息列表变大,每次更新当前消息时,应用程序都会明显变慢.
我已经try 直接在InputBar组件中设置和更新当前消息状态(完全忽略了Redux架构),并且"修复"了这个问题,但是如果可能的话,我希望继续使用Redux设计模式.
我的问题是:
如果父组件已更新,React是否始终更新该组件中的所有直接子组件?
正确的方法是什么?