最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

 
 
 
 

  
  
  
  
import React, { useEffect, useState } from 'react';
  
  
  
  

  
  
  
  
export default () => {
  
  
  
  
  const [count, setState] = useState(0);
  
  
  
  

  
  
  
  
  useEffect(() => {
  
  
  
  
    setState(s => s + 1);
  
  
  
  
  }, []);
  
  
  
  

  
  
  
  
  return (
  
  
  
  
    

  
  
  
  
      {count}
  
  
  
  
    

 
 
 
 

  
  
  
  
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