反应：父组件重新渲染所有子组件，即使状态更改未改变的子组件也是如此

  • Z时代
  • 2024-01-10
  • 分类：问答

我还没有找到明确的答案，希望这不是重复的。

我正在使用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会始终更新该组件中的所有直接子组件吗？

号作出反应只会重新渲染，如果一个组件shouldComponentUpdate()的回报true。默认情况下，该方法总是返回true以避免为新手带来任何细微的错误（并且正如William

B所指出的那样，除非有所更改，否则DOM不会真正更新，从而降低了影响）。

为了防止子组件不必要地重新呈现，您需要以shouldComponentUpdate仅true在数据实际更改后才返回的方式实现该方法。如果this.props.messages总是相同的数组，则可以像这样简单：

shouldComponentUpdate(nextProps) {
    return (this.props.messages !== nextProps.messages);
}

您可能还需要进行某种深度比较或消息ID之类的比较，这取决于您的要求。

以上是 反应：父组件重新渲染所有子组件，即使状态更改未改变的子组件也是如此 的全部内容， 来源链接： utcz.com/qa/426024.html

回到顶部