主要內容
Hook介紹使用State Hook使用 Effect Hook使用 Context Hook自定義hook使用 Reducer Hook使用 Callback Hook使用 Memo Hook使用 useRef第一節 Hook介紹
Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性
沒有破壞性改動:
完全可選的。 你無需重寫任何已有代碼就可以在一些組件中嘗試 Hook。但是如果你不想,你不必現在就去學習或使用 Hook。
100% 向後兼容的。 Hook 不包含任何破壞性改動。
現在可用。 Hook 已發布於 v16.8.0。
我們準備讓 Hook 覆蓋所有 class 組件的使用場景,但是我們將繼續為 class 組件提供支持
第二節 使用State Hook
1.語法:
說明:1.調用 useState 方法的時候做了什麼?
它定義一個 「state 變量」,這是一種在函數調用時保存變量的方式 —— useState 是一種新方法,它與 class 裡面的 this.state 提供的功能完全相同
2.useState 需要哪些參數?
useState() 方法裡面唯一的參數就是初始 state,不同於 class 的是,我們可以按照需要使用數字或字符串對其進行賦值,而不一定是對象。
3.useState 方法的返回值是什麼
返回值為:當前 state 以及更新 state 的函數
2. 讀取 State
在函數中,我們可以直接用 count
3. 更新 State
在函數中,我們已經有了 setCount 和 count 變量,所以我們不需要 this:
第三節 使用 Effect Hook
2. 使用
1. 基本使用
1.useEffect 做了什麼?
通過使用這個 Hook,你可以告訴 React 組件需要在渲染後執行某些操作。
2.為什麼在組件內部調用 useEffect?
將 useEffect 放在組件內部讓我們可以在 effect 中直接訪問 count state 變量(或其他 props)。
3.useEffect 會在每次渲染後都執行嗎?
是的,默認情況下,它在第一次渲染之後和每次更新之後都會執行。
2. 需要清除的 effect
添加和刪除訂閱的代碼的緊密性,所以 useEffect 的設計是在同一個地方執行。如果你的 effect 返回一個函數,React 將會在執行清除操作時調用它
為什麼要在 effect 中返回一個函數?
這是 effect 可選的清除機制。每個 effect 都可以返回一個清除函數。如此可以將添加和移除訂閱的邏輯放在一起。它們都屬於 effect 的一部分。
React 何時清除 effect?
React 會在組件卸載的時候執行清除操作
3.Effect 進行性能優化
在某些情況下,每次渲染後都執行清理或者執行 effect 可能會導致性能問題。如果某些特定值在兩次重渲染之間沒有發生變化,你可以通知 React 跳過對 effect 的調用,只要傳遞數組作為 useEffect 的第二個可選參數即可
這個參數是什麼作用呢?如果 count 的值是 5,而且我們的組件重渲染的時候 count 還是等於 5,React 將對前一次渲染的 [5] 和後一次渲染的 [5] 進行比較。因為數組中的所有元素都是相等的(5 === 5),React 會跳過這個 effect,這就實現了性能的優化。
第四節 Context Hook
1. 語法
接收一個 context 對象(React.createContext 的返回值)並返回該 context 的當前值。當前的 context 值由上層組件中距離當前組件最近的 <MyContext.Provider> 的 value prop 決定
第五節:自定義hook
通過自定義 Hook,可以將組件邏輯提取到可重用的函數中
自定義 Hook 是一個函數,其名稱以 「use」 開頭,函數內部可以調用其他的 Hook。
2.定義自定義hook:
3.使用自定義hook
第六節:使用 Reducer Hook
useState 的替代方案。它接收一個形如 (state, action) => newState 的 reducer,並返回當前的 state 以及與其配套的 dispatch 方法。
第七節:使用 Callback Hook
把內聯回調函數及依賴項數組作為參數傳入 useCallback,它將返回該回調函數的 memoized 版本,該回調函數僅在某個依賴項改變時才會更新。當你把回調函數傳遞給經過優化的並使用引用相等性去避免非必要渲染(例如 shouldComponentUpdate)的子組件時,它將非常有用。
第八節:使用useMemo
把「創建」函數和依賴項數組作為參數傳入 useMemo,它僅會在某個依賴項改變時才重新計算 memoized 值。這種優化有助於避免在每次渲染時都進行高開銷的計算。
第九節:useRef
useRef 返回一個可變的 ref 對象,其 .current 屬性被初始化為傳入的參數(initialValue)。返回的 ref 對象在組件的整個生命周期內保持不變。
本文由尚學堂前端學院原創,歡迎關注,帶你一起學習Web前端知識!