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);//count:聲明的變量；setCount：改變count值的函數(shù)；0：count的初始值 return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );} |
useState是react自帶的一個(gè)hook函數(shù)，它的作用就是用來(lái)聲明狀態(tài)變量。useState這個(gè)函數(shù)接收的參數(shù)是我們的狀態(tài)初始值（initial state），它返回了一個(gè)數(shù)組，這個(gè)數(shù)組的第[0]項(xiàng)是當(dāng)前當(dāng)前的狀態(tài)值，第[1]項(xiàng)是可以改變狀態(tài)值的方法函數(shù)。
所以我們做的事情其實(shí)就是，聲明了一個(gè)狀態(tài)變量count，把它的初始值設(shè)為0，同時(shí)提供了一個(gè)可以更改count的函數(shù)setCount。
當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)，我們調(diào)用setCount函數(shù)，這個(gè)函數(shù)接收的參數(shù)是修改過(guò)的新?tīng)顟B(tài)值。接下來(lái)的事情就交給react了，react將會(huì)重新渲染我們的Example組件，
假如一個(gè)組件有多個(gè)狀態(tài)值怎么辦？
首先，useState是可以多次調(diào)用的，所以我們完全可以這樣寫(xiě)：
|
1
2
3
4
5
|
function ExampleWithManyStates() { const [age, setAge] = useState(42); const [fruit, setFruit] = useState('banana'); const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);} |
其次，useState接收的初始值沒(méi)有規(guī)定一定要是string/number/boolean這種簡(jiǎn)單數(shù)據(jù)類(lèi)型，它完全可以接收對(duì)象或者數(shù)組作為參數(shù)。唯一需要注意的點(diǎn)是，之前我們的this.setState做的是合并狀態(tài)后返回一個(gè)新?tīng)顟B(tài)，而useState是直接替換老狀態(tài)后返回新?tīng)顟B(tài)。
hook，一方面它是直接用在function當(dāng)中，而不是class；另一方面每一個(gè)hook都是相互獨(dú)立的，不同組件調(diào)用同一個(gè)hook也能保證各自狀態(tài)的獨(dú)立性。
react是怎么保證多個(gè)useState的相互獨(dú)立的？
答案是，react是根據(jù)useState出現(xiàn)的順序來(lái)定的。我們具體來(lái)看一下
|
1
2
3
4
5
6
7
8
9
|
//第一次渲染 useState(42); //將age初始化為42 useState('banana'); //將fruit初始化為banana useState([{ text: 'Learn Hooks' }]); //... //第二次渲染 useState(42); //讀取狀態(tài)變量age的值（這時(shí)候傳的參數(shù)42直接被忽略） useState('banana'); //讀取狀態(tài)變量fruit的值（這時(shí)候傳的參數(shù)banana直接被忽略） useState([{ text: 'Learn Hooks' }]); //... |
react規(guī)定我們必須把hooks寫(xiě)在函數(shù)的最外層，不能寫(xiě)在ifelse等條件語(yǔ)句當(dāng)中，來(lái)確保hooks的執(zhí)行順序一致。
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); // 類(lèi)似于componentDidMount 和 componentDidUpdate: useEffect(() => { // 更新文檔的標(biāo)題 document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );} |
假如不用hooks,我們會(huì)怎么寫(xiě)?
|
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> ); }} |
我們寫(xiě)的有狀態(tài)組件，通常會(huì)產(chǎn)生很多的副作用（side effect），比如發(fā)起ajax請(qǐng)求獲取數(shù)據(jù)，添加一些監(jiān)聽(tīng)的注冊(cè)和取消注冊(cè)，手動(dòng)修改dom等等。我們之前都把這些副作用的函數(shù)寫(xiě)在生命周期函數(shù)鉤子里，比如componentDidMount，componentDidUpdate和componentWillUnmount。而現(xiàn)在的useEffect就相當(dāng)與這些聲明周期函數(shù)鉤子的集合體。它以一抵三。
useEffect怎么解綁一些副作用?
傳給useEffect的副作用函數(shù)返回一個(gè)新的函數(shù)即可。這個(gè)新的函數(shù)將會(huì)在組件下一次重新渲染之后執(zhí)行。
|
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); // 一定注意下這個(gè)順序：告訴react在下次重新渲染組件之后，同時(shí)是下次調(diào)用ChatAPI.subscribeToFriendStatus之前執(zhí)行cleanup return function cleanup() { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline';} |
怎么跳過(guò)一些不必要的副作用函數(shù)?
按照上一節(jié)的思路，每次重新渲染都要執(zhí)行一遍這些副作用函數(shù)，顯然是不經(jīng)濟(jì)的。怎么跳過(guò)一些不必要的計(jì)算呢？我們只需要給useEffect傳第二個(gè)參數(shù)即可。用第二個(gè)參數(shù)來(lái)告訴react只有當(dāng)這個(gè)參數(shù)的值發(fā)生改變時(shí)，才執(zhí)行我們傳的副作用函數(shù)（第一個(gè)參數(shù)）。
|
1
2
3
|
useEffect(() => { document.title = `You clicked ${count} times`;}, [count]); // 只有當(dāng)count的值發(fā)生變化時(shí)，才會(huì)重新執(zhí)行`document.title`這一句 |
當(dāng)我們第二個(gè)參數(shù)傳一個(gè)空數(shù)組[]時(shí)，其實(shí)就相當(dāng)于只在首次渲染的時(shí)候執(zhí)行。也就是componentDidMount加componentWillUnmount的模式。不過(guò)這種用法可能帶來(lái)bug，少用。
還有哪些自帶的Effect Hooks?
useContext
useReducer
useCallback
useMemo
useRef
useImperativeMethods
useMutationEffect
useLayoutEffect
怎么寫(xiě)自定義的Effect Hooks?
為什么要自己去寫(xiě)一個(gè)Effect Hooks? 這樣我們才能把可以復(fù)用的邏輯抽離出來(lái)，變成一個(gè)個(gè)可以隨意插拔的“插銷(xiāo)”，哪個(gè)組件要用來(lái)，我就插進(jìn)哪個(gè)組件里
比如我們可以把上面寫(xiě)的FriendStatus組件中判斷朋友是否在線的功能抽出來(lái)，新建一個(gè)useFriendStatus的hook專(zhuān)門(mén)用來(lái)判斷某個(gè)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;} |
這時(shí)候FriendStatus組件就可以簡(jiǎn)寫(xiě)為：
|
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';} |
假如這個(gè)時(shí)候我們又有一個(gè)朋友列表也需要顯示是否在線的信息：
|
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> );} |
這樣就實(shí)現(xiàn)了組件復(fù)用。
taro hooks
在 Taro 中使用 Hooks API 很簡(jiǎn)單，Taro 的專(zhuān)有 Hooks（例如 usePageScroll, useReachBottom）從 @tarojs/taro 中引入，框架自己的 Hooks （例如 useEffect, useState）從對(duì)應(yīng)的框架引入。
|
1
2
|
import { usePageScroll, useReachBottom } from '@tarojs/taro' // Taro 專(zhuān)有 Hooksimport { useState, useEffect } from 'react' // 框架 Hooks （基礎(chǔ) Hooks） |
到此這篇關(guān)于react hooks入門(mén)詳細(xì)教程的文章就介紹到這了,更多相關(guān)react hooks入門(mén)內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_44987713/article/details/115401158
