React 18 useEffect执行了两次

Others

发布于 2022-08-18 19:38:22 1506 次浏览

useEffect 在以下两种情况下会执行两次。

仅在开发模式下：这是每个人本地开发时构建应用的模式。

在严格模式下：这个是在使用 create-react-app 或者 Next.js 构建应用时的默认模式。

阻止 useEffect 执行两次的方法只有一个，那就是关闭严格模式

在 Next.js 中

你可以在 next.config.js 配置文件中关闭严格模式：

reactStrictMode: false

在 create-react-app 中

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

<p>
	<br />
</p>
<p>
	修改为
</p>

import React from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
  <App />
);
作者：酱豆腐精