快捷導(dǎo)航

react的嚴(yán)格模式和解決react useEffect執(zhí)行兩次問題

更新時(shí)間：2025年01月24日 11:05:21 作者：滿腦子技術(shù)的前端工程師

文章總結(jié)：本文詳細(xì)探討了React中useEffect執(zhí)行兩次的問題,主要?dú)w因于React的嚴(yán)格模式,嚴(yán)格模式在開發(fā)模式下會(huì)故意重復(fù)調(diào)用一些生命周期方法,以幫助開發(fā)者發(fā)現(xiàn)潛在的問題,包括不安全的生命周期、過時(shí)的ref API、廢棄的findDOMNode方法、意外的副作用等

useEffect執(zhí)行兩次

這個(gè)問題，主要是剛接觸react的時(shí)候發(fā)的問題，當(dāng)時(shí)也沒總結(jié)。現(xiàn)在回過頭來再總結(jié)一次?。?！

能發(fā)現(xiàn)這個(gè)問題的，一定是一名細(xì)心并且有一顆求知的心。

因?yàn)槲耶?dāng)時(shí)接觸React的時(shí)候就是這樣的想法。為什么會(huì)觸發(fā)兩次？按照正常的聲明周期應(yīng)該執(zhí)行一次的?。。。?！

為什么useEffect執(zhí)行兩次

1.React的嚴(yán)格模式（模版創(chuàng)建項(xiàng)目）

npx create-react-app my-app 創(chuàng)建React項(xiàng)目
npx create-react-app my-app --template typescript 創(chuàng)建typeScript模版的React項(xiàng)目

2.React的嚴(yán)格模式（StrictMode包裹顯渲染組件）

root.render(
  //就是下面的代碼 React.StrictMode
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

3.React的嚴(yán)格模式作用

StrictMode 是一個(gè)用來突出顯示應(yīng)用程序中潛在問題的工具。StrictMode 不會(huì)渲染任何可見的 UI。StrictMode 為其后代元素觸發(fā)額外的檢查和警告。

??嚴(yán)格模式檢查僅在開發(fā)模式下運(yùn)行；它們不會(huì)影響生產(chǎn)構(gòu)建。 開發(fā)發(fā)揮作用、線上會(huì)自動(dòng)屏蔽【StrictMode】

作用1：識(shí)別不安全的生命周期

React開發(fā)中使用嚴(yán)格模式的作用主要是為了識(shí)別 Class組件中一些逐漸廢棄的組件生命周期，還有引用的第三方組件庫中的一些生命周期方法。

React中使用嚴(yán)格模式，一旦發(fā)現(xiàn)有風(fēng)險(xiǎn)的生命周期的使用就會(huì)在控制臺(tái)中提出警告

作用2：關(guān)于使用過時(shí)字符串 ref API 的警告

refs為字符串的危害??

如下圖：

作用3：關(guān)于使用廢棄的 findDOMNode 方法的警告

findDOMNode 也可用于 class組件，但它違反了抽象原則，它使得父組件需要單獨(dú)渲染子組件。

它會(huì)產(chǎn)生重構(gòu)危險(xiǎn)，你不能更改組件的實(shí)現(xiàn)細(xì)節(jié)，因?yàn)楦附M件可能正在訪問它的 DOM節(jié)點(diǎn)。

findDOMNode 只返回第一個(gè)子節(jié)點(diǎn)，但是使用 Fragments，組件可以渲染多個(gè) DOM 節(jié)點(diǎn)。findDOMNode是一個(gè)只讀一次的 API。

調(diào)用該方法只會(huì)返回第一次查詢的結(jié)果。如果子組件渲染了不同的節(jié)點(diǎn)，則無法跟蹤此更改。因此，findDOMNode僅在組件返回單個(gè)且不可變的 DOM 節(jié)點(diǎn)時(shí)才有效。

作用4：檢測意外的副作用（useEffect副作用）

1.React的工作階段

React 分兩個(gè)階段工作：
渲染階段: 會(huì)確定需要進(jìn)行哪些更改，比如 DOM。在此階段，React 調(diào)用 render，然后將結(jié)果與上次渲染的結(jié)果進(jìn)行比較。
提交階段: 發(fā)生在當(dāng) React 應(yīng)用變化時(shí)。（對(duì)于 React DOM 來說，會(huì)發(fā)生在 React 插入，更新及刪除 DOM 節(jié)點(diǎn)的時(shí)候。）在此階段，React 還會(huì)調(diào)用 componentDidMount 和 componentDidUpdate 之類的生命周期方法。

2.React嚴(yán)格模式的重復(fù)調(diào)用

嚴(yán)格模式不能自動(dòng)檢測到你的副作用，但它可以幫助你發(fā)現(xiàn)它們。

通過故意重復(fù)調(diào)用以下函數(shù)來實(shí)現(xiàn)的該操作：

class 組件的constructor、render 、shouldComponentUpdate
組件的生命周期方法：getDerivedStateFromProps
函數(shù)組件通過使用 useState，useMemo或者useReducer

3.Tips：

嚴(yán)格模式采用故意重復(fù)調(diào)用方法（如組件的構(gòu)造函數(shù)）的方式，使得這種 bug 更容易被發(fā)現(xiàn)。

作用5：檢測過時(shí)的 context API

過時(shí)的 context API 容易出錯(cuò)，將在未來的主要版本中刪除。

在所有 16.x 版本中它仍然有效，但在嚴(yán)格模式下，將顯示以下警告：

解決useEffect執(zhí)行兩次（刪除嚴(yán)格模式）

代碼如下：

  //就是下面的代碼 React.StrictMode
  // <React.StrictMode>
    <App />
  // </React.StrictMode>

圖片如下：

關(guān)閉嚴(yán)格模式前，如下圖：

關(guān)閉嚴(yán)格模式后，如下圖：

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片