React：在兄弟姐妹之间传递数据而不会导致重新渲染

Question

我有以下问题：我有一个应用程序 (A) 和很多孩子（B、C 等）。现在我想将一个值从 B 传递到 C，但不重新渲染整个应用程序。这怎么可能？A (Parent)     |---- B (Child)     |---- C (Child)     |---- D (Child)     |---- E (Child)     |---- F (Child)我尝试使用useContext或 一个简单的回调，但在每种情况下状态都保持在A，通过更改使我的整个应用程序重新呈现。关于如何以正确的方式制作 ii 的任何想法？

Answer 1

您可以使用

应该组件更新

以避免这种情况。它适用于道具和状态。

shouldComponentUpdate(nextProps, nextState) {
     return this.props.somevalue != nextProps.somevalue;
}

检查是否有任何新的道具传递给孩子。如果不是，则组件不会重新渲染。但是要避免使用太多的孩子，并想出一个更好的设计结构。

编辑：

您可以使用

纯组件

因为它默认实现了 shouldComponentUpdate。如文档中所述：

React.PureComponent 类似于 React.Component。它们之间的区别在于 React.Component 没有实现 shouldComponentUpdate()，但是 React.PureComponent 通过浅层 prop 和状态比较来实现它。

如果您的 React 组件的 render() 函数在给定相同的道具和状态的情况下呈现相同的结果，则在某些情况下您可以使用 React.PureComponent 来提高性能。

Answer 2

React 中的默认行为是在每次状态更改时重新渲染，在绝大多数情况下，您应该依赖默认行为。但是当你想在状态改变时阻止组件的重新渲染并且状态的一些值作为道具传递给子组件时你可以利用shouldComponentUpdate

shouldComponentUpdate() 在接收到新的道具或状态时在渲染之前被调用。默认为真。初始渲染或使用 forceUpdate() 时不会调用此方法。

在这里学习更多

要阻止重新渲染，您应该在中执行检查shouldComponentUpdate以确保以前的道具和当前道具不相同。如果它们相同。您通过返回阻止重新渲染false，如果它们不同，您返回true将触发重新渲染。

或者你可以使用备忘录

Answer 3

您可以使用React.memo(component) 这是从异常渲染中保存您的组件。阅读这个https://reactjs.org/docs/hooks-reference.html#usememo