Reactjs 如何在React中不重新提交列表中的每个项目？

我想创建过滤内容的组件列表。但我注意到，每次我改变一个过滤器的状态时，它都会重新发布整个列表，而buy it应该只重新发布

活动的
道具更改的项目

这里是一个问题的例子

我用这个包来理解为什么它会被重新招标，它说这是因为
onChangeFilter

如何优化渲染？为什么会发生这种情况？
我认为此更新不会影响性能，但如果您真的想：

用
备忘录包装过滤器
：

const Filter = memo(({ children, id, active, onChange }) => {

和onChangeFilter，使用
useCallback
和空数组作为第二个参数：

const onChangeFilter = useCallback(id => {
...
}, [])

这样，您每次都会重新创建onChangeFilter的引用