React:父组件重新渲染所有子组件，即使是那些在状态改变时没有改变的子组件 [英] React: Parent component re-renders all children, even those that haven't changed on state change

问题描述

我一直没能找到明确的答案，希望不要重复.

I haven't been able to find a clear answer to this, hope this isn't repetitive.

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

I am using React + Redux for a simple chat app. The app is comprised of an InputBar, MessageList, and Container component. The Container (as you might imagine) wraps the other two components and is connected to the store. The state of my messages, as well as current message (the message the user is currently typing) is held in the Redux store. Simplified structure:

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>
    );
  }
}

);}}

The issue I'm having occurs when updating the current message. Updating the current message triggers an action that updates the store, which updates the props passing through container and back to the InputBar component.

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

This works, however a side effect is that my MessageList component is getting re-rendered every time this happens. MessageList does not receive the current message and doesn't have any reason to update. This is a big issue because once the MessageList becomes big, the app becomes noticeably slower every time current message updates.

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

I've tried setting and updating the current message state directly within the InputBar component (so completely ignoring the Redux architecture) and that "fixes" the problem, however I would like to stick with Redux design pattern if possible.

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

我的问题是:

My questions are:

• 如果更新了父组件，React 是否总是更新该组件内的所有直接子组件?

• If a parent component is updated, does React always update all the direct children within that component?

这里的正确方法是什么?

What is the right approach here?

推荐答案

如果父组件被更新，React 是否总是更新该组件内的所有直接子组件?

If a parent component is updated, does React always update all the direct children within that component?

没有.如果 shouldComponentUpdate() 返回 true，React 只会重新渲染组件.默认情况下，该方法总是返回 true 以避免对新手造成任何细微的错误(正如 William B 指出的那样，DOM 不会实际更新，除非发生某些变化，从而降低影响).

No. React will only re-render a component if shouldComponentUpdate() returns true. By default, that method always returns true to avoid any subtle bugs for newcomers (and as William B pointed out, the DOM won't actually update unless something changed, lowering the impact).

为了防止您的子组件不必要地重新渲染，您需要以这样一种方式实现 shouldComponentUpdate 方法，它只在数据实际发生时才返回 true改变了.如果 this.props.messages 总是同一个数组，它可以像这样简单:

To prevent your sub-component from re-rendering unnecessarily, you need to implement the shouldComponentUpdate method in such a way that it only returns true when the data has actually changed. If this.props.messages is always the same array, it could be as simple as this:

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

您可能还想对消息 ID 进行某种深度比较或比较，这取决于您的要求.

You may also want to do some sort of deep comparison or comparison of the message IDs or something, it depends on your requirements.

这篇关于React:父组件重新渲染所有子组件，即使是那些在状态改变时没有改变的子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！