reactjs - 在 useState 中使用对象作为状态时防止重新渲染

Question

背景：

我正在渲染可折叠元素的动态列表。折叠的打开/关闭状态存储在一个对象中

 cosnt [collapse, setCollapse] = useState({a: false, b: false, c: false })

并且此状态通过 onClick 切换

const toggle = (id) => setCollapse({...collapse, [id]: !collapse[id]})

折叠工作，但每次切换都会重新渲染所有折叠元素，因为根据我的理解，每个切换都会创建一个新对象，这会导致所有折叠元素的重新渲染。我只想重新渲染切换的折叠。

问题：

如何在不导致其他折叠元素重新呈现的情况下进行切换？

例子

在控制台中可以看到，单击一下会导致所有折叠元素都被重新渲染。

标签： reactjsreact-hooks

Answer 1

有两种方法可以防止重新渲染：

React.memo():用于功能 组件

React.memo(<Component />)

这保证了它仅在道具更改时才重新渲染。这相当于一个纯组件。

---

React.PureComponent():对于类组件 与上面相同。

类组件的另一种普通方法是控制在shouldComponentUpdate这种情况下不应依赖的组件。

在您的情况下，使用包装React.memo以避免重新渲染。