如何使 React 中的 useEffect、useLayoutEffect 只調用一次

??Hook 是 React 16.8 的新增特性，旨在替代原來 React 中的 Class 組件。React 官方已經對使用 Class 組件采取了負面態度（見此處）。雖然目前官方仍然明確聲明“沒有計劃從 React 中移除 class”（見此處），但待 Hook 成熟之后，Class 組件語法被廢棄恐怕是遲早的事情。

??useEffect、useLayoutEffect 可用于替代 Class 組件生命周期的方法。通常，它們都會反復執行。有時候，這會導致死循環。

??使 useEffect、useLayoutEffect 只調用一次的方法是，向它們傳入第二個空數組參數。如：

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

---

【踩坑提醒】

??不要使用如下途徑來使 useEffect、useLayoutEffect 只調用一次。

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

??有過多線程并發編程經驗的人應該知道，上面的 didInit 將不起作用，且程序可能將在初始化時陷入死循環。雖然客戶端 JavaScript 是單線程的，但由于 JavaScript 有異步語法，上述代碼仍然會造成對 didInit 的異步并發訪問，導致 didInit 不起作用。由于 useEffect 可以被反復觸發，如果上述的函數 init() 進行了對 state 的異步更新，這將導致對 useEffect 的持續循環觸發。

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

---

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

總結

以上是生活随笔為你收集整理的如何使 React 中的 useEffect、useLayoutEffect 只调用一次的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。