如何停止重新渲染复选框的反应？

Question

我有一个简单的list，它是在add按钮单击时动态添加的。在我的列表中还存在一个checkbox。因此，当我切换复选框时，我遇到了一个问题，我的整个列表都重新渲染了吗？

举个例子，当我切换A复选框时，我在列表中添加了B，C，D，D，它应该仅渲染{{1 }}项目当前会渲染整个列表，为什么？

这是我的代码 https://codesandbox.io/s/stupefied-wildflower-gv9be

D

Answer 1

每次items发生更改（无论是通过添加新项目还是检查值），您都是在onCheckedHandler中创建新的App。这会向下传播到您的Item组件。由于先前的onCheckedHandler属性在引用上并不等同于先前的属性，因此它将呈现（并且您会看到每个项目的控制台日志）。单独记住该组件无济于事，因为传递给它的属性每次都在更改。

要解决此问题，您需要记住onCheckedHandler，请尝试以下操作：

const onCheckedHandler = useCallback((e, selectedText) => {
  const target = e.target
  setItems(items => {
    const i = items.findIndex(i => i.text === selectedText);
    let obj = items[i];
    obj.checked = target.checked;
    return [...items.slice(0, i), obj, ...items.slice(i + 1)];
  })
}, [setItems])

您可以用Item包装React.memo组件，它应该可以正常工作。您还需要以导入useCallback的相同方式导入useState