什麼是 Hooks
Hook 是 React 16.8 的新增特性。前端
Hooks 本質上就是一類特殊的函數，它們能夠爲你的函數型組件（function component）注入一些特殊的功能，讓您在不編寫類的狀況下使用 state(狀態) 和其餘 React 特性。react
爲何要使用 React Hooks
-
狀態邏輯難以複用： 業務變得複雜以後，組件之間共享狀態變得頻繁，組件複用和狀態邏輯管理就變得十分複雜。使用 redux 也會加大項目的複雜度和體積。 -
組成複雜難以維護： 複雜的組件中有各類難以管理的狀態和反作用，在同一個生命週期中你可能會由於不一樣狀況寫出各類不相關的邏輯，但實際上咱們一般但願一個函數只作一件事情。 -
類的 this 指向性問題： 咱們用 class 來建立 react 組件時，爲了保證 this 的指向正確，咱們要常常寫這樣的代碼： const that = this，或者是this.handleClick = this.handleClick.bind(this)>；一旦 this 使用錯誤，各類 bug 就隨之而來。
爲了解決這些麻煩，hooks 容許咱們使用簡單的特殊函數實現 class 的各類功能。web
useState
在 React 組件中，咱們常常要使用 state 來進行數據的實時響應，根據 state 的變化從新渲染組件更新視圖。redux
由於純函數不能有狀態，在 hooks 中，useState就是一個用於爲函數組件引入狀態（state）的狀態鉤子。小程序
const [state, setState] = useState(initialState);
useState 的惟一參數是狀態初始值（initial state），它返回了一個數組，這個數組的第[0]項是當前當前的狀態值，第[1]項是能夠改變狀態值的方法函數。數組
延遲初始化
initialState 參數是初始渲染期間使用的狀態。在隨後的渲染中，它會被忽略了。若是初始狀態是高開銷的計算結果，則能夠改成提供函數，該函數僅在初始渲染時執行：瀏覽器
function Counter({initialCount = 0}) {
// 初始值爲1
const [count, setCount] = useState(() => initialCount + 1);
return (
<>
Count: {count}
<button onClick={() => setCount(0)}>Reset</button>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
</>
);
}
函數式更新對比普通更新
若是須要使用前一時刻的 state(狀態) 計算新 state(狀態) ，則能夠將 函數 傳遞給 setState 。該函數將接收先前 state 的值，並返回更新的 state。服務器
那麼setCount(newCount)和setCount(preCount => newCount)有什麼區別呢，咱們寫個例子來看下：微信
function Counter() {
const [count, setCount] = useState(0);
function add() {
setTimeout(() => {
setCount(count + 1);
}, 3000);
}
function preAdd(){
setTimeout(() => {
// 根據前一時刻的 count 設置新的 count
setCount(count => count + 1);
}, 3000);
}
// 監聽 count 變化
useEffect(() => {
console.log(count)
}, [count])
return (
<>
Count: {count}
<button onClick={add}>add</button>
<button onClick={preAdd}>preAdd</button>
</>
);
}
咱們首先快速點擊 add 按鈕三次，三秒後 count 變爲 1；而後快速點擊 preAdd 三下，三秒後依次出現了 二、三、4。測試結果以下：閉包
爲何setCount(count + 1)好像只執行了一次呢，由於每次更新都是獨立的閉包，當點擊更新狀態的時候，函數組件都會從新被調用。 快速點擊時，當前 count 爲 0，即每次點擊傳入的值都是相同的，那麼獲得的結果也是相同的，最後 count 變爲 1 後再也不變化。
爲何setCount(count => count + 1)好像能執行三次呢，由於當傳入一個函數時，回調函數將接收當前的 state，並返回一個更新後的值。 三秒後，第一次setCount獲取到最新的 count 爲 1，而後執行函數將 count 變爲 2，接着第二次獲取到當前 count 爲 2，執行函數將 count 變爲了 3。每次獲取到的最新 count 不同，最後結果天然也不一樣。
那麼進行第二次實驗，我先快速點擊 preAdd 三下，而後接着快速點擊 add 按鈕三次，三秒後結果會怎麼樣呢。根據以上結論猜想，preAdd 是根據最新值，因此 count 依次變爲 一、二、3，而後 add 是傳入的當前 count 爲 0，最後變爲 1。最後結果應該是 一、二、三、1，測試結果正確：
useReducer
const [state, dispatch] = useReducer(reducer, initialState, initialFunc);
useReducer 能夠接受三個參數，第一個參數接收一個形如(state, action) => newState 的 reducer 純函數，使用時能夠經過dispatch(action)來修改相關邏輯。
第二個參數是 state 的初始值，它返回當前 state 以及發送 action 的 dispatch 函數。
你能夠選擇惰性地建立初始 state，爲此，須要將 init 函數做爲 useReducer 的第三個參數傳入，這樣初始 state 將被設置爲 init(initialArg)。
對比 useState 的優點
useReducer 是 React 提供的一個高級 Hook，它不像 useEffect、useState 等 hook 同樣必須，那麼使用它有什麼好處呢？若是使用 useReducer 改寫一下計數器例子:
//官方示例
function countReducer(state, action) {
switch (action.type) {
case 'add':
return state + 1;
case 'minus':
return state - 1;
default:
return state;
}
}
function initFunc(initialCount) {
return initialCount + 1;
}
function Counter({initialCount = 0}) {
const [count, dispatch] = useReducer(countReducer, initialCount, initFunc);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => { dispatch({ type: 'add' }); }} >
點擊+1
</button>
<button onClick={() => { dispatch({ type: 'minus' }); }} >
點擊-1
</button>
</div>
);
}
對比 useState 可知，看起來咱們的代碼好像變得複雜了，但實際應用到複雜的項目環境中，將狀態管理和代碼邏輯放到一塊兒管理，使咱們的代碼具備更好的可讀性、可維護性和可預測性。
useEffect
useEffect(create, deps);
useEffect()用來引入具備反作用的操做，最多見的就是向服務器請求數據。該 Hook 接收一個函數，該函數會在組件渲染到屏幕以後才執行。
和 react 類的生命週期相比，useEffect Hook 能夠當作 componentDidMount，componentDidUpdate 和 componentWillUnmount 的組合。默認狀況下，react 首次渲染和以後的每次渲染都會調用一遍傳給 useEffect 的函數。
useEffect 的性能問題
由於 React 首次渲染和以後的每次渲染都會調用一遍傳給 useEffect 的函數，因此大多數狀況下頗有可能會產生性能問題。
爲了解決這個問題，能夠將數組做爲可選的第二個參數傳遞給 useEffect。數組中可選擇性寫 state 中的數據，表明只有當數組中的 state 發生變化是才執行函數內的語句，以此能夠使用多個useEffect分離函數關注點。若是是個空數組，表明只執行一次，相似於 componentDidUpdata。
解綁反作用
在 React 類中，常常會須要在組件卸載時作一些事情，例如移除監聽事件等。在 class 組件中，咱們能夠在 componentWillUnmount 這個生命週期中作這些事情，而在 hooks 中，咱們能夠經過 useEffect 第一個函數中 return 一個函數來實現相同效果。如下是一個簡單的清除定時器例子：
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(count => count + 1);
}, 1000);
return () => clearInterval(timer);
}, []);
return (
<>
Count: {count}
</>
);
}
useLayoutEffect
useLayoutEffect(create, deps);
它和 useEffect 的結構相同，區別只是調用時機不一樣。
-
useEffect 在渲染時是異步執行，要等到瀏覽器將全部變化渲染到屏幕後纔會被執行。 -
useLayoutEffect 會在 瀏覽器 layout 以後，painting 以前執行， -
可使用 useLayoutEffect 來讀取 DOM 佈局並同步觸發重渲染 -
儘量使用標準的 useEffect 以免阻塞視圖更新
useEffect 和 useLayoutEffect 的差異
爲了更清晰的對比 useEffect 和 useLayoutEffect，咱們寫個 demo 來看看兩種 hook 的效果：
function Counter() {
function delay(ms){
const startTime = new Date().getTime();
while (new Date().getTime() < startTime + ms);
}
const [count, setCount] = useState(0);
// useLayoutEffect(() => {
// console.log('useLayoutEffect:', count)
// return () => console.log('useLayoutEffectDestory:', count)
// }, [count]);
useEffect(() => {
console.log('useEffect:', count)
// 延長一秒看效果
if(count === 5) {
delay(1000)
setCount(count => count + 1)
}
return () => console.log('useEffectDestory:', count)
}, [count]);
return (
<>
Count: {count}
<button onClick={() => setCount(5)}>set</button>
</>
);
}
首先咱們先看看 useEffect 的執行效果：
useEffect 和 useEffectDestroy 的執行順序也很好理解，先執行了 useEffectDestroy 銷燬了 0，而後在 useEffect 修改 count 爲 5，這時，count 可見已經變成了 5，而後銷燬 5，設置 count 爲 6，而後渲染 6。
整個渲染過程能夠很明顯的看到 count 0->5->6 的過程，若是在實際項目中，這種狀況會出現閃屏效果，很影響用戶體驗。由於useEffect 在渲染時是異步執行，而且要等到瀏覽器將全部變化渲染到屏幕後纔會被執行，因此，咱們儘可能不要在 useEffect 裏面進行 DOM 操做。
再將 setCount 操做放到 useLayoutEffect 裏的執行看看效果：
useLayoutEffect 和 useLayoutEffectDestroy 的執行順序和 useEffect 同樣，都是在下一次操做以前先銷燬，可是整個渲染過程和 useEffect 明顯不同。雖然在打印的 useLayoutEffect 中有明顯停頓，但在渲染過程只能看到 count 0->6 的過程，這是由於 useLayoutEffect 的同步特性，會在瀏覽器渲染以前同步更新 DOM 數據，哪怕是屢次的操做，也會在渲染前一次性處理完，再交給瀏覽器繪製。這樣不會致使閃屏現象發生，可是會阻塞視圖的更新。。
最後，咱們同時看看兩個 setCout 分別在兩個 hook 的執行時機;
在 useEffect 執行效果：
在 useLayoutEffect 執行效果：
咱們能夠發現不管在哪兒執行 setCount，hooks 的前後順序都不變，始終是先 useLayoutEffect 銷燬，而後 useLayoutEffect 執行，再而後纔是 useEffect 銷燬，useEffect 執行。可是頁面渲染的不一樣和打印時的明顯卡頓，咱們知道 hooks 的執行時機應該是useLayoutEffectDestory -> useLayoutEffect -> 渲染 -> useEffectDestory -> useEffect。
useMemo
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
把「建立」函數和依賴項數組做爲參數傳入 useMemo，它僅會在某個依賴項改變時才從新計算 memoized 值。這種優化有助於避免在每次渲染時都進行高開銷的計算。
useMemo 和 useEffect 的區別
useMemo 看起來和 useEffect 很像，可是若是你想在 useMemo 裏面 setCount 或者其餘修改了 DOM 的操做，那你可能會遇到一些問題。由於傳入 useMemo 的函數會在渲染期間執行，你可能看不到想要的效果，因此請不要在這個函數內部執行與渲染無關的操做。
useMemo 還返回一個 memoized 值，以後僅會在某個依賴項改變時才從新計算 memoized 值。這種優化有助於避免在每次渲染時都進行高開銷的計算，具體應用看如下例子：
function Counter() {
const [count, setCount] = useState(1);
const [val, setValue] = useState('');
const getNum = () => {
console.log('compute');
let sum = 0;
for (let i = 0; i < count * 100; i++) {
sum += i;
}
return sum;
}
const memoNum = useMemo(() => getNum(), [count])
return <div>
<h4>總和：{getNum()} {memoNum}</h4>
<div>
<button onClick={() => setCount(count + 1)}>+1</button>
<input value={val} onChange={event => setValue(event.target.value)}/>
</div>
</div>;
}
useMemo 效果：
正常狀況下，當你在 input 框輸入時，由於修改了 val，因此頁面會從新渲染，那麼就須要從新計算 getNum，但使用 useMemo 後，由於依賴的 count 沒變，則 memoNum 不會從新計算。
useCallback
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
返回一個 memoized 回調函數。
把內聯回調函數及依賴項數組做爲參數傳入 useCallback，它將返回該回調函數的 memoized 版本，該回調函數僅在某個依賴項改變時纔會更新。當你把回調函數傳遞給通過優化的並使用引用相等性去避免非必要渲染（例如 shouldComponentUpdate）的子組件時，它將很是有用。
useCallback(fn, deps)至關於useMemo(() => fn, deps)。
useRef
const refContainer = useRef(initialValue);
-
類組件、React 元素用 React.createRef，函數組件使用 useRef -
useRef 返回一個可變的 ref 對象，其 current 屬性被初始化爲傳入的參數（initialValue -
useRef 返回的 ref 對象在組件的整個生命週期內保持不變，也就是說每次從新渲染函數組件時，返回的 ref 對象都是同一個（使用 React.createRef ，每次從新渲染組件都會從新建立 ref）
// 官網例子
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` 指向已掛載到 DOM 上的文本輸入元素
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
useImperativeHandle
useImperativeHandle(ref, createHandle, [deps])
useImperativeHandle 可讓你在使用 ref 時自定義暴露給父組件的實例值。
以下，渲染 <FancyInput ref={inputRef} /> 的父組件能夠調用 inputRef.current.focus()：
// 官網例子
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);
useContext
在 hooks 中，組件都是函數，因此咱們能夠經過參數的方式進行傳值，可是有時候咱們也會遇到兄弟組件和爺孫組件之間的傳值，這時候經過函數參數傳值就不太方便了。hooks 提供了 useContext（共享狀態鉤子）來解決這個問題。
useContext 接受一個 context 對象（從 React.createContext 返回的值）並返回當前 context 值，由最近 context 提供程序給 context 。
當組件上層最近的 <Context.Provider> 更新時，該 Hook 會觸發重渲染，並使用最新傳遞給 Context provider 的 context value 值。
在 hooks 中使用 content，須要使用 createContext，useContext：
// context.js 新建一個context
import { createContext } from 'react';
const AppContext = React.createContext({});
// HooksContext.jsx 父組件，提供context
import React, { useState } from 'react';
import AppContext from './context';
function HooksContext() {
const [count, setCnt] = useState(0);
const [age, setAge] = useState(16);
return (
<div>
<p>年齡{age}</p>
<p>你點擊了{count}次</p>
<AppContext.Provider value={{ count, age }}>
<div className="App">
<Navbar />
<Messages />
</div>
</AppContext.Provider>
</div>
);
}
// 子組件，使用context
import React, { useContext } from 'react';
import AppContext from './context';
const Navbar = () => {
const { count, age } = useContext(AppContext);
return (
<div className="navbar">
<p>使用context</p>
<p>年齡{age}</p>
<p>點擊了{count}次</p>
</div>
);
}
構建自定義 Hook
當咱們想要在兩個 JavaScript 函數之間共享邏輯時，咱們會將共享邏輯提取到第三個函數。組件和 Hook 都是函數，因此經過這種辦法能夠調用其餘 Hook。
例如，咱們能夠把判斷朋友是否在線的功能抽出來，新建一個 useFriendStatus 的 hook 專門用來判斷某個 id 是否在線：
// 官網例子
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 組件的地方隨心所欲、隨心所欲：
function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}
簡單總結
| hook | 功能 |
|---|---|
| useState | 設置和改變 state，代替原來的 state 和 setState |
| useReducer | 代替原來 redux 裏的 reducer，方便管理狀態邏輯 |
| useEffect | 引入具備反作用的操做，類比原來的生命週期 |
| useLayoutEffect | 與 useEffect 做用相同，但它會同步調用 effect |
| useMemo | 可根據狀態變化控制方法執行，優化無用渲染，提升性能 |
| useCallback | 相似 useMemo，useMemo 優化傳值，usecallback 優化傳入的方法 |
| useContext | 上下文爺孫組件及更深層組件傳值 |
| useRef | 返回一個可變的 ref 對象 |
| useImperativeHandle | 可讓你在使用 ref 時自定義暴露給父組件的實例值 |
參考文章
React Hooks
React Hooks 入門教程 - 阮一峯
React Hooks 詳解 【近 1W 字】+ 項目實戰
● JavaScript 測試系列實戰（四）：掌握 React Hooks 測試技巧
·END·
匯聚精彩的免費實戰教程
喜歡本文，點個「在看」告訴我
本文分享自微信公衆號 - 圖雀社區（tuture-dev）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。