React.StrictMode嚴格模式導致的重復渲染

在學習用TypeScript寫react應用時，發現組件重復渲染。開始以為是TS的原因，經過排查發現是因為React.StrictMode導致。

不過不用擔心重復渲染問題，該模式只在開發模式下生效。詳情查看官方文檔

StrictMode作用：

• 識別不安全的生命周期
• 關於使用過時字符串 ref API 的警告
• 關於使用廢棄的 findDOMNode 方法的警告
• 檢測意外的副作用
• 檢測過時的 context API

 

我是在使用hooks中的useState時導致重復渲染代碼如下：

//APP.tsx

import React, { useState } from 'react';
import './App.css';

function App() {

  const [todoList, setTodoList] = useState([]);

  
  console.log('todoList');

  return (
    <div className="App">
          todolist
    </div>
  );
}


export default App;




//index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <App />,
    </React.StrictMode>,
    document.getElementById('root')
);