React18的useEffect会执行两次

一、执行两次的useEffect。

前段时间在本地启了一个 React Demo 项目，在编码的过程中遇到一个很奇怪的“Bug”。
其中简化版的代码如下所示。

// 入口文件
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './Store'
import { Provider } from 'react-redux';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}> <App /></Provider> 
  </React.StrictMode>
); 

// 组件代码
import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    console.log('组件挂载完成！');
  }, []);
  return <>Hello world!</>;
};

然后发现在控制台中’组件挂载完成！'被打印了两次.
通过网上指引，同时去官网查了一下，终于得出答案。
这不是 Bug，这是 React18 新加的特性。

二、React18 useEffect 新特性

1.这是 React18 才新增的特性。
2.仅在开发模式("development")下，且使用了严格模式("Strict Mode")下会触发。
  生产环境("production")模式下和原来一样，仅执行一次。
3.之所以执行两次，是为了模拟立即卸载组件和重新挂载组件。
  为了帮助开发者提前发现重复挂载造成的 Bug 的代码。 
  同时，也是为了以后 React的新功能做铺垫。 
  未来会给 React 增加一个特性，允许 React 在保留状态的同时，能够做到仅仅对UI部分的添加和删除。
  让开发者能够提前习惯和适应，做到组件的卸载和重新挂载之后， 重复执行 useEffect的时候不会影响应用正常运行。

虽然生产环境就执行一次,但是开发的时候就很烦.
解决:
去除严格模式

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './Store'
import { Provider } from 'react-redux';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}> <App /></Provider>
);