使用react为什么组件会执行两次？React.StrictMode是什么？是么时副作用函数？

在你的项目里有时你能发现你的组件会莫名其妙调用两次?

这是由于index.js里有<React.StrictMode>。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

你可能会说 <React.StrictMode>是什么?

这就是react的严格模式，他是专门未来检测副作用函数的，下面会大致粗疏地介绍什么时副作用函数
如果你看过官网就会发现这样介绍

参考react官网

什么时副作用函数与纯函数？

纯函数：根据react官方解释就是

只负责自己的任务。 它不会更改在该函数调用前就已存在的对象或变量。
输入相同，则输出相同。 给定相同的输入，组件应该总是返回相同的 JSX。

相反的就是副作用函数，比如你需要连续执行某几个函数个，因为他们时要连续改变全局一个变量才正确，但是由于特殊原因你只出发了部分的函数，那么全局数据就变成了脏数据，如果如其他库相互反应，那将是一件极为糟糕的事情！

什么时候会使用副作用函数？

• 函数式编程在很大程度上依赖于纯函数，但 某些事物 在特定情况下不得不发生改变。这是编程的要义！这些变动包括更新屏幕、启动动画、更改数据等，它们被称为 副作用。它们是 “额外” 发生的事情，与渲染过程无关。

• 在 React 中，副作用通常属于 事件处理程序。事件处理程序是 React 在你执行某些操作（如单击按钮）时运行的函数。即使事件处理程序是在你的组件 内部 定义的，它们也不会在渲染期间运行！ 因此事件处理程序无需是纯函数。

• 如果你用尽一切办法，仍无法为副作用找到合适的事件处理程序，你还可以调用组件中的 useEffect 方法将其附加到返回的 JSX 中。这会告诉 React 在渲染结束后执行它。然而，这种方法应该是你最后的手段。