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

10年的繁昌網(wǎng)站建設(shè)經(jīng)驗(yàn),針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù),響應(yīng)快,48小時(shí)及時(shí)工作處理。營(yíng)銷(xiāo)型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同,自動(dòng)調(diào)整繁昌建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì),從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“繁昌網(wǎng)站設(shè)計(jì)”,“繁昌網(wǎng)站推廣”以來(lái),每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
- A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
在開(kāi)發(fā)環(huán)境編輯代碼時(shí),react-refresh 可以保持組件當(dāng)前狀態(tài),僅僅變更編輯的部分。在umi[2]中可以通過(guò) fastRefresh: {}快速開(kāi)啟該功能。
這張 gif 動(dòng)圖展示的是使用 react-refresh 特性的開(kāi)發(fā)體驗(yàn),可以看出,修改組件代碼后,已經(jīng)填寫(xiě)的用戶(hù)名和密碼保持不變,僅僅只有編輯的部分變更了。
react-refresh 的簡(jiǎn)單原理
對(duì)于 Class 類(lèi)組件,react-refresh 會(huì)一律重新刷新(remount),已有的 state 會(huì)被重置。而對(duì)于函數(shù)組件,react-refresh 則會(huì)保留已有的 state。所以 react-refresh 對(duì)函數(shù)類(lèi)組件體驗(yàn)會(huì)更好。本篇文章主要講解 React Hooks 在 react-refresh 模式下的怪異行為,現(xiàn)在我來(lái)看下 react-refresh 對(duì)函數(shù)組件的工作機(jī)制。
在熱更新時(shí)為了保持狀態(tài),useState 和 useRef 的值不會(huì)更新。
在熱更新時(shí),為了解決某些問(wèn)題[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)致的問(wèn)題
在上述工作機(jī)制下,會(huì)帶來(lái)很多問(wèn)題,接下來(lái)我會(huì)舉幾個(gè)具體的例子。
第一個(gè)問(wèn)題
- import React, { useEffect, useState } from 'react';
- export default () => {
- const [count, setState] = useState(0);
- useEffect(() => {
- setState(s => s + 1);
- }, []);
- return (
- {count}
- )
- }
上面的代碼很簡(jiǎn)單,在正常模式下,count值最大為 1。因?yàn)?useEffect 只會(huì)在初始化的時(shí)候執(zhí)行一次。但在 react-refresh 模式下,每次熱更新的時(shí)候,state 不變,但 useEffect 重新執(zhí)行,就會(huì)導(dǎo)致 count 的值一直在遞增。
如上圖所示,count 隨著每一次熱更新在遞增。
第二個(gè)問(wèn)題
如果你使用了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 (
- hello world
- )
- }
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è)問(wèn)題的原因,就是 useUpdateEffect 用 ref 來(lái)記錄了當(dāng)前是不是第一次執(zhí)行,見(jiàn)下面的代碼。
- 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è)問(wèn)題
最初發(fā)現(xiàn)這個(gè)問(wèn)題,是 ahooks 的 useRequest 在熱更新后,loading 會(huì)一直為 true。經(jīng)過(guò)分析,原因就是使用 isUnmount ref 來(lái)標(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 ?
loading:hello world;- }
如上代碼所示,在熱更新時(shí),isUnmount 變?yōu)榱藅rue,導(dǎo)致二次執(zhí)行時(shí),代碼以為組件已經(jīng)卸載了,不再響應(yīng)異步操作。
如何解決這些問(wèn)題
方案一
第一個(gè)解決方案是從代碼層面解決,也就是要求我們?cè)趯?xiě)代碼的時(shí)候,時(shí)時(shí)能想起來(lái) 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ì)上面的問(wèn)題二和三都是有效的。
方案二
根據(jù)官方文檔[6],我們可以通過(guò)在文件中添加以下注釋來(lái)解決這個(gè)問(wèn)題。
- /* @refresh reset */
添加這個(gè)問(wèn)題后,每次熱更新,都會(huì) remount,也就是組件重新執(zhí)行。useState 和 useRef 也會(huì)重置掉,也就不會(huì)出現(xiàn)上面的問(wèn)題了。
官方態(tài)度
本來(lái) React Hooks 已經(jīng)有蠻多潛規(guī)則了,在使用 react-refresh 時(shí),還有潛規(guī)則要注意。但官方回復(fù)說(shuō)這是預(yù)期行為,見(jiàn)該issue[7]。
- Effects are not exactly "mount"/"unmount" — they're more like "show"/"hide".
不管你暈沒(méi)暈,反正我是暈了,╮(╯▽╰)╭。
參考資料
[1]react-refresh-webpack-plugin:
https://github.com/pmmmwh/react-refresh-webpack-plugin
[2]umi:
https://umijs.org/zh-CN/docs/fast-refresh
[3]為了解決某些問(wèn)題:
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
當(dāng)前名稱(chēng):ReactHooks在React-refresh模塊熱替換(HMR)下的異常行為
網(wǎng)站URL:http://fisionsoft.com.cn/article/cocjjge.html


咨詢(xún)
建站咨詢(xún)
