你還在為該使用無狀態元件(Function)還是有狀態元件(Class)而煩惱嗎?
——擁有了hooks,你再也不需要寫Class了,你的所有元件都將是Function。
你還在為搞不清使用哪個生命週期鉤子函式而日夜難眠嗎?
——擁有了Hooks,生命週期鉤子函式可以先丟一邊了。
你在還在為元件中的this指向而暈頭轉向嗎?
——既然Class都丟掉了,哪裡還有this?你的人生第一次不再需要面對this。
這樣看來,說React Hooks是今年最勁爆的新特性真的毫不誇張。如果你也對react感興趣,或者正在使用react進行專案開發,答應我,請一定抽出至少30分鐘的時間來閱讀本文好嗎?所有你需要了解的React Hooks的知識點,本文都涉及到了,相信完整讀完後你一定會有所收穫。
一個最簡單的Hooks
首先讓我們看一下一個簡單的有狀態元件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } } |
我們再來看一下使用hooks後的版本:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } |
是不是簡單多了!可以看到,Example
變成了一個函式,但這個函式卻有自己的狀態(count),同時它還可以更新自己的狀態(setCount)。這個函式之所以這麼了不得,就是因為它注入了一個hook–useState
,就是這個hook讓我們的函式變成了一個有狀態的函式。
除了useState
這個hook外,還有很多別的hook,比如useEffect
提供了類似於componentDidMount
等生命週期鉤子的功能,useContext
提供了上下文(context)的功能等等。
Hooks本質上就是一類特殊的函式,它們可以為你的函式型元件(function component)注入一些特殊的功能。咦?這聽起來有點像被詬病的Mixins啊?難道是Mixins要在react中死灰復燃了嗎?當然不會了,等會我們再來談兩者的區別。總而言之,這些hooks的目標就是讓你不再寫class,讓function一統江湖。
React為什麼要搞一個Hooks?
想要複用一個有狀態的元件太麻煩了!
我們都知道react都核心思想就是,將一個頁面拆成一堆獨立的,可複用的元件,並且用自上而下的單向資料流的形式將這些元件串聯起來。但假如你在大型的工作專案中用react,你會發現你的專案中實際上很多react元件冗長且難以複用。尤其是那些寫成class的元件,它們本身包含了狀態(state),所以複用這類元件就變得很麻煩。
那之前,官方推薦怎麼解決這個問題呢?答案是:渲染屬性(Render Props)和高階元件(Higher-Order Components)。我們可以稍微跑下題簡單看一下這兩種模式。
渲染屬性指的是使用一個值為函式的prop來傳遞需要動態渲染的nodes或元件。如下面的程式碼可以看到我們的DataProvider
元件包含了所有跟狀態相關的程式碼,而Cat
元件則可以是一個單純的展示型元件,這樣一來DataProvider
就可以單獨複用了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import Cat from 'components/cat' class DataProvider extends React.Component { constructor(props) { super(props); this.state = { target: 'Zac' }; } render() { return ( <div> {this.props.render(this.state)} </div> ) } } <DataProvider render={data => ( <Cat target={data.target} /> )}/> |
雖然這個模式叫Render Props,但不是說非用一個叫render的props不可,習慣上大家更常寫成下面這種:
1 2 3 4 5 6 |
... <DataProvider> {data => ( <Cat target={data.target} /> )} </DataProvider> |
高階元件這個概念就更好理解了,說白了就是一個函式接受一個元件作為引數,經過一系列加工後,最後返回一個新的元件。看下面的程式碼示例,withUser
函式就是一個高階元件,它返回了一個新的元件,這個元件具有了它提供的獲取使用者資訊的功能。
1 2 3 4 5 6 7 8 9 10 11 12 |
const withUser = WrappedComponent => { const user = sessionStorage.getItem("user"); return props => <WrappedComponent user={user} {...props} />; }; const UserPage = props => ( <div class="user-container"> <p>My name is {props.user}!</p> </div> ); export default withUser(UserPage); |
以上這兩種模式看上去都挺不錯的,很多庫也運用了這種模式,比如我們常用的React Router。但我們仔細看這兩種模式,會發現它們會增加我們程式碼的層級關係。最直觀的體現,開啟devtool看看你的元件層級巢狀是不是很誇張吧。這時候再回過頭看我們上一節給出的hooks例子,是不是簡潔多了,沒有多餘的層級巢狀。把各種想要的功能寫成一個一個可複用的自定義hook,當你的元件想用什麼功能時,直接在元件裡呼叫這個hook即可。
生命週期鉤子函式裡的邏輯太亂了吧!
我們通常希望一個函式只做一件事情,但我們的生命週期鉤子函式裡通常同時做了很多事情。比如我們需要在componentDidMount
中發起ajax請求獲取資料,繫結一些事件監聽等等。同時,有時候我們還需要在componentDidUpdate
做一遍同樣的事情。當專案變複雜後,這一塊的程式碼也變得不那麼直觀。
classes真的太讓人困惑了!
我們用class來建立react元件時,還有一件很麻煩的事情,就是this的指向問題。為了保證this的指向正確,我們要經常寫這樣的程式碼:this.handleClick = this.handleClick.bind(this)
,或者是這樣的程式碼:<button onClick={() => this.handleClick(e)}>
。一旦我們不小心忘了繫結this,各種bug就隨之而來,很麻煩。
還有一件讓我很苦惱的事情。我在之前的react系列文章當中曾經說過,儘可能把你的元件寫成無狀態元件的形式,因為它們更方便複用,可獨立測試。然而很多時候,我們用function寫了一個簡潔完美的無狀態元件,後來因為需求變動這個元件必須得有自己的state,我們又得很麻煩的把function改成class。
在這樣的背景下,Hooks便橫空出世了!
什麼是State Hooks?
回到一開始我們用的例子,我們分解來看到底state hooks做了什麼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } |
宣告一個狀態變數
1 2 3 4 |
import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); |
useState
是react自帶的一個hook函式,它的作用就是用來宣告狀態變數。useState
這個函式接收的引數是我們的狀態初始值(initial state),它返回了一個陣列,這個陣列的第[0]
項是當前當前的狀態值,第[1]
項是可以改變狀態值的方法函式。
所以我們做的事情其實就是,宣告瞭一個狀態變數count,把它的初始值設為0,同時提供了一個可以更改count的函式setCount。
上面這種表達形式,是借用了es6的陣列解構(array destructuring),它可以讓我們的程式碼看起來更簡潔。不清楚這種用法的可以先去看下我的這篇文章30分鐘掌握ES6/ES2015核心內容(上)。
如果不用陣列解構的話,可以寫成下面這樣。實際上陣列解構是一件開銷很大的事情,用下面這種寫法,或者改用物件解構,效能會有很大的提升。具體可以去這篇文章的分析Array destructuring for multi-value returns (in light of React hooks),這裡不詳細展開,我們就按照官方推薦使用陣列解構就好。
1 2 3 |
let _useState = useState(0); let count = _useState[0]; let setCount = _useState[1]; |
讀取狀態值
1 |
<p>You clicked {count} times</p> |
是不是超簡單?因為我們的狀態count就是一個單純的變數而已,我們再也不需要寫成{this.state.count}
這樣了。
更新狀態
1 2 3 |
<button onClick={() => setCount(count + 1)}> Click me </button> |
當使用者點選按鈕時,我們呼叫setCount函式,這個函式接收的引數是修改過的新狀態值。接下來的事情就交給react了,react將會重新渲染我們的Example元件,並且使用的是更新後的新的狀態,即count=1。這裡我們要停下來思考一下,Example本質上也是一個普通的函式,為什麼它可以記住之前的狀態?
一個至關重要的問題
這裡我們就發現了問題,通常來說我們在一個函式中宣告的變數,當函式執行完成後,這個變數也就銷燬了(這裡我們先不考慮閉包等情況),比如考慮下面的例子:
1 2 3 4 5 6 7 8 |
function add(n) { const result = 0; return result + 1; } add(1); //1 add(1); //1 |
不管我們反覆呼叫add函式多少次,結果都是1。因為每一次我們呼叫add時,result變數都是從初始值0開始的。那為什麼上面的Example函式每次執行的時候,都是拿的上一次執行完的狀態值作為初始值?答案是:是react幫我們記住的。至於react是用什麼機制記住的,我們可以再思考一下。
假如一個元件有多個狀態值怎麼辦?
首先,useState是可以多次呼叫的,所以我們完全可以這樣寫:
1 2 3 4 |
function ExampleWithManyStates() { const [age, setAge] = useState(42); const [fruit, setFruit] = useState('banana'); const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); |
其次,useState接收的初始值沒有規定一定要是string/number/boolean這種簡單資料型別,它完全可以接收物件或者陣列作為引數。唯一需要注意的點是,之前我們的this.setState
做的是合併狀態後返回一個新狀態,而useState
是直接替換老狀態後返回新狀態。最後,react也給我們提供了一個useReducer的hook,如果你更喜歡redux式的狀態管理方案的話。
從ExampleWithManyStates函式我們可以看到,useState無論呼叫多少次,相互之間是獨立的。這一點至關重要。為什麼這麼說呢?
其實我們看hook的“形態”,有點類似之前被官方否定掉的Mixins這種方案,都是提供一種“插拔式的功能注入”的能力。而mixins之所以被否定,是因為Mixins機制是讓多個Mixins共享一個物件的資料空間,這樣就很難確保不同Mixins依賴的狀態不發生衝突。
而現在我們的hook,一方面它是直接用在function當中,而不是class;另一方面每一個hook都是相互獨立的,不同元件呼叫同一個hook也能保證各自狀態的獨立性。這就是兩者的本質區別了。
react是怎麼保證多個useState的相互獨立的?
還是看上面給出的ExampleWithManyStates例子,我們呼叫了三次useState,每次我們傳的引數只是一個值(如42,‘banana’),我們根本沒有告訴react這些值對應的key是哪個,那react是怎麼保證這三個useState找到它對應的state呢?
答案是,react是根據useState出現的順序來定的。我們具體來看一下:
1 2 3 4 5 6 7 8 9 |
//第一次渲染 useState(42); //將age初始化為42 useState('banana'); //將fruit初始化為banana useState([{ text: 'Learn Hooks' }]); //... //第二次渲染 useState(42); //讀取狀態變數age的值(這時候傳的引數42直接被忽略) useState('banana'); //讀取狀態變數fruit的值(這時候傳的引數banana直接被忽略) useState([{ text: 'Learn Hooks' }]); //... |
假如我們改一下程式碼:
1 2 3 4 5 6 7 8 9 10 |
let showFruit = true; function ExampleWithManyStates() { const [age, setAge] = useState(42); if(showFruit) { const [fruit, setFruit] = useState('banana'); showFruit = false; } const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); |
這樣一來,
1 2 3 4 5 6 7 8 9 |
//第一次渲染 useState(42); //將age初始化為42 useState('banana'); //將fruit初始化為banana useState([{ text: 'Learn Hooks' }]); //... //第二次渲染 useState(42); //讀取狀態變數age的值(這時候傳的引數42直接被忽略) // useState('banana'); useState([{ text: 'Learn Hooks' }]); //讀取到的卻是狀態變數fruit的值,導致報錯 |
鑑於此,react規定我們必須把hooks寫在函式的最外層,不能寫在ifelse等條件語句當中,來確保hooks的執行順序一致。
什麼是Effect Hooks?
我們在上一節的例子中增加一個新功能:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // 類似於componentDidMount 和 componentDidUpdate: useEffect(() => { // 更新文件的標題 document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } |
我們對比著看一下,如果沒有hooks,我們會怎麼寫?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title = `You clicked ${this.state.count} times`; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } } |
我們寫的有狀態元件,通常會產生很多的副作用(side effect),比如發起ajax請求獲取資料,新增一些監聽的註冊和取消註冊,手動修改dom等等。我們之前都把這些副作用的函式寫在生命週期函式鉤子裡,比如componentDidMount,componentDidUpdate和componentWillUnmount。而現在的useEffect就相當與這些宣告周期函式鉤子的集合體。它以一抵三。
同時,由於前文所說hooks可以反覆多次使用,相互獨立。所以我們合理的做法是,給每一個副作用一個單獨的useEffect鉤子。這樣一來,這些副作用不再一股腦堆在生命週期鉤子裡,程式碼變得更加清晰。
useEffect做了什麼?
我們再梳理一遍下面程式碼的邏輯:
1 2 3 4 5 6 |
function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }); |
首先,我們宣告瞭一個狀態變數count
,將它的初始值設為0。然後我們告訴react,我們的這個元件有一個副作用。我們給useEffect
hook傳了一個匿名函式,這個匿名函式就是我們的副作用。在這個例子裡,我們的副作用是呼叫browser API來修改文件標題。當react要渲染我們的元件時,它會先記住我們用到的副作用。等react更新了DOM之後,它再依次執行我們定義的副作用函式。
這裡要注意幾點:
第一,react首次渲染和之後的每次渲染都會呼叫一遍傳給useEffect的函式。而之前我們要用兩個宣告周期函式來分別表示首次渲染(componentDidMount),和之後的更新導致的重新渲染(componentDidUpdate)。
第二,useEffect中定義的副作用函式的執行不會阻礙瀏覽器更新檢視,也就是說這些函式是非同步執行的,而之前的componentDidMount或componentDidUpdate中的程式碼則是同步執行的。這種安排對大多數副作用說都是合理的,但有的情況除外,比如我們有時候需要先根據DOM計算出某個元素的尺寸再重新渲染,這時候我們希望這次重新渲染是同步發生的,也就是說它會在瀏覽器真的去繪製這個頁面前發生。
useEffect怎麼解綁一些副作用
這種場景很常見,當我們在componentDidMount裡新增了一個註冊,我們得馬上在componentWillUnmount中,也就是元件被登出之前清除掉我們新增的註冊,否則記憶體洩漏的問題就出現了。
怎麼清除呢?讓我們傳給useEffect的副作用函式返回一個新的函式即可。這個新的函式將會在元件下一次重新渲染之後執行。這種模式在一些pubsub模式的實現中很常見。看下面的例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); function handleStatusChange(status) { setIsOnline(status.isOnline); } useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); // 一定注意下這個順序:告訴react在下次重新渲染元件之後,同時是下次呼叫ChatAPI.subscribeToFriendStatus之前執行cleanup return function cleanup() { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; } |
這裡有一個點需要重視!這種解綁的模式跟componentWillUnmount不一樣。componentWillUnmount只會在元件被銷燬前執行一次而已,而useEffect裡的函式,每次元件渲染後都會執行一遍,包括副作用函式返回的這個清理函式也會重新執行一遍。所以我們一起來看一下下面這個問題。
為什麼要讓副作用函式每次元件更新都執行一遍?
我們先看以前的模式:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
componentDidMount() { ChatAPI.subscribeToFriendStatus( this.props.friend.id, this.handleStatusChange ); } componentWillUnmount() { ChatAPI.unsubscribeFromFriendStatus( this.props.friend.id, this.handleStatusChange ); } |
很清除,我們在componentDidMount註冊,再在componentWillUnmount清除註冊。但假如這時候props.friend.id
變了怎麼辦?我們不得不再新增一個componentDidUpdate來處理這種情況:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
... componentDidUpdate(prevProps) { // 先把上一個friend.id解綁 ChatAPI.unsubscribeFromFriendStatus( prevProps.friend.id, this.handleStatusChange ); // 再重新註冊新但friend.id ChatAPI.subscribeToFriendStatus( this.props.friend.id, this.handleStatusChange ); } ... |
看到了嗎?很繁瑣,而我們但useEffect則沒這個問題,因為它在每次元件更新後都會重新執行一遍。所以程式碼的執行順序是這樣的:
1 2 3 4 5 6 7 8 |
1.頁面首次渲染 2.替friend.id=1的朋友註冊 3.突然friend.id變成了2 4.頁面重新渲染 5.清除friend.id=1的繫結 6.替friend.id=2的朋友註冊 ... |
怎麼跳過一些不必要的副作用函式
按照上一節的思路,每次重新渲染都要執行一遍這些副作用函式,顯然是不經濟的。怎麼跳過一些不必要的計算呢?我們只需要給useEffect傳第二個引數即可。用第二個引數來告訴react只有當這個引數的值發生改變時,才執行我們傳的副作用函式(第一個引數)。
1 2 3 |
useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // 只有當count的值發生變化時,才會重新執行`document.title`這一句 |
當我們第二個引數傳一個空陣列[]時,其實就相當於只在首次渲染的時候執行。也就是componentDidMount加componentWillUnmount的模式。不過這種用法可能帶來bug,少用。
還有哪些自帶的Effect Hooks?
除了上文重點介紹的useState和useEffect,react還給我們提供來很多有用的hooks:
useContext
useReducer
useCallback
useMemo
useRef
useImperativeMethods
useMutationEffect
useLayoutEffect
我不再一一介紹,大家自行去查閱官方文件。
怎麼寫自定義的Effect Hooks?
為什麼要自己去寫一個Effect Hooks? 這樣我們才能把可以複用的邏輯抽離出來,變成一個個可以隨意插拔的“插銷”,哪個元件要用來,我就插進哪個元件裡,so easy!看一個完整的例子,你就明白了。
比如我們可以把上面寫的FriendStatus元件中判斷朋友是否線上的功能抽出來,新建一個useFriendStatus的hook專門用來判斷某個id是否線上。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { useState, useEffect } from 'react'; function useFriendStatus(friendID) { const [isOnline, setIsOnline] = useState(null); function handleStatusChange(status) { setIsOnline(status.isOnline); } useEffect(() => { ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange); }; }); return isOnline; } |
這時候FriendStatus元件就可以簡寫為:
1 2 3 4 5 6 7 8 |
function FriendStatus(props) { const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; } |
簡直Perfect!假如這個時候我們又有一個朋友列表也需要顯示是否線上的資訊:
1 2 3 4 5 6 7 8 9 |
function FriendListItem(props) { const isOnline = useFriendStatus(props.friend.id); return ( <li style={{ color: isOnline ? 'green' : 'black' }}> {props.friend.name} </li> ); } |
簡直Fabulous!
結尾
不知道你閱讀完整篇文章的感受如何,或者對hooks有任何角度的看法和思考都歡迎在評論區一起討論。另外如果你有換工作的打算,我們部門真的很缺人,歡迎私信勾搭~(阿里巴巴,base在深圳的部門)