1

现在我有这样的树组件

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

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

像这样将 props 从父级传递给嵌套子级的最佳实践是什么？

非常感谢

4

3 回答 3

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 并且在初始加载后从不更新，但我会避免这种情况，因为它违背了反应的目的。

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

于 2018-12-17T18:39:16.007 回答
0

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

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

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

于 2018-12-17T18:07:50.470 回答
0

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

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

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

于 2018-12-17T18:03:40.870 回答