我不明白 useCallback

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 用于记忆功能，useEffect 用于防止不必要的重新渲染。我认为在这种情况下您想要使用 useEffect Hook？

Answer 2

这是因为您编写了依赖于 isFiltered 的回调，因此每次单击时它都会发生变化。当它不依赖于回调正在改变的状态时效果最好。

要创建一个不会不断变化的切换函数，请让它使用一个函数调用 setState，以便它可以从先前的状态计算出新的状态，利用 useState 提供的功能状态更新：

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

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

If the new state is computed using the previous state, you can pass a function to setState. The function will receive the previous value, and return an updated value.

我不明白 useCallback

I don't understand useCallback

reactjs

usecallback