我还没有找到一个明确的答案，希望这不是重复的。
我使用React Redux的一个简单的聊天应用程序。该应用程序由InputBar、MessageList和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组件的道具。
这是有效的，但是副作用是每次发生这种情况时，我的MessageList组件都会重新渲染。MessageList不接收当前消息，也没有任何更新的理由。这是一个大问题，因为一旦MessageList变大，每次更新当前消息时，应用程序都会明显变慢。
我尝试过直接在InputBar组件中设置和更新当前消息状态（所以完全忽略了Redux架构），这“修复”了这个问题，但是如果可能的话，我希望坚持使用Redux设计模式。
我的问题是：
>
这里的正确方法是什么？
如果父组件被更新，React是否总是更新该组件中的所有直接子组件？
没有。React将只重新呈现一个组件，如果应该ComponentUpdate（）返回true。默认情况下，该方法总是返回true，以避免新来者遇到任何微妙的错误（正如William B所指出的，除非发生了变化，否则DOM实际上不会更新，从而降低了影响）。
为了防止子组件不必要地重新渲染，您需要实现shouldComponentUpdate方法，使其仅在数据实际更改时返回true。如果。道具。messages始终是同一个数组，它可以简单如下：
shouldComponentUpdate(nextProps) {
return (this.props.messages !== nextProps.messages);
}
您可能还想对消息ID或其他东西进行某种深度比较，这取决于您的需求。
编辑：几年后，许多人开始使用功能组件。如果你是这样的话，那么你会想看看React。备忘录默认情况下，功能组件每次都将重新渲染，就像类组件的默认行为一样。要修改该行为，可以使用React。memo（）并可选地提供一个areEqual（）函数。
如果父组件被更新，React是否总是更新该组件中的所有直接子组件？-
什么是正确的方法？-
>
使用纯组件-
使用反应备忘录-
希望有帮助！
如果父组件道具已更改，它将重新渲染使用React生成的所有子组件。组件语句。
尝试制作您的
根据React文档：在将来，React可能会将shouldComponentUpdate（）视为一个提示，而不是一个严格的指令，返回false仍可能导致组件的重新呈现查看此链接以了解更多信息
希望这能帮助那些正在寻找正确解决方法的人。
