Question

现在我具有这样的树组件

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

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

如何将道具从父母这样传递给嵌套孩子的最佳实践？

非常感谢

Answer 1

这是使用React的context api的一个好方案，因为这似乎是一个prop钻探案例-您正在将数据传递给不使用它的组件。您可以将UserOrderApproval（假设它是连接到全局状态/ redux的父级）作为上下文提供者，并将ComponentList用作使用者。这样，只有处理/使用数据的组件才会重新呈现。

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

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

Answer 2

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

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

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

Answer 3

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

在将新的道具或状态传递给组件时，会随时调用

shouldComponentUpdate，并且默认情况下返回true（可能仅对更新的道具返回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，并且在初始加载后再也不会更新，但是我避免这样做，因为它违反了react的目的。

edit：正如varoons所说，这对于您使用新的上下文API可能是一个很好的方案，我强烈建议您对其进行研究，但是了解组件生命周期方法也很有用。

当状态/属性父组件更改时，如何防止子组件重新渲染？

3 个答案: