[[400802]]

 什么是 react-refresh

react-refresh-webpack-plugin[1] 是 React 官方提供的一個(gè) 模塊熱替換(HMR)插件。

• A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.

在開發(fā)環(huán)境編輯代碼時(shí)，react-refresh 可以保持組件當(dāng)前狀態(tài)，僅僅變更編輯的部分。在 umi[2] 中可以通過 fastRefresh: {}快速開啟該功能。

這張 gif 動(dòng)圖展示的是使用 react-refresh 特性的開發(fā)體驗(yàn)，可以看出，修改組件代碼后，已經(jīng)填寫的用戶名和密碼保持不變，僅僅只有編輯的部分變更了。

react-refresh 的簡單原理

對(duì)于 Class 類組件，react-refresh 會(huì)一律重新刷新(remount)，已有的 state 會(huì)被重置。而對(duì)于函數(shù)組件，react-refresh 則會(huì)保留已有的 state。所以 react-refresh 對(duì)函數(shù)類組件體驗(yàn)會(huì)更好。本篇文章主要講解 React Hooks 在 react-refresh 模式下的怪異行為，現(xiàn)在我來看下 react-refresh 對(duì)函數(shù)組件的工作機(jī)制。

在熱更新時(shí)為了保持狀態(tài)，useState 和 useRef 的值不會(huì)更新。

在熱更新時(shí)，為了解決某些問題[3]，useEffect、useCallback、useMemo 等會(huì)重新執(zhí)行。

• When we update the code, we need to "clean up" the effects that hold onto past values (e.g. passed functions), and "setup" the new ones with updated values. Otherwise, the values used by your effect would be stale and "disagree" with value used in your rendering, which makes Fast Refresh much less useful and hurts the ability to have it work with chains of custom Hooks.

如上圖所示，在文本修改之后，state保持不變，useEffect被重新執(zhí)行了。

react-refresh 工作機(jī)制導(dǎo)致的問題

在上述工作機(jī)制下，會(huì)帶來很多問題，接下來我會(huì)舉幾個(gè)具體的例子。

第一個(gè)問題

import React, { useEffect, useState } from 'react'; 
 
export default () => { 
  const [count, setState] = useState(0); 
 
  useEffect(() => { 
    setState(s => s + 1); 
  }, []); 
 
  return ( 
    <div> 
      {count} 
    </div> 
  ) 
} 

 上面的代碼很簡單，在正常模式下，count值最大為 1。因?yàn)?useEffect 只會(huì)在初始化的時(shí)候執(zhí)行一次。但在 react-refresh 模式下，每次熱更新的時(shí)候，state 不變，但 useEffect 重新執(zhí)行，就會(huì)導(dǎo)致 count 的值一直在遞增。

如上圖所示，count 隨著每一次熱更新在遞增。

第二個(gè)問題

如果你使用了 ahooks[4] 或者 react-use[5] 的 useUpdateEffect，在熱更新模式下也會(huì)有不符合預(yù)期的行為。

import React, { useEffect } from 'react'; 
import useUpdateEffect from './useUpdateEffect'; 
 
export default () => { 
 
  useEffect(() => { 
    console.log('執(zhí)行了 useEffect'); 
  }, []); 
 
  useUpdateEffect(() => { 
    console.log('執(zhí)行了 useUpdateEffect'); 
  }, []); 
 
  return ( 
    <div> 
      hello world 
    </div> 
  ) 
} 

 useUpdateEffect 與 useEffect相比，它會(huì)忽略第一次執(zhí)行，只有在 deps 變化時(shí)才會(huì)執(zhí)行。以上代碼的在正常模式下，useUpdateEffect 是永遠(yuǎn)不會(huì)執(zhí)行的，因?yàn)?deps 是空數(shù)組，永遠(yuǎn)不會(huì)變化。但在 react-refresh 模式下，熱更新時(shí)，useUpdateEffect 和 useEffect 同時(shí)執(zhí)行了。

造成這個(gè)問題的原因，就是 useUpdateEffect 用 ref 來記錄了當(dāng)前是不是第一次執(zhí)行，見下面的代碼。

import { useEffect, useRef } from 'react'; 
 
