React渲染执行两次

在 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 严格模式在开发模式下会重复调用组件，以帮助开发者检测潜在的问题和副作用。这虽然会导致组件执行两次，但有助于确保代码的纯度和安全性