一、執(zhí)行兩次的useEffect。

前段時間在本地啟了一個 React Demo 項目，在編碼的過程中遇到一個很奇怪的“Bug”。

其中簡化版的代碼如下所示。

// 入口文件
import { StrictMode } from 'react';
import * as ReactDOMClient from 'react-dom/client';
import App from './App';
const root = ReactDOMClient.createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

// 組件代碼
import React, { useEffect } from 'react';
const App = () => {
  useEffect(() => {
    console.log('組件掛載完成！');
  }, []);
  return <>Hello world!</>;
};

我是萬萬沒想到，就這樣幾行簡單的代碼竟然會觸發(fā)一個“Bug”。

此“Bug”的表現(xiàn)為：在 Chrome 控制臺里發(fā)現(xiàn) “Hello world!” 被打印了 “兩次”。

刷新之后依然如此，當(dāng)時就給我整懵了，第一感覺就是，這怎么可能？

很是糾結(jié)一番之后依然沒想明白，于是試著去網(wǎng)上搜了一下，發(fā)現(xiàn)竟然有人同樣遇到過這個問題。

通過網(wǎng)上指引，同時去官網(wǎng)查了一下，終于得出答案。

這不是 Bug，這是 React18 新加的特性。

二、React18 useEffect 新特性

1.這是 React18 才新增的特性。
2.僅在開發(fā)模式("development")下，且使用了嚴(yán)格模式("Strict Mode")下會觸發(fā)。
  生產(chǎn)環(huán)境("production")模式下和原來一樣，僅執(zhí)行一次。
3.之所以執(zhí)行兩次，是為了模擬立即卸載組件和重新掛載組件。
  為了幫助開發(fā)者提前發(fā)現(xiàn)重復(fù)掛載造成的 Bug 的代碼。 
  同時，也是為了以后 React的新功能做鋪墊。 
  未來會給 React 增加一個特性，允許 React 在保留狀態(tài)的同時，能夠做到僅僅對UI部分的添加和刪除。
  讓開發(fā)者能夠提前習(xí)慣和適應(yīng)，做到組件的卸載和重新掛載之后， 重復(fù)執(zhí)行 useEffect的時候不會影響應(yīng)用正常運行。

如何應(yīng)對

看過文檔以及了解他們這么做的本意之后，我也能夠理解他們會這樣做了。

只是，對于這種半強迫式操作多少有些不喜歡，感覺是在代碼中”被強迫打一針疫苗？”。

當(dāng)然，人家就是這么干了，作為 React 的普通使用者，能做的就是 適應(yīng)它 ，并按照它的規(guī)范來做。

1.首先先了解一下 React 中 useEffect 執(zhí)行的時機

Every time your component renders, React will update the screen and then run the
code inside useEffect.

每次組件渲染時，React 都會更新頁面 UI，然后運行 useEffect 中的代碼。

Effects run at the end of the rendering process after the screen updates

Effect 在屏幕更新之后的 rendering 進程結(jié)束的時候執(zhí)行。

從上面可以得出結(jié)論，React 中的 useEffect 執(zhí)行時機是在組件渲染之后（類似于 window(component).onload ？）。

因此，對于某些“副作用”的渲染，比如異步接口請求，事件綁定等操作我們通常都放在 useEffect 中執(zhí)行。

當(dāng)然，useEffect 除了在組件渲染的時候執(zhí)行外，在組件卸載的時候也有相關(guān)執(zhí)行操作。

在組件卸載的時候會執(zhí)行 useEffect 方法的return語句。

useEffect(() => {
  window.a = 100;
  return (window.a = 0);
}, []);

如上代碼段，當(dāng)組件渲染的時候會執(zhí)行window.a = 100，當(dāng)組件卸載的時候會執(zhí)行window.a = 0。

知道了 useEffect 的執(zhí)行時機，也就能明白為什么 React18 中 useEffect 會執(zhí)行兩次了。

因為， React18 在開發(fā)環(huán)境中除了必要的掛載之外，還 "額外"模擬執(zhí)行了一次組件的卸載和掛載。

既然知道了原因，那么，接下來就是想辦法解決了。

2.怎么樣才能讓 Effect 執(zhí)行一次？。

對于這個問題，官方文檔上面有一句原話：The right question isn’t “how to run an Effect once,” but “how to fix my Effect so that it works after remounting”.翻譯一下，就是說：正確的問題不是“怎么樣讓 Effect 執(zhí)行一次”，而是“怎樣修復(fù)我的 Effect，讓它在(重復(fù))掛載之后正常工作”

也可以理解，畢竟在 React 的未來版本中做離屏渲染的時候 useEffect 肯定會多次執(zhí)行的。

而且，即使是當(dāng)前版本，在做頁面的前進后退也會面臨觸發(fā)多次 useEffect。

所以，解決辦法其實就是解決 重復(fù)掛載卸載之后 應(yīng)用正常工作了。

###3.具體的解決方法

我們知道 useEffect 支持返回一個函數(shù)，在組件卸載的時候就會執(zhí)行該函數(shù)。

因此，通常正確解法就是 實現(xiàn)清理函數(shù)，并將其在 useEffect 中返回。