const useUpdateEffect: typeof useEffect = (effect, deps) => { 
  const isMounted = useRef(false); 
 
  useEffect(() => { 
    if (!isMounted.current) { 
      isMounted.current = true; 
    } else { 
      return effect(); 
    } 
  }, deps); 
}; 
 
export default useUpdateEffect; 

上面代碼的關(guān)鍵在 isMounted

初始化時(shí)，useEffect 執(zhí)行，標(biāo)記 isMounted 為 true

熱更新后，useEffect 重新執(zhí)行了，此時(shí) isMounted 為 true，就往下執(zhí)行了

第三個(gè)問題

最初發(fā)現(xiàn)這個(gè)問題，是 ahooks 的 useRequest 在熱更新后，loading 會(huì)一直為 true。經(jīng)過分析，原因就是使用 isUnmount ref 來標(biāo)記組件是否卸載。

import React, { useEffect, useState } from 'react'; 
 
function getUsername() { 
  console.log('請(qǐng)求了') 
  return new Promise(resolve => { 
    setTimeout(() => { 
      resolve('test'); 
    }, 1000); 
  }); 
} 
 
export default function IndexPage() { 
 
  const isUnmount = React.useRef(false); 
  const [loading, setLoading] = useState(true); 
 
  useEffect(() => { 
    setLoading(true); 
    getUsername().then(() => { 
      if (isUnmount.current === false) { 
        setLoading(false); 
      } 
    }); 
    return () => { 
      isUnmount.current = true; 
    } 
  }, []); 
 
  return loading ? <div>loading</div> : <div>hello world</div>; 
} 

 如上代碼所示，在熱更新時(shí)，isUnmount 變?yōu)榱藅rue，導(dǎo)致二次執(zhí)行時(shí)，代碼以為組件已經(jīng)卸載了，不再響應(yīng)異步操作。

如何解決這些問題

方案一

第一個(gè)解決方案是從代碼層面解決，也就是要求我們?cè)趯懘a的時(shí)候，時(shí)時(shí)能想起來 react-refresh 模式下的怪異行為。比如 useUpdateEffect 我們就可以在初始化或者熱替換時(shí)，將 isMounted ref 初始化掉。如下：

import { useEffect, useRef } from 'react'; 
 
const useUpdateEffect: typeof useEffect = (effect, deps) => { 
  const isMounted = useRef(false); 
 
+  useEffect(() => { 
+   isMounted.current = false; 
+  }, []); 
   
  useEffect(() => { 
    if (!isMounted.current) { 
      isMounted.current = true; 
    } else { 
      return effect(); 
    } 
  }, deps); 
}; 
 
export default useUpdateEffect; 

這個(gè)方案對(duì)上面的問題二和三都是有效的。

方案二

根據(jù)官方文檔[6]，我們可以通過在文件中添加以下注釋來解決這個(gè)問題。

/* @refresh reset */ 

添加這個(gè)問題后，每次熱更新，都會(huì) remount，也就是組件重新執(zhí)行。useState 和 useRef 也會(huì)重置掉，也就不會(huì)出現(xiàn)上面的問題了。

官方態(tài)度

本來 React Hooks 已經(jīng)有蠻多潛規(guī)則了，在使用 react-refresh 時(shí)，還有潛規(guī)則要注意。但官方回復(fù)說這是預(yù)期行為，見該 issue[7]。

• Effects are not exactly "mount"/"unmount" — they're more like "show"/"hide".

不管你暈沒暈，反正我是暈了，╮(╯▽╰)╭。

參考資料

[1]react-refresh-webpack-plugin:

https://github.com/pmmmwh/react-refresh-webpack-plugin

[2]umi:

https://umijs.org/zh-CN/docs/fast-refresh

[3]為了解決某些問題:

https://github.com/facebook/react/issues/21019#issuecomment-800650091

[4]ahooks:

https://github.com/alibaba/hooks/blob/master/packages/hooks/src/useUpdateEffect/index.ts

[5]react-use:

https://github.com/streamich/react-use/blob/master/docs/useUpdateEffect.md

[6]官方文檔:

https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/API.md#reset

[7]issue:

https://github.com/facebook/react/issues/21019