当状态/道具父组件发生变化时，如何防止子组件重新渲染？答案

【问题标题】：how to prevent children component re render, when state/props parent component changing?当状态/道具父组件发生变化时，如何防止子组件重新渲染？
【发布时间】：2018-12-17 17:01:56
【问题描述】：

现在我有这样的树组件

<UserOrderApproval>
  <Table>
    <TableRow> 
      <ComponentList />
    </ChildrenProps1>
  </Parent>
</UserOrderApproval>

我从 UserOrderApproval 组件中的 redux 获取道具，并将该道具传递给每个子组件。问题是，当子组件在 redux 中进行一些更改时，来自 UserOrderApproval 组件的状态将发生变化并使所有子组件重新渲染并使组件生命周期再次运行。如何防止这种情况发生？

如何将 props 从父级传递给嵌套子级的最佳实践？

非常感谢

【问题讨论】：

shouldComponentUpdate() ?阅读更多：reactjs.org/docs/react-component.html#shouldcomponentupdate

标签： javascript reactjs redux react-redux react-lifecycle

【解决方案1】：

正如 KuchBhi 所说，您需要使用 shouldComponentUpdate 生命周期方法。

shouldComponentUpdate 在新的 props 或 state 传递给组件时调用，默认返回 true（可能只为更新的 props 返回 true，而不是 100% 确定）。该方法接受两个参数：nextProps 和 nextState。然后，您可以将它们与 this.props 和 this.state 进行比较，以决定是否应该更新。

此方法的默认/典型实现类似于以下内容（伪）：

shouldComponentUpdate(nextProps, nextState) {
  //Really it's a deeper equality check, not just the props/state object
  return this.props !== nextProps || this.state !== nextState;
}

您可以做的替代方法是在返回 false 的情况下进一步构建它。这是我的一个项目中的一个示例，我只想在两个特定道具不同时重新渲染：

shouldComponentUpdate(nextProps) {
  const minUpdated = this.props.min !== nextProps.min;
  const maxUpdated = this.props.max !== nextProps.max;
  return minUpdated || maxUpdated;
}

该组件还具有缩放、对齐、宽度等道具，但我不想在收到新道具时进行更新，所以我不会检查它们是否不相等。

您基本上可以在此方法中返回 false 并且在初始加载后从不更新，但我会避免这样做，因为它违背了反应的目的。

edit：正如 varoons 所说，这可能是您使用新上下文 API 的绝佳场景，我强烈建议您研究一下，但了解组件生命周期方法也很有用。

【讨论】：

【解决方案2】：

使用shouldComponentUpdate()，纯组件，或者只将redux连接到需要它们的子组件。

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

https://reactjs.org/docs/react-api.html#reactpurecomponent

【讨论】：

应该只为根组件或子组件更新组件吗？谁是更好的传递方法来改变父母的状态/道具，或者孩子有自己的方法来做到这一点？谢谢

【解决方案3】：

这是使用 React 的上下文 api 的好场景，因为这看起来像是一个道具钻探案例 - 您正在将数据向下传递给不使用它的组件。您可以使 UserOrderApproval（假设它是连接到全局状态/redux 的父级）上下文提供者和 ComponentList 消费者。这样，只有处理/使用数据的组件才会重新渲染。

https://reactjs.org/docs/context.html

https://scotch.io/tutorials/get-to-know-reacts-new-context-api

【讨论】：