如何使 React 中的 useEffect、useLayoutEffect 只調(diào)用一次

??Hook 是 React 16.8 的新增特性，旨在替代原來(lái) React 中的 Class 組件。React 官方已經(jīng)對(duì)使用 Class 組件采取了負(fù)面態(tài)度（見(jiàn)此處）。雖然目前官方仍然明確聲明“沒(méi)有計(jì)劃從 React 中移除 class”（見(jiàn)此處），但待 Hook 成熟之后，Class 組件語(yǔ)法被廢棄恐怕是遲早的事情。

??useEffect、useLayoutEffect 可用于替代 Class 組件生命周期的方法。通常，它們都會(huì)反復(fù)執(zhí)行。有時(shí)候，這會(huì)導(dǎo)致死循環(huán)。

??使 useEffect、useLayoutEffect 只調(diào)用一次的方法是，向它們傳入第二個(gè)空數(shù)組參數(shù)。如：

useEffect(() => init(), []);

【踩坑提醒】

??不要使用如下途徑來(lái)使 useEffect、useLayoutEffect 只調(diào)用一次。

let didInit = false;
useEffect(() => {
    if (!didInit) {
        didInit = true; // didInit 放在哪里都不會(huì)起作用
        init();
        didInit = true; // didInit 放在哪里都不會(huì)起作用
    }
});

??有過(guò)多線程并發(fā)編程經(jīng)驗(yàn)的人應(yīng)該知道，上面的 didInit 將不起作用，且程序可能將在初始化時(shí)陷入死循環(huán)。雖然客戶(hù)端 JavaScript 是單線程的，但由于 JavaScript 有異步語(yǔ)法，上述代碼仍然會(huì)造成對(duì) didInit 的異步并發(fā)訪問(wèn)，導(dǎo)致 didInit 不起作用。由于 useEffect 可以被反復(fù)觸發(fā)，如果上述的函數(shù) init() 進(jìn)行了對(duì) state 的異步更新，這將導(dǎo)致對(duì) useEffect 的持續(xù)循環(huán)觸發(fā)。

??由于 JavaScript 不支持多線程鎖，所以它無(wú)法使用 雙重檢查鎖定。因此，在 React 中，不要自作聰明編寫(xiě)這種壞代碼。

??如果想知道更多關(guān)于從 Class 組件到 Hook 的重構(gòu)方法，可見(jiàn)：https://react.docschina.org/docs/hooks-faq.html#from-classes-to-hooks