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

原文：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 文件里增加这个选项：

代码语言：javascript复制

reactStrictMode: false

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

比如从这样：

代码语言：javascript复制

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

改为：

代码语言：javascript复制

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

javascript react

0 人点赞