帶你快速瞭解React Hooks

什麼是Hooks

Hook 是 React 16.8 的新增特性。

Hooks本質上就是一類特殊的函數，它們能夠爲你的函數型組件（function component）注入一些特殊的功能，讓您在不編寫類的狀況下使用 state(狀態) 和其餘 React 特性。

爲何要使用 React Hooks

• 狀態邏輯難以複用： 業務變得複雜以後，組件之間共享狀態變得頻繁，組件複用和狀態邏輯管理就變得十分複雜。使用redux也會加大項目的複雜度和體積。
• 組成複雜難以維護： 複雜的組件中有各類難以管理的狀態和反作用，在同一個生命週期中你可能會由於不一樣狀況寫出各類不相關的邏輯，但實際上咱們一般但願一個函數只作一件事情。
• 類的this指向性問題： 咱們用class來建立react組件時，爲了保證this的指向正確，咱們要常常寫這樣的代碼：const that = this，或者是this.handleClick = this.handleClick.bind(this)>；一旦this使用錯誤，各類bug就隨之而來。

爲了解決這些麻煩，hooks 容許咱們使用簡單的特殊函數實現class的各類功能。

useState

在 React 組件中，咱們常常要使用 state 來進行數據的實時響應，根據 state 的變化從新渲染組件更新視圖。

由於純函數不能有狀態，在 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 字】+ 項目實戰

福利部分

文章在 「大轉轉FE」 公衆號也會發送，而且公衆號有抽獎活動，本文獎品是轉轉記念T恤一件，歡迎你們關注 ✿✿ヽ(°▽°)ノ✿