因此,在过去一年与 react 合作后,我设法了解了它的功能和注意事项,以及如何避免不必要的渲染。
昨天我在玩一些代码,遇到了一个我以前没有看到的问题,有点困惑。
import React, { useCallback, useState } from "react";
let renders = 0;
const Counter = () => {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount((c) => c + 1);
}, []);
renders = renders + 1;
console.log("Counter Render");
return (
<div>
<button onClick={increment}>increment</button>
<h2>renders: {renders}</h2>
<h4>Count: {count}</h4>
</div>
);
};
export default React.memo(Counter);
在上面的代码中,我添加了一个简单的计数器,每次点击我都会设置一个新状态,这会导致重新渲染,在屏幕上显示“Count: 1”,在开发工具中显示一个“Counter Render”日志 -就像我预期的那样。
奇怪的部分来自 renders 变量,我用数字 0(在组件外,offcourse )开始并在组件的每次渲染时递增。 我希望这里的值也将是 1,但事实并非如此,每次我单击按钮时,“渲染”的值都会增加 2,即使“计数器渲染”日志每次都显示一次。
谁能解释一下我在这里遗漏了什么?
答案 0 :(得分:2)
您正在React's Strict Mode (since your app is wrapped in <StrictMode>
)跑步。
严格模式可能会多次渲染组件,以确保您不会做诸如依赖渲染计数之类的顽皮事情——而您现在正是这样做的。 ;-)