时间戳

首页 > 解决方案 > React 备忘录神奇地执行了两次

reactjs - React 备忘录神奇地执行了两次

问题描述

我正在创建一个反应应用程序useMemo。
备忘录使用空数组作为依赖列表，所以应该执行一次吧？

在备忘录中，有console.log()&counter++来可视化备忘录执行的次数。

神奇的是，我得到了一个日志，但计数器似乎执行了两次。

查看此沙箱或查看以下代码：

import {
    useMemo,
}                           from 'react'


let counter = 0;
export default function App() {
    const foo = useMemo(() => {
        console.log('increase counter');

        counter++;
    }, []);


    return (
        <p>
            {counter}
        </p>
    );
}

在此处输入图像描述

标签： reactjsreact-hooks

解决方案

看起来你使用不正确useMemo

AuseMemo()仅在其依赖数组中的某些内容发生更改时才计算某些内容。看起来你没有给依赖数组任何变量。

请查看以下示例useMemo：

export default function App() {
const [loading, setLoading] = useState(true);
const component = useMemo(() => {
    if(loading){
  return <div>Loading...</div>
} else {
  return <div>Finished Loading</div>
}, [loading]);


return (
    <div>
        {component}
    </div>
);
}

正如你从这个例子中看到的，当状态改变时，useMemo 被计算出来。

在您上面的示例中，我想 useMemo 被计算两次，因为它在每次页面呈现时发生。

对于您的反例，我建议仅使用 useState。

 export default function App() {
const [counter, setCounter] = useState(0);

return (
    <div>
        <p>{counter}</p>
        <button onClick={() => setCounter(prevState => prevState++)}>Increase Counter</button>
    </div>
);
}

推荐阅读