當(dāng)然，不同的 Effect 需要有不同的清理方式。

在常用 Effect 分類下，大致有如下幾類清理。

1）清理事件監(jiān)聽

useEffect(() => {
  function handleScroll(e) {
    console.log(e.clientX, e.clientY);
  }
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

對于事件監(jiān)聽類函數(shù)，在返回函數(shù)內(nèi)部“取消掉事件監(jiān)聽”即可。

2-1）重置頁面數(shù)據(jù)，清理屬性狀態(tài)

useEffect(() => {
  const node = ref.current;
  node.style.opacity = 1; // Trigger the animation
  return () => {
    node.style.opacity = 0; // Reset to the initial value
  };
}, []);

對于一些頁面屬性的變更，在返回函數(shù)內(nèi)部將其變更的屬性進行還原。

2-2）重置頁面數(shù)據(jù)，還原元素狀態(tài)

import { useEffect, useRef } from 'react';
function VideoPlayer({ src, isPlaying }) {
  const ref = useRef(null);
  useEffect(() => {
    if (isPlaying) {
      ref.current.play();
    } else {
      ref.current.pause();
    }
  });
  return <video ref={ref} src={src} loop playsInline />;
}

涉及到元素狀態(tài)的，比如播放器之類，需要對（元素）播放器的狀態(tài)進行重置。

2-3）重置頁面數(shù)據(jù)，彈窗類。

useEffect(() => {
  const dialog = dialogRef.current;
  dialog.showModal();
  return () => dialog.close();
}, []);

如果是默認彈窗類，這種也算是元素狀態(tài)，同樣需要對其（彈出）狀態(tài)進行重置。

3-1）異步請求頁面數(shù)據(jù)處理，處理異步數(shù)據(jù)渲染

useEffect(() => {
  let ignore = false;
  async function startFetching() {
    const json = await fetchTodos(userId);
    // 這里執(zhí)行是異步的，所以第一次執(zhí)行到此處的時候組件已經(jīng)被卸載了
    // 此時的 ignore 已經(jīng)被 return 里面的方法置為 true 了
    // 所以這里第一次執(zhí)行的時候不執(zhí)行 setTodos(json)
    // setTodos 其實是在第二次執(zhí)行的時候才觸發(fā)
    if (!ignore) {
      setTodos(json);
    }
  }
  startFetching();
  return () => {
    ignore = true;
  };
}, [userId]);

如上代碼，對于異步請求數(shù)據(jù)并渲染這一類。

我們可以設(shè)置一個 標(biāo)識位，做到對 請求返回的數(shù)據(jù) 僅做一次處理與渲染setTodos(json)。

codesandbox 測試代碼段

3-2）異步請求頁面數(shù)據(jù)處理，處理接口請求

上面的方法雖然僅會渲染一次，但是請求依然發(fā)起了多次。

如果不希望請求多次，也可以使用請求接口數(shù)據(jù)的緩存方案，對返回數(shù)據(jù)進行緩存。

const cache = useRef(null);
useEffect(() => {
  let ignore = false;
  async function startFetching() {
    if (!cache.current) {
      cache.current = await fetchTodos(userId);
    }
    if (!ignore) {
      setTodos(cache.current);
    }
  }
  startFetching();
  return () => {
    ignore = true;
  };
}, [userId]);

對于異步請求，除了可以處理渲染頻率，還可以對接口的請求本身做緩存。

在前面3-1的基礎(chǔ)上，緩存接口返回的數(shù)據(jù)，下次請求的時候如果已經(jīng)有緩存數(shù)據(jù)了就直接用，無須再次發(fā)起請求。

4）無須清理類

并不是所有的 useEffect 函數(shù)都需要清理，對于一些沒有副作用的函數(shù)，我們完全可以不做處理

useEffect(() => {
  const map = mapRef.current;
  map.setZoomLevel(zoomLevel);
}, [zoomLevel]);

如上代碼所示，setZoomLevel 方法僅僅是設(shè)置一下 Dom 元素的層級。
這種操作無論同時執(zhí)行多少次都不會有太大的影響，所以對于這一類我們就隨他去吧，畢竟線上也不會執(zhí)行多次。

5）日志 log 上報類

useEffect(() => {
  reportLog({ name: 'viewCount' });
}, []);

對于日志上報類，其實也可以算是無須清理類，但是又有點特殊。

因為，對于日志類，首先在開發(fā)環(huán)境中我們其實是無須進行上報的，畢竟這種日志打上去也沒啥用。

當(dāng)然，如果是要對上報日志本身這個進行調(diào)試等必須上報的情形，這種也有三種應(yīng)對方式：

方式一，在本地開發(fā)環(huán)境使用 console.log 來代替 reportLog。
方式二，取消掉嚴(yán)格模式（StrictMode） 方式三，構(gòu)建一個 production
版本啟動，或者將其部署到 QA 環(huán)境，部署的時候，指定 production 模式。

借鑒鏈接：大神地址：epoos

總結(jié)

到此這篇關(guān)于React18的useEffect執(zhí)行兩次該如何應(yīng)對的文章就介紹到這了,更多相關(guān)React18 useEffect執(zhí)行兩次內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論