我不明白你的意思

Question

我需要改变复选框检查状态，但useCallback重新呈现组件很多次。我不明白它是如何工作的。我读过很多关于它的材料。

const AppealsList = () => {
  const [isFiltered, setFiltered] = React.useState(false);
  console.log('rerender');

  const changeCheckBox = useCallback(() => {
    setFiltered(!isFiltered);
  }, [isFiltered]);

  return (
    <div className={classNames('appeals')}>
      <div className={classNames('appeals__filter')}>
        <input
          checked={isFiltered}
          className={classNames('appeals__input')}
          type="checkbox"
          readOnly={true}
        />
        <label
          onClick={changeCheckBox}
          className={classNames('appeals__filter-label')} />
      </div>
    </div>
  );
};

重新渲染的数量：

Answer 1

setCallback用于记忆函数，因此如果您有需要大量处理的繁重函数，您不必处理两次相同的输入。例如，如果你有一个加了两个数字的函数，你给它4和3，然后它运行这个函数，并记住当你在函数中输入4和3时，结果是7。因此，下次传递4和3而不是处理结果时，它使用记忆的结果。

当useCallBack用于记忆函数时，use效应用于防止不必要的重新呈现。我认为在这种情况下，你是想使用使用效果钩子？

Answer 2

这是因为您编写的回调依赖于isFiltered，因此每次单击时它都会更改。当它不依赖于回调正在更改的状态时，它工作得最好。

要创建不经常更改的切换函数，请让它使用函数调用setState，以便它可以利用useState提供的功能状态更新，从以前的状态计算新状态：

const changeCheckbox = useCallback(() => {
    setFiltered(currentValue => !currentValue);
}, []); // look no dependencies!

您可以在此处阅读有关功能状态更新（从当前状态派生新状态）的信息：https://reactjs.org/docs/hooks-reference.html#functional-更新

如果使用以前的状态计算新状态，则可以将函数传递给setState。该函数将接收前一个值，并返回更新后的值。