為什么 create-react-app 初始化兩次？

Question

我已經使用npx create-react-app初始化了一個反應應用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());

Answer 1

每個代碼都會在每次渲染時執行，這就是為什么它會被多次記錄，甚至 useState 也會記住第一個實例。

如果您希望它只初始化一次，請使用像這樣的 useState 版本

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

所以你傳遞函數而不是對象初始化

見https://reactjs.org/docs/hooks-reference.html#lazy-initial-state