我可以将 setState 内部函数传递给 useCallback 吗？

Question

我之所以想到这个问题，是因为我们从文档中了解到：

useCallback(fn, deps) 等价于 useMemo(() => fn, deps)。

useMemo 的文档说：

请记住，传递给 useMemo 的函数在渲染期间运行。 不要在那里做任何你在渲染时通常不会做的事情。 比如副作用属于useEffect，而不是useMemo。

我认为这也意味着我不能做setState。

现在，如果我们有这段代码：

const memoizedValue = useMemo(() => computeExpensiveValue(), []);

以上引用是否意味着我们不能在 computeExpensiveValue 或作为 useMemo 参数的内联函数中产生副作用？

因为如果这意味着我们不能在 computeExpensiveValue 中产生副作用，这意味着我们也不能在传递给 useCallback 的函数中产生副作用，因为该行与以下内容相同：

const memoizedValue = useCallback(computeExpensiveValue, []);

Answer 1

我知道您是如何到达那里的，但这是对文档的轻微误读。 （相当容易犯的错误。）

useMemo 文档所说的函数不是您的函数 (fn)，而是 useCallback“等效 useMemo”示例中的函数：

useMemo(() => fn, deps).
//      ^^^^^^^^

该函数不调用任何状态设置器，所以没问题。

在您通过useCallack 记忆的回调函数中调用状态设置器是完全正常且完全正常的。 （只要您在渲染期间不调用回调。） 当您这样做时，请务必：

• 在调用状态设置器时不使用任何状态变量：

  const fn = useCallback(() => {
       setSomething(someValueNotFromState);
  }, []);
  

  或
• 使用状态设置器的回调形式：

  const fn = useCallback(() => {
       setSomething(something => something + 1);
  }, []);
  

  或
• 将要在回调中使用的任何状态成员声明为依赖项：

  const fn = useCallback(() => {
       setSomething(something + 1); // I usually avoid this
  }, [something]);
  //  ^^^^^^^^^
  

更详细的示例/比较：

const [value, setValue] = useState(0);

const changeHandler1 = useCallback((event) => {
    // Absolutely fine to call `setValue` here
    setValue(event.currentTarget.value);
}, []);

// equivalent to:

const changeHandler2 = useMemo(() => {
    // NOT okay to call `setValue` here (the function we pass to `useMemo`)

    return (event) => {
        // Absolutely fine to call `setValue` here
        setValue(event.currentTarget.value);
    };
}, []);