React 避免所有子重新渲染

Question

所以我有一个有几个孩子的主组件，我用下面的例子简化了它

const Master = ({ c1props, c2props }) => {
const [count, setCount] = useState(0)
return <div>
<div>{count}</div>
<Child {...c1props}/>
<Child {...c2props}/>
</div>
}

所以这里的问题是，当我只更新状态"count"时，组件正在重新渲染，这是一个问题，因为它们非常重。 我正在考虑在 Child 中使用 useMemo(( 作为避免那些不必要的重新渲染的一种方式，但如果这是最好的主意，我就不知道。 知道如何解决这个问题吗？

谢谢

Answer 1

const MemoizedChild1 = React.memo(Child1, isEqual);
const MemoizedChild2 = React.memo(Child2, isEqual);

然后你像这样使用它：

const Master = ({ c1props, c2props }) => {
const [count, setCount] = useState(0)
return <div>
<div>{count}</div>
<MemoizedChild1 {...c1props}/>
<MemoizedChild2 {...c2props}/>
</div>
}

其中 isEqual 是一个 lodash 函数，用于深入测试道具的相等性。

通常，您可以使用这样的备忘录：

function MyComponent(props) {
/* render using props */
}
function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
}
export default React.memo(MyComponent, areEqual);

阅读有关文档的更多信息。

useMemo 是一个记忆值的钩子，Memo 可以让您控制何时渲染组件。

Answer 2

如果你想避免使用备忘录，你可以考虑拆分你的Master，并创建另一个包含count状态的Counter组件：

const Master = ({ c1props, c2props }) => (
<div>
<Counter />
<Child {...c1props}/>
<Child {...c2props}/>
</div>
)