React：父组件重新渲染所有子组件，即使是那些在状态改变时没有改变的子组件

IT技术 reactjs redux
2021-04-09 02:37:20

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

我正在使用 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 是否总是更新该组件内的所有直接子组件？

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

4个回答

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

不。React 只会在shouldComponentUpdate()返回时重新渲染组件true。默认情况下，该方法总是返回true以避免新人出现任何细微的错误（正如威廉 B 指出的那样，除非发生某些变化，否则 DOM 不会实际更新，从而降低影响）。

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

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

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

编辑：几年后，很多人都在使用功能组件。如果您是这种情况，那么您需要查看React.memo。默认情况下，功能组件每次都会重新渲染，就像类组件的默认行为一样。要修改该行为，您可以使用React.memo()并可选择提供一个areEqual()函数。

如果您直接从React.Component（而不是React.PureComponent或类似的东西）继承，那么是的，它总是会重新渲染。
2021-06-10 02:37:20
完美，正是我要找的答案！
2021-06-13 02:37:20
我不确定你是什么意思。什么不更新componentDidMount？
2021-06-14 02:37:20
因此，如果您不实施shouldComponentUpdate，父母是否总是会重新渲染所有的孩子？
2021-06-17 02:37:20
虽然这有效，但我发现它不会在 componentDidMount 上更新。知道解决这个问题的方法是什么吗？
2021-06-20 02:37:20

如果父组件被更新，React 是否总是更新该组件内的所有直接子组件？ -> 是的，默认情况下，如果 parent 更改其所有直接子项都会重新渲染，但重新渲染不一定会更改实际的 DOM，这就是 React 的工作原理，只有可见的更改才会更新为真实的 DOM。

这里的正确方法是什么？ -> 为了防止甚至重新渲染虚拟 DOM 以进一步提高您的性能，您可以遵循以下任何技术：

  1. Apply ShouldComponentUpdate Lifecycle 方法 - 仅当您的子组件基于类时才应用此方法，您需要使用 prev props 值检查当前 props 值，如果它们为真，则返回 false。

  2. 使用纯组件-> 这只是上述方法的一个较短版本，同样适用于基于类的组件

  3. 使用React memo -> 即使您有功能组件，这是防止重新渲染的最佳方法，您只需要使用 React.memo 包装您的组件导出，例如：export default React.memo(MessageList)

希望有帮助！

谢谢。我一直在尝试使用usememo，但没有用。我所要做的只是像你说的那样用 React.memo() 包装组件。
2021-06-19 02:37:20

如果父组件 props 已更改，它将重新渲染所有使用React.Component语句创建的子组件。

尝试让你的<MessageList>组件 aReact.PureComponent来逃避这一点。

根据 React 文档：In the future React may treat shouldComponentUpdate() as a hint rather than a strict directive, and returning false may still result in a re-rendering of the component.查看此链接以获取更多信息

希望这可以帮助任何正在寻找解决此问题的正确方法的人。

如果您map用于渲染子组件并在它们上使用唯一键（例如uuid()），则可能会切换回使用i来自地图的键作为键。它可能会解决重新渲染问题。

不确定这种方法，但有时它可以解决问题

其它你可能感兴趣的问题
上一篇react-router传递参数到组件 下一篇清除和重置表单输入字段