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值的函數；0：count的初始值 return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );} |
useState是react自帶的一個hook函數，它的作用就是用來聲明狀態變量。useState這個函數接收的參數是我們的狀態初始值（initial state），它返回了一個數組，這個數組的第[0]項是當前當前的狀態值，第[1]項是可以改變狀態值的方法函數。
所以我們做的事情其實就是，聲明了一個狀態變量count，把它的初始值設為0，同時提供了一個可以更改count的函數setCount。
當用戶點擊按鈕時，我們調用setCount函數，這個函數接收的參數是修改過的新狀態值。接下來的事情就交給react了，react將會重新渲染我們的Example組件，
假如一個組件有多個狀態值怎么辦？
首先，useState是可以多次調用的，所以我們完全可以這樣寫：
|
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接收的初始值沒有規定一定要是string/number/boolean這種簡單數據類型，它完全可以接收對象或者數組作為參數。唯一需要注意的點是，之前我們的this.setState做的是合并狀態后返回一個新狀態，而useState是直接替換老狀態后返回新狀態。
hook，一方面它是直接用在function當中，而不是class；另一方面每一個hook都是相互獨立的，不同組件調用同一個hook也能保證各自狀態的獨立性。
react是怎么保證多個useState的相互獨立的？
答案是，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' }]); //... |
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就相當與這些聲明周期函數鉤子的集合體。它以一抵三。
useEffect怎么解綁一些副作用?
傳給useEffect的副作用函數返回一個新的函數即可。這個新的函數將會在組件下一次重新渲染之后執行。
|
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';} |
怎么跳過一些不必要的副作用函數?
按照上一節的思路，每次重新渲染都要執行一遍這些副作用函數，顯然是不經濟的。怎么跳過一些不必要的計算呢？我們只需要給useEffect傳第二個參數即可。用第二個參數來告訴react只有當這個參數的值發生改變時，才執行我們傳的副作用函數（第一個參數）。
|
1
2
3
|
useEffect(() => { document.title = `You clicked ${count} times`;}, [count]); // 只有當count的值發生變化時，才會重新執行`document.title`這一句 |
當我們第二個參數傳一個空數組[]時，其實就相當于只在首次渲染的時候執行。也就是componentDidMount加componentWillUnmount的模式。不過這種用法可能帶來bug，少用。
還有哪些自帶的Effect Hooks?
useContext
useReducer
useCallback
useMemo
useRef
useImperativeMethods
useMutationEffect
useLayoutEffect
怎么寫自定義的Effect Hooks?
為什么要自己去寫一個Effect Hooks? 這樣我們才能把可以復用的邏輯抽離出來，變成一個個可以隨意插拔的“插銷”，哪個組件要用來，我就插進哪個組件里
比如我們可以把上面寫的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';} |
假如這個時候我們又有一個朋友列表也需要顯示是否在線的信息：
|
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> );} |
這樣就實現了組件復用。
taro hooks
在 Taro 中使用 Hooks API 很簡單，Taro 的專有 Hooks（例如 usePageScroll, useReachBottom）從 @tarojs/taro 中引入，框架自己的 Hooks （例如 useEffect, useState）從對應的框架引入。
|
1
2
|
import { usePageScroll, useReachBottom } from '@tarojs/taro' // Taro 專有 Hooksimport { useState, useEffect } from 'react' // 框架 Hooks （基礎 Hooks） |
到此這篇關于react hooks入門詳細教程的文章就介紹到這了,更多相關react hooks入門內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_44987713/article/details/115401158
