useEffect執(zhí)行兩次

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

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

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

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

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

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

2.React的嚴格模式（StrictMode包裹顯渲染組件）

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

3.React的嚴格模式作用

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

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

作用1：識別不安全的生命周期

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

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

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

refs為字符串的危害??

如下圖：

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

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

它會產(chǎn)生重構(gòu)危險，你不能更改組件的實現(xiàn)細節(jié)，因為父組件可能正在訪問它的 DOM節(jié)點。

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

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

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

1.React的工作階段

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

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

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

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

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

3.Tips：

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

作用5：檢測過時的 context API

過時的 context API 容易出錯，將在未來的主要版本中刪除。

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

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

代碼如下：

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

圖片如下：

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

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

總結(jié)

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

最新評論