在 React 18 中，严格模式（StrictMode）会导致组件在开发模式下执行两次。这是为了帮助开发者检测潜在的问题和副作用。
严格模式的作用
严格模式是一个用于突出显示应用程序中潜在问题的工具。它不会渲染任何可见的 UI，而是为其后代元素触发额外的检查和警告
严格模式的主要作用包括：
检测不安全的生命周期方法：例如，使用过时的字符串 ref API 和 findDOMNode 方法。
检测意外的副作用：例如，useEffect 的副作用。
检测过时的 context API。
为什么会执行两次
在严格模式下，React 会故意调用组件的函数两次，以帮助开发者发现副作用
例如，对于函数组件，React 会调用 useState、useMemo 或 useReducer 两次，以确保这些函数是纯函数
import React, { useState, useEffect } from 'react';function Count() {const [counter, setCounter] = useState(0);useEffect(() => {console.log("effect");setTimeout(() => {setCounter(counter + 1);}, 3000);}, [counter]);console.log("before render");return (<div className="container"><div className="el">{counter}</div></div>);
}export default Count;
在上述代码中，before render 和 effect 会在初次渲染时打印两次，这是因为严格模式会多执行一次，以确保组件是纯函数。
如何解决
仅在开发者模式下运行，不影响生产构建
如果不希望组件在开发模式下执行两次，可以暂时关闭严格模式, 删除React.StrictMode。但这样做会失去一些重要的调试帮助
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';ReactDOM.render(<App />,document.getElementById('root')
);
总结来说，React 严格模式在开发模式下会重复调用组件，以帮助开发者检测潜在的问题和副作用。这虽然会导致组件执行两次，但有助于确保代码的纯度和安全性
