javascript - useMemo与useEffect + useState

使用useMemo(例如用于密集函数调用)而不是结合使用useEffect和useState有什么好处吗？
除了useMemo的返回值是第一次渲染时的null之外，这还有两个乍一看完全相同的自定义钩子(Hook):
https://codesandbox.io/s/nkxolxwzkj
useEffect和useState

import { expensiveCalculation } from "foo";

const useCalculate = someNumber => {
    const [result, setResult] = useState<number>(null);

    useEffect(() => {
        setResult(expensiveCalculation(someNumber));
    }, [someNumber]);

    return result;
};

useMemo

import { expensiveCalculation } from "foo";

const useCalculateWithMemo = someNumber => {
    return useMemo(() => {
        return expensiveCalculation(someNumber);
    }, [someNumber]);
};

两者都在每次参数someNumber更改时都计算结果，useMemo的提示在哪里？

最佳答案

useEffect和setState会在每次更改时导致额外的渲染:第一个渲染将“过时”与陈旧的数据“滞后”，然后它将立即将其他渲染与新数据排队。

假设我们有:

function expensiveCalculation(x) { return x + 1; }; // Maybe I'm running this on a literal potato

假设someNumber最初为0:

useMemo版本立即呈现1。

useEffect版本渲染null，然后在组件渲染效果运行之后，更改状态，并使用1将新的渲染排队。

然后，如果我们将someNumber更改为2:

运行useMemo并呈现3。

useEffect版本将运行，并再次渲染1，然后触发效果，并且组件将使用3的正确值重新运行。

就expensiveCalculation运行的频率而言，两者具有相同的行为，但是useEffect版本导致的渲染量是原来的两倍，这由于其他原因而对性能不利。
另外，IMOt的useMemo版本更加简洁易读。它不会引入不必要的可变状态，并且运动部件更少。
因此，最好只在此处使用useMemo。