這篇文章我將帶著大家去初步了解下React hooks的一些知識。
我們會從以下三個方面去了解、介紹React hooks。
- 是什么？
- 為什么？
- 怎么做？
什么是Hooks?
總結起來就是hooks提供了在react函數組件中也可以使用類組件的state和生命周期的能力。
為什么要用Hooks?
組件嵌套問題
之前如果我們需要抽離一些重復的邏輯，就會選擇 HOC 或者 render props 的方式。但是通過這樣的方式去實現組件，你打開 React DevTools 就會發現組件被各種其他組件包裹在里面。這種方式首先提高了 debug 的難度，并且也很難實現共享狀態。
但是通過 Hooks 的方式去抽離重復邏輯的話，一是不會增加組件的嵌套，二是可以實現狀態的共享。
Class組件的問題
如果我們需要一個管理狀態的組件，那么就必須使用 class 的方式去創建一個組件。但是一旦 class 組件變得復雜，那么四散的代碼就很不容易維護。另外 class 組件通過 Babel 編譯出來的代碼也相比函數組件多得多。
Hooks 能夠讓我們通過函數組件的方式去管理狀態，并且也能將四散的業務邏輯寫成一個個 Hooks 便于復用以及維護。
怎么使用Hooks?
首先放兩張Class Component 和React hooks兩種不同方式的代碼截圖。
useState
useState 是其中最常有的鉤子，可以為我們的函數組件提供local state，它接受一個初始state的值，返回一對變量。
const [count, setCount] = useState(0); // 0為state的初始值
setCount 用法是和 setState 一樣的，可以傳入一個新的狀態或者函數。
setCount(prevCount => prevCount + 1)
useEffect
useEffect 即為生命周期的鉤子。useEffect 可以讓你在函數組件中執行副作用操作，相當于ComponentWiillMount、ComponentDidMount、ComponentWillUnmount三個生命周期的結合。有些副作用操作需要清除，所以需要返回一個函數。
useEffect 中還可以通過傳入第二個參數來決定是否執行里面的操作來避免一些不必要的性能損失，只要第二個參數數組中的成員的值沒有改變，就會跳過此次執行。如果傳入一個空數組 [ ]，那么該 effect 只會在組件 mount 和 unmount 時期執行。
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // 如果count沒有改變，就跳過此次執行
清除副作用操作可以在返回的函數中去進行。它會在前一次 effect執行后，下一次 effect 將要執行前，以及 Unmount 時期執行。
useRef
useRef 可以讓我們去拿到最新的state。
const [count, setCount] = React.useState(0)
const ref = React.useRef(count)
React.useEffect(() => {
ref.current = count
setTimeout(() => {
console.log(ref.current) // 這里可以拿到更新后的state
}, 2000)
})
useRef 可以用來存儲任何會改變的值，解決了在函數組件上不能通過實例去存儲數據的問題。另外你還可以 useRef 來訪問到改變之前的數據。
總結
- useState：傳入我們所需的初始狀態，返回一個常量狀態以及改變狀態的函數
- useEffect：第一個參數接受一個 callback，每次組件更新都會執行這個 callback，并且 callback 可以返回一個函數，該函數會在每次組件銷毀前執行。如果 useEffect 內部有依賴外部的屬性，并且希望依賴屬性不改變就不重復執行 useEffect 的話，可以傳入一個依賴數組作為第二個參數
- useRef：如果你需要有一個地方來存儲變化的數據
更多的一些鉤子大家可以去查詢React相關文檔去翻閱學習。附上文檔地址。
React hooks為我們提供了react函數組件的一些擴展能力，分析了一些React hooks解決的問題以及簡單的使用，我們完全可以使用React hooks去代替類組件，盡情擁抱React hooks。
