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