這篇文章我將帶著大家去初步了解下React hooks的一些知識题翻。
我們會從以下三個方面去了解、介紹React hooks腰鬼。
- 是什么藐握？
- 為什么？
- 怎么做垃喊？
什么是Hooks?
總結(jié)起來就是hooks提供了在react函數(shù)組件中也可以使用類組件的state和生命周期的能力猾普。
為什么要用Hooks?
組件嵌套問題
之前如果我們需要抽離一些重復的邏輯，就會選擇 HOC 或者 render props 的方式本谜。但是通過這樣的方式去實現(xiàn)組件初家，你打開 React DevTools 就會發(fā)現(xiàn)組件被各種其他組件包裹在里面。這種方式首先提高了 debug 的難度，并且也很難實現(xiàn)共享狀態(tài)溜在。
但是通過 Hooks 的方式去抽離重復邏輯的話陌知，一是不會增加組件的嵌套，二是可以實現(xiàn)狀態(tài)的共享掖肋。
Class組件的問題
如果我們需要一個管理狀態(tài)的組件仆葡，那么就必須使用 class 的方式去創(chuàng)建一個組件。但是一旦 class 組件變得復雜志笼，那么四散的代碼就很不容易維護沿盅。另外 class 組件通過 Babel 編譯出來的代碼也相比函數(shù)組件多得多。
Hooks 能夠讓我們通過函數(shù)組件的方式去管理狀態(tài)纫溃，并且也能將四散的業(yè)務邏輯寫成一個個 Hooks 便于復用以及維護腰涧。
怎么使用Hooks?
首先放兩張Class Component 和React hooks兩種不同方式的代碼截圖。
useState
useState 是其中最常有的鉤子紊浩，可以為我們的函數(shù)組件提供local state窖铡，它接受一個初始state的值，返回一對變量坊谁。
const [count, setCount] = useState(0); // 0為state的初始值
setCount 用法是和 setState 一樣的费彼，可以傳入一個新的狀態(tài)或者函數(shù)。
setCount(prevCount => prevCount + 1)
useEffect
useEffect 即為生命周期的鉤子口芍。useEffect 可以讓你在函數(shù)組件中執(zhí)行副作用操作箍铲，相當于ComponentWiillMount、ComponentDidMount阶界、ComponentWillUnmount三個生命周期的結(jié)合。有些副作用操作需要清除聋庵，所以需要返回一個函數(shù)膘融。
useEffect 中還可以通過傳入第二個參數(shù)來決定是否執(zhí)行里面的操作來避免一些不必要的性能損失，只要第二個參數(shù)數(shù)組中的成員的值沒有改變祭玉，就會跳過此次執(zhí)行氧映。如果傳入一個空數(shù)組 [ ]，那么該 effect 只會在組件 mount 和 unmount 時期執(zhí)行脱货。
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // 如果count沒有改變岛都，就跳過此次執(zhí)行
清除副作用操作可以在返回的函數(shù)中去進行。它會在前一次 effect執(zhí)行后振峻，下一次 effect 將要執(zhí)行前臼疫，以及 Unmount 時期執(zhí)行。
useRef
useRef 可以讓我們?nèi)ツ玫阶钚碌膕tate扣孟。
const [count, setCount] = React.useState(0)
const ref = React.useRef(count)
React.useEffect(() => {
ref.current = count
setTimeout(() => {
console.log(ref.current) // 這里可以拿到更新后的state
}, 2000)
})
useRef 可以用來存儲任何會改變的值烫堤，解決了在函數(shù)組件上不能通過實例去存儲數(shù)據(jù)的問題。另外你還可以 useRef 來訪問到改變之前的數(shù)據(jù)。
總結(jié)
- useState：傳入我們所需的初始狀態(tài)鸽斟，返回一個常量狀態(tài)以及改變狀態(tài)的函數(shù)
- useEffect：第一個參數(shù)接受一個 callback拔创，每次組件更新都會執(zhí)行這個 callback，并且 callback 可以返回一個函數(shù)富蓄，該函數(shù)會在每次組件銷毀前執(zhí)行剩燥。如果 useEffect 內(nèi)部有依賴外部的屬性，并且希望依賴屬性不改變就不重復執(zhí)行 useEffect 的話立倍，可以傳入一個依賴數(shù)組作為第二個參數(shù)
- useRef：如果你需要有一個地方來存儲變化的數(shù)據(jù)
更多的一些鉤子大家可以去查詢React相關文檔去翻閱學習灭红。附上文檔地址。
React hooks為我們提供了react函數(shù)組件的一些擴展能力帐萎，分析了一些React hooks解決的問題以及簡單的使用比伏，我們完全可以使用React hooks去代替類組件，盡情擁抱React hooks疆导。
