react hook 使用注意點

2022-05-19 14:10:51 字數 1117 閱讀 1596

1.useeffect

useeffect執行環境:

//

componentdidmount

useeffect(() =>, )

//componentupdate count變數更新時執行

useeffect(() =>, [count])

//componentwillunmount

useeffect(() =>

},)

2. 當在useeffect 使用 變數或者函式,並且沒有新增依賴時, 會報如下錯誤  

錯誤:react hook useeffect has missing dependencies: 'fn1' and 'menulist'. either include them or remove the dependency array

const fn1 = (list) =>

const fn2 = (list, map) =>

});}

useeffect(() =>,)

變數的話直接新增到以來的陣列裡即可,函式的話新增到依賴陣列後會報這個警告

the 'fn1' function makes the dependencies of useeffect hook (at line 208) change on every render. move it inside the useeffect callback. alternatively, wrap the 'fn1' definition into its own usecallback() hook;

解決辦法: 使用usecallback

注意:

1. 使用usecallback時,函式中使用到的變數也需要新增到依賴的陣列中

2. 使用usecallback時,函式中呼叫另外乙個函式時,需在當前函式前宣告

const fn2 = usecallback((list, map) =>

});},)

const fn1 = usecallback((list) =>,[location, maplist])

useeffect(() =>,[menulist, findnowpath])

React Hook基本使用

簡單說一下為什麼我會了解到hook api吧。之前寫react只會用class元件的方法,但是新專案使用到了hook,然後被迫學習這個api。為什麼要使用hook?根據官方文件介紹 hook是react16.8的新增特性。它可以讓你在不編寫class的情況下使用state以及其他的react特性。e...

React Hook 的簡單使用

1 什麼是react hook 2 為什麼要使用hook 3 使用usestate建立乙個點贊的小功能import react,from react const likebutton react.fc 點讚 button export default likebutton4 usereffect 的...

AJAX使用注意點

一 安裝aspajaxextsetup,解壓ajaxcontroltoolkit nosource,增加乙個面板ajax control toolkit 在新建的面板上增加項,在 選擇工具箱 視窗中,單擊 瀏覽 按鈕,並選擇解壓目錄下面的ajaxcontroltoolkit.dll檔案,然後確定。二...