我已经使用初始化了一个react应用程序npx create-react-app：
import React from 'react';
class Expensive {
constructor() {
console.log('constructing expensive class');
}
}
function App() {
const expensiveRef = React.useRef(new Expensive());
return (
<div className="App">
app
</div>
);
}
export default App;
但是，我看到它constructing expensive class两次打印到控制台。为什么是这样？
如果我更换，也会得到相同的结果
const expensiveRef = React.useRef(new Expensive());
与
const [expensiveState, setExpensiveState] = React.useState(new Expensive());
每个代码都在每个渲染器上执行，这就是为什么多次记录的原因，即使useState也会记住第一个实例。
如果您只希望初始化一次，请使用该useState版本，如下所示
const [expensiveState, setExpensiveState] = React.useState(() => new Expensive());
因此，您传递函数而不是对象初始化
参见https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句