Question

我已经使用npx create-react-app初始化了一个React应用：

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());

Answer 1

每个代码都在每个渲染器上执行，因此多次记录，甚至useState也会记住第一个实例。

如果只希望将其初始化一次，请使用这种useState版本

const [expensiveState, setExpensiveState] = React.useState(() => new Expensive());

因此，您通过函数而不是对象初始化

请参阅https://reactjs.org/docs/hooks-reference.html#lazy-initial-state

为什么create-react-app初始化两次？

1 个答案: