reactjs - react : How to prevent re-rendering child components in `map` ?

Question

我试图将问题归结为一个尽可能简单的例子:

我们有一个子组件列表，每个子组件都称为 NumChoice ，每个代表一个数字。 NumChoice包裹在 React.memo .在父组件中，我们有一个 bool 数组，choices ，每个对应一个子组件 NumChoice .首先，choices的所有元素是 false .为了渲染子组件，我们遍历 choices ，并为每个选择生成对应的子组件 NumChoice .我们定义了一个函数 chooseDivisibles在父组件中，使用 useCallback从每个子组件调用 NumChoice . chooseDivisibles取 NumChoice 的索引谁调用它并更改了choices 的相应元素至 true .每个NumChoice如果其在 choices 中的对应元素具有“红色”背景色是 true ，否则，其背景颜色为“白色”。

完整代码可在以下位置获得:
https://codesandbox.io/s/react-rerender-l4e3c?fontsize=14&hidenavigation=1&theme=dark

包装NumChoice在 React.memo和 chooseDivisibles在 useCallback ，我们预计只会重新渲染 NumChoice choices对应元素的组件更改但 React 重新渲染它们。 chooseDivisibles包裹在 useCallback , 除了 setChoices 没有列出任何依赖项.另外，NumChoice包裹在 React.memo并且它应该只在指定的 Prop 改变时重新渲染，但它们不会改变，并且改变 choices不应该对重新渲染产生任何影响 NumChoice .如果我们排除检查 chooseDivisibles 的相等性在上一个和下一个 Prop 中，它按预期工作，但我认为上一个和下一个的比较 chooseDivisibles不应该影响重新渲染 NumChoice因为它被包裹在 useCallback并且不依赖于 choices .我们如何防止重新渲染 NumChoice组件的props是不是变了？

Answer 1

啊，我在 NumChoice.js 中看到了我们也在断言 prevProps.chooseDivisibles === nextProps.chooseDivisibles ，始终是 false , 自 chooseDivisibles={event => chooseDivisibles(idx)}每次生成一个新函数

如果删除 prevProps.chooseDivisibles === nextProps.chooseDivisibles ，它只会重新渲染受影响的!