1

我需要更改复选框的选中状态，但 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>
  );
};

重新渲染的数量：

重新渲染的数量

4

2 回答 2

1

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

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

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

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

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

于 2021-02-09T20:53:26.643 回答
0

setCallback 用于记忆函数，因此如果您有需要大量处理的繁重函数，则不必两次处理相同的输入。例如，如果您有一个将两个数字相加并给它 4 和 3 的函数，那么它会运行该函数并记住当您在函数中输入 4 和 3 时结果是 7。所以下一次它被传递 4 和 3处理结果时，它使用记忆的结果。

useCallBack 用于记忆函数，而 useEffect 用于防止不必要的重新渲染。我认为在这种情况下您想使用 useEffect Hook？

于 2021-02-09T20:50:59.333 回答