[译] 为何 React 18 中 useEffect 会运行两次?

最新推荐文章于 2025-10-17 10:22:04 发布

原创最新推荐文章于 2025-10-17 10:22:04 发布 · 5.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react #python #java #vue #js

React18发布后，useEffect在开发模式下默认可能会运行两次，仅限于strict mode。这可能导致应用行为变化，但只影响开发环境。为解决此问题，可以暂时禁用strict mode，如在Next.js中设置reactStrictMode: false，或者在create-react-app应用中移除StrictMode组件。这是一个临时解决方案，开发者应修复任何由此产生的问题。

原文：https://flaviocopes.com/react-useeffect-two-times/

在 2022 年 3 月发布的 React 18 的发布公告中，数量可观的新特性扑面而来。而对 useEffect() 的默认行为的改变，可能就此被淹没了。

如果你的应用在更新到 React 18 之后行为迥异，或许正是因为 useEffect() 默认变为被运行 2 次了。

虽然这种情况只发生在 development mode 中，但无疑每位开发者都会遇到。

另一个限制条件是 只在 strict mode 发生，但这同样是用 create-react-app 或 Next.js 所构建应用的默认选项。

事情就是这么个事情，所以不用紧张是不是代码出了什么问题 -- React 的现状如此。

唯一避免这种行为的方法就是 禁用 strict mode；鉴于严格模式的重要性，这毕竟是个你能修复这种改变引入的任何问题之前临时的变通之策。

在 Next.js 中，可以在 next.config.js 文件里增加这个选项：

reactStrictMode: false

在 create-react-app 创建的应用里，可以把 index.js 文件里的 StrictMode 高阶组件去除：

比如从这样：

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>
);

改为：

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 />
);