我刚刚启动了一个新的 create-react-app 项目,并注意到 React 渲染组件两次!我的反应版本在包.json is "react": "^16.13.1"
import React, { useRef } from "react";
const App = () => {
const renders = useRef(0);
console.log("renders: ", renders.current++);
return (
<div>
Hello
</div>
);
};
这会在第一次渲染时产生:
renders: 0
renders: 0
现在,如果我添加一个按钮来增加状态,每个状态更改还会产生两个额外的渲染:
import React, { useRef } from "react";
const App = () => {
const [count, setCount] = useState(0);
const renders = useRef(0);
console.log("renders: ", renders.current++);
return (
<div>
<button onClick={() => setCount(count + 1)}>increment</button>
<div>count: {count}</div>
</div>
);
};
这将导致:
//--- initial render
renders: 0
renders: 0
//--- first click
renders: 1
renders: 2
//--- second click
renders: 3
renders: 4
//--- third click
renders: 5
renders: 6
这是正常现象还是最新版本的 React 中的错误?
好吧,看来我找到了原因。检查后index.js
我发现了以下内容:
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
看起来 create-react-app 现在包括React.StrictMode
它在开发模式(而不是生产模式)下双重调用某些方法。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)