[譯] 為何 React 18 中 useEffect 會(huì)運(yùn)行兩次?

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

在 2022 年 3 月發(fā)布的 React 18 的發(fā)布公告中，數(shù)量可觀的新特性撲面而來(lái)。而對(duì) useEffect() 的默認(rèn)行為的改變，可能就此被淹沒了。

如果你的應(yīng)用在更新到 React 18 之后行為迥異，或許正是因?yàn)?useEffect() 默認(rèn)變?yōu)楸贿\(yùn)行 2 次了。

雖然這種情況只發(fā)生在 development mode 中，但無(wú)疑每位開發(fā)者都會(huì)遇到。

另一個(gè)限制條件是 只在 strict mode 發(fā)生，但這同樣是用 create-react-app 或 Next.js 所構(gòu)建應(yīng)用的默認(rèn)選項(xiàng)。

事情就是這么個(gè)事情，所以不用緊張是不是代碼出了什么問題 -- React 的現(xiàn)狀如此。

唯一避免這種行為的方法就是 禁用 strict mode；鑒于嚴(yán)格模式的重要性，這畢竟是個(gè)你能修復(fù)這種改變引入的任何問題之前臨時(shí)的變通之策。

在 Next.js 中，可以在 next.config.js 文件里增加這個(gè)選項(xiàng)：

reactStrictMode:?false

在 create-react-app 創(chuàng)建的應(yīng)用里，可以把 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?/>
);