React hooks實戰總結

作者：懶懶的技術宅 2019-08-20 15:16:26

可能大部分同學對hooks特性都有了自己的了解，但是在實際項目中使用又是另一回事了，實踐出真知，這篇文章是自己對react hooks的理解，也是在上一個項目中使用react hooks的總結。

一、什么是hooks？

react 于19年2月份在16.8版本中新增了hook這一特性，已經過去了半年多了，社區的各種文章解析頁汗牛充棟，本文將結合自己的項目實踐，對react hooks做一個全面的講解，俗話說沒吃過豬肉，還沒見過豬跑嗎？確實，可能大部分同學對hooks特性都有了自己的了解，但是在實際項目中使用又是另一回事了，實踐出真知，這篇文章是自己對react hooks的理解，也是在上一個項目中使用react hooks的總結

看著豬跑一千次，不如自己吃一次豬肉。

官方解釋： hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。
個人理解：讓傳統的函數組件function component有內部狀態state的函數function。

二、為什么需要hooks？

在以往的react開發流程中，我們的自定義組件通常需要定義幾個生命周期函數，在不同的生命周期處理各自的業務邏輯，有可能他們是重復的。
解決上一個問題我們通常通過 mixins（不推薦）或者 HOC 實現，在hooks出現之前，的確是非常好的解決途徑，但是它不夠好，為什么這么說呢？來看一下我們的一個具有中英文切換，主題切換同時connect一些redux 狀態倉庫里面的數據的全局組件alert:

export default translate('[index,tips]')(withStyles(styles, { withTheme: true })(connect(mapStateToProps,mapDispatchToProps)(Alert)));

其實如果我們還可以將 `withTheme`也提取成一個高階函數，那么我們的組件就將由現在的3層變成4層，實際使用的時候可能還有別的屬性通過別的高階函數添加，嵌套層級就會更深。給人明顯的感覺就是不夠直觀。

this指向問題，react綁定this有幾種方式？哪一種方式性能相對來說好一些？

如果你答不上來，可以戳一下下面兩個鏈接。

React事件處理。
React.js綁定this的5種方法。
hook 只能在FunctionComponent內部使用,而相比ClassComponent，傳統的FunctionComponent(FC)具有更多的優勢,具體體現在：
- FC 容易測試，相同的輸入總是有相同的輸出，
- FC 其實就是普通的javascript函數，相比于ClassComponent，具有潛在的更好的性能。
- FC 沒有生命周期函數，更容易debug。
- FC 具有更好的可重用性。
- FC 可以減少代碼耦合。
- September 10th, 2018 Comments React Functional or Class Components: Everything you need to know。
- 45% Faster React Functional Components, Now。
- FC有更多的優勢，但是他沒有生命周期，也沒有自己的內部狀態，我們需要復雜的狀態管理機制的時候，不得不轉向ClassComponent。 FC現有的這些問題，我們能輕松結合hook解決。

三、useState hook 的執行過程追蹤

React目前官方支持的hook有三個基礎Hook：

useState,

useEffect,

useContext,

和幾個額外的 Hook：

useReducer,

useCallback,

useMemo,

useRef,

useImperativeHandle,

useLayoutEffect,

useDebugValue ,

他們的作用各不相同，但是可以這么總結一下：讓Function Component有狀態(state)，流氓不可怕，就怕流氓有文化。當我們給比較有優勢的FC 插上state的翅膀之后，他就要起飛了。原來ClassComponent能干的事情他也能干起來了，加上前文分析的優勢，還干的更加有聲有色。這里我們使用useState做一個全面的解析,

首先我們來看一下一個簡單的的計數器，點擊click 按鈕，state加1并渲染到頁面上：

ClassComponent實現：

import React from 'react';  
interface ITestState {  
    count: number;  
}  
class Test extends React.Component<{}, ITestState> {  
    constructor(props: {}) {  
        super(props);  
        this.state = {  
            count: 0  
        };  
    } 
     public handleClick = () => {  
        const { count } = this.state;  
        this.setState({ count: count + 1 });  
    }  
    public render() {  
        return (  
            <>  
                <div>{this.state.count}</div>  
                <button onClick={this.handleClick}>click</button>  
            </>  
        );  
    }  
}  
export default Test;

hooks實現:

import React, { useState } from 'react';  
   const Test: React.FunctionComponent<{}> = () => {  
       const [count, setCount] = useState<number>(0);  
       return (  
           <>  
               <div>{count}</div>  
               <button onClick={() => setCount(count + 1)}>click</button>  
           </>  
       );  
   };  
   export default Test;

對比兩種實現，直觀感受是代碼變少了，沒錯，也不用關心this指向了，ClassComponent里面通過class fields正確綁定回調函數的this指向，使得我們在handleClick函數中能正確的訪問this，并調用this.setState方法更新state。

public handleClick = () => {  
              const { count } = this.state;  
              this.setState({ count: count + 1 });  
          }

深入源碼分析hooks,這里我們以剛使用過的hook useState為例，看看他是怎么管理我們的FC state的。

export function useState<S>(initialState: (() => S) | S) {  
       const dispatcher = resolveDispatcher();  
       return dispatcher.useState(initialState);  
   }

這個函數接收一個參數initialState: (() => S) | S,初始state的函數或者我們的state初始值。

然后調用

dispatcher.useState(initialState);,這里我們看一下dispatcher是怎么來的：  
  function resolveDispatcher() {  
      const dispatcher = ReactCurrentDispatcher.current; 
      ...  
      return dispatcher;  
  }

發現是通過ReactCurrentDispatcher.current得到，那ReactCurrentDispatcher又是何方神圣呢？

我們進一步看看它怎么來的

import type {Dispatcher} from 'react-reconciler/src/ReactFiberHooks';  
   const ReactCurrentDispatcher = {  
       current: (null: null | Dispatcher),  
   };  
   export default ReactCurrentDispatcher;

根據type，我們可以判斷dispatcher的類型是react-reconciler/src/ReactFiberHooks里面定義的Dispatcher,可以看到這個current屬性是個null。那它是什么時候被賦值的呢？

我們來看看functionComponent的render過程renderWithHooks，

export function renderWithHooks(  
        current: Fiber | null,  
        workInProgress: Fiber,  
        Component: any,  
        props: any,  
        refOrContext: any,  
        nextRenderExpirationTime: ExpirationTime,  
    ): any{  
        ....  
        if (__DEV__) {  
            ReactCurrentDispatcher.current = HooksDispatcherOnMountInDEV;  
        } else {  
            ReactCurrentDispatcher.current =  
            nextCurrentHook === null  
                ? HooksDispatcherOnMount  
                : HooksDispatcherOnUpdate;  
        }  
    }

這里react源碼根據nextCurrentHook做了一些判斷，我移除掉了，只關注ReactCurrentDispatcher.current的值，可以看到它的取值分為兩種，HooksDispatcherOnMount和 HooksDispatcherOnUpdate分別對應mount/update兩個組件狀態;這里我們先看HooksDispatcherOnMount：

const HooksDispatcherOnMount: Dispatcher = {  
   ...  
   useState: mountState,  
   ...  
   };

這就是我們尋尋覓覓的Dispatcher的長相，最終我們useState在組件mount的時候執行的就是這個mountState了，那我們就迫不及待如饑似渴的來看看mountState又做了什么吧。

function mountState<S>(  
  initialState: (() => S) | S,  
  ): [S, Dispatch<BasicStateAction<S>>] {  
  const hook = mountWorkInProgressHook();  
  if (typeof initialState === 'function') {  
      initialStateinitialState = initialState();  
  }  
  hookhook.memoizedState = hook.baseState = initialState;  
  const queue = (hook.queue = {  
      last: null,  
      dispatch: null,  
      lastRenderedReducer: basicStateReducer,  
      lastRenderedState: (initialState: any),  
  });  
  const dispatch: Dispatch<  
      BasicStateAction<S>,  
  > = (queue.dispatch = (dispatchAction.bind(  
      null,  
      // Flow doesn't know this is non-null, but we do.  
      ((currentlyRenderingFiber: any): Fiber),  
      queue,  
  ): any));  
  return [hook.memoizedState, dispatch];  
  }

進入這個函數首先執行的mountWorkInProgressHook()獲取到當前的workInProgressHook,看這個名字就知道他是和workInProgress分不開了，這個workInProgress代表了當前正在處理的fiber，fiber是當前組件的需要完成或者已經完成的work的對象,也可以理解為我們的這個正在執行mountState的組件的各種數據和狀態的集合。我們來具體的看一下mountWorkInProgressHook的執行邏輯：

function mountWorkInProgressHook(): Hook {  
      const hook: Hook = {  
          memoizedState: null,  
          baseState: null,  
          queue: null,  
          baseUpdate: null,  
          next: null,  
      };  
      if (workInProgressHook === null) {  
      // This is the first hook in the list  
          firstWorkInProgressHook = workInProgressHook = hook;  
      } else {  
      // Append to the end of the list  
          workInProgressHookworkInProgressHook = workInProgressHook.next = hook;  
      }  
      return workInProgressHook;  
  }

判斷當前fiber的workInProgressHook是不是null，如果是，將全新的hook賦值給全局的workInProgressHook和firstWorkInProgressHook，否則，將初始值賦值給workInProgressHook。相當于mountState里面的hook值就是

const hook: Hook = {  
           memoizedState: null,  
           baseState: null,  
           queue: null,  
           baseUpdate: null,  
           next: null,  
       };

實際上，workInProgressHook是這樣的一個鏈表結構，React里面廣泛使用了這樣的結構存儲副作用。

{  
        memoizedState: null,  
        baseState: null,  
        queue: null,  
        baseUpdate: null,  
        next: {  
            ...  
            next: {  
                ...  
                next: {  
                    next: {...},  
                    ...  
                },  
            },  
        }  
    }

繼續往下看：

if (typeof initialState === 'function') {  
        initialStateinitialState = initialState();  
    }  
    hookhook.memoizedState = hook.baseState = initialState;

useState接收的參數類型如果是函數，這里就會執行傳進來的函數獲取initialState，賦值給hook.memoizedState = hook.baseState這兩個屬性，再往下，建立了當前hook的更新隊列queue:<UpdateQueue>，這個我們后續再講，這里暫時不用知道。繼續往下看，是我們修改state的回調函數，通常是setState，通過改變dispatchAction的this指向，將當前render的fiber和上面創建的queue作為參數傳入，當我們執行setState的時候實際上調用的就是這里的dispatchAction，最后一行：

return [hook.memoizedState, dispatch];

將state和setState以數組的形式返回，這也是我們使用useState hook的正確姿勢。到這里相信大家都很清楚了，useState通過將我們的初始state暫存到workInProgressHook的memoizedState中，每次更新的時候通過dispatchAction更新workInProgressHook。

我們回過頭來再看看剛才沒深入過的queue，通過類型我們可以知道他是<UpdateQueue>，具體看看<UpdateQueue>的定義：

type UpdateQueue<S, A> = {  
       last: Update<S, A> | null,  
       dispatch: (A => mixed) | null,  
       lastRenderedReducer: ((S, A) => S) | null,  
       lastRenderedState: S | null,  
   };

看到這個結構，熟悉react fiber的同學已經心中有數了，它的last屬性是一個鏈表，用來存儲當前hook的變化信息，能夠通過next迭代處理所有變更信息和狀態。這里我們就到此為止，感興趣的同志可以自行深入琢磨，對于這個hook，掌握到這里已經夠了，很多文章說useState和useReducer的基友關系，從這里我們就看出來了，useState最終使用的也是useReducer一致的api，通過類似redux的理念，通過dispatchAction修改state，有興趣的同志可以看這里useReducer源碼；

其他的hook就不展開了，感興趣的同志可以去看看源碼，歡迎交流探討。

四、自定義hooks

阿西吧，東拉西扯的到了這塊最有趣的地方。這塊以項目中實際用到的幾個hook來舉例說明。先說一下，其實官方的hook已經很多很全了，狀態我們可以useState，復雜多狀態我們可以用useReducer，共享和傳遞狀態可以使用useContext，引用組件、引用狀態可以useRef，組件render完成之后的操作通過useEffect完成...還有其他幾個hook，那么我們為什么還需要自定義hooks呢？

其實，自定義hook也是基于官方的hook進行組合，邏輯復用，業務代碼解耦抽象后進一步提煉出來的具備一定功能的函數。它應當具有一定條件下的的通用性，可移植性。
目前的hook可能并不十分契合我們的需求，我們需要進行二次加工，成為我們的業務hook，官方推薦自定義hook命名以use開頭。

useWindowLoad

在項目過程中有這樣一個業務場景，許多個地方（幾十到幾百不等）需要監聽window.onload事件，等待onload后執行特定的業務邏輯，如果window已經load，需要返回當前的，同時希望拿到window loaded的狀態，處理后續的其他邏輯，這里我們將業務邏輯用這個函數表示一下：

const executeOnload:()=>{alert('alert after loaded')}

傳統的實現思路：

{  
       if(window.loaded)executeOnload();return;  
       const old = window.onload;  
           window.onload = () => {  
               window.loaded = true;  
               executeOnload();  
               old && old();  
       };  
   }

在使用我們的自定義hook useWindowLoad之后

const isWindowLoaded= useWindowLoad(executeOnload)

每一處需要監聽的地方都變得十分簡單有沒有，話不多說，直接上碼：

export default function useWindowLoad(func?: (params?: any) => any): boolean {  
   useEffect(() => {  
       let effect: (() => void) | nullnull = null;  
       const old = window.onload;  
       window.onload = () => {  
           effect = func && func();  
           old && old();  
           window.loaded = true;  
       };  
       return () => {  
           if (typeof effect === 'function') {  
               effect();  
           }  
       };  
   });  
   return window.loaded;  
   })

最后，我們返回load狀態。這里我們主要使用了useEffect這個hook，并在接受的參數的返回值中清除了對應的副作用。useEffect在每次組件render完成后執行，具體使用參考文檔。注意，副作用的清除很重要，因為我們不能保證傳入的回調函數不會帶來副作用，所以使用時應該傳遞return一個函數的函數作為參數

useMessage

這樣一個場景：我們需要一個全局的消息提示，已經寫好了一個全局組件，并通過redux管理狀態控制Message的顯示和隱藏，這其實是一個很常見的功能，在使用hook之前，我們的實現可能是這樣的：

import React from 'react';  
 import { connect } from 'react-redux';  
 import { message } from './actions';  
 import Errors from './lib/errors';  
 interface IDemoProps {  
     message(params: Message): void;  
 }  
 const mapStateToProps = (state: IStore) => ({});  
 const mapDispatchToProps = (dispatch: any) => ({  
      message: (params: Message) =>dispatch(message(params))   
 });  
 class Demo extends React.Component<IDemoProps, {}> {  
     public handleClick() {  
         this.props.message({ content: Errors.GLOBAL_NETWORK_ERROR.message, type: 'error', duration: 1600, show: true });  
     }  
     public render() {  
         return <button className='demo' onClick={this.handleClick}>click alert message</button>;  
     }  
 }  
 export default connect(mapStateToProps, mapDispatchToProps)(Demo);

每次我們要使用就得mapDispatchToProps，引入action,connect，...繁瑣至極，我們也可以用**高階組件**包裝一下，透傳一個message函數給需要的子組件，這里我們使用自定義hook來解決，先看看最終達到的效果：

import React from 'react';  
import Errors from './lib/errors';  
const Demo: React.FC<{}> = () => {  
    const message = useMessage();  
    const handleClick = () => {  
        message.info(content: Errors.GLOBAL_NETWORK_ERROR.message);  
    };  
    return <button className='demo' onClick={handleClick}>alert message</button>;  
};  
export default Demo;

簡單了許多，每次需要全局提示的地方，我們只需要通過`const message = useMessage();`  
然后再組件內部任何地方使用`message.info('content')`,`message.error('content')`,`message.success('content')`,`message.warn('content')`即可,再也不關心action，redux connect等一系列操作。 
我們來看看這個邏輯如何實現的：

import { useDispatch } from 'react-redux';  
import { message as alert } from '../actions/index';  
/**  
* @param {type}  
* @return:  
*/  
export default function useMessage() {  
    const dispatch = useDispatch();  
    const info = (content: Partial<Message>['content']) => dispatch(alert({ content, duration: 3000, show: true, type: 'info' }));  
    const warn = (content: Partial<Message>['content']) => dispatch(alert({ content, duration: 3000, show: true, type: 'warn' }));  
    const error = (content: Partial<Message>['content']) => dispatch(alert({ content, duration: 3000, show: true, type: 'error' }));  
    const success = (content: Partial<Message>['content']) => dispatch(alert({ content, duration: 3000, show: true, type: 'success' }));  
    const message = {  
        success,  
        info,  
        warn,  
        error  
    };  
    return message;  
}

我們內部使用useDispatch拿到dispatch，封裝了四個不同功能的函數，直接對外提供封裝好的對象，就實現使用上了類似antd message組件的功能，哪里需要哪里useMessage就可以開心的玩耍了。

- 項目中還有其他的自定義hook，但是思路很上面兩個一致，提取共性，消除副作用。這里給大家推薦一個自定義的hook的一個[站點](https://usehooks.com)。我從這里吸收了一些經驗。

五、總結

文章寫得雜亂，各位多多包含，有不對的地方歡迎指正。限于篇幅太長，其他hook就不一一細說了，有興趣，有問題的同學歡迎交流探討。
距離hook提出大半年了，很多第三方庫也逐漸支持hook寫法，現在使用起來遇到坑的機會不多了。總體寫起來比class寫法舒服，不過對幾個基礎hook，特別是useState，useEffect的掌握十分重要，結合setTimeout，setInterval往往會有意料之外的驚喜，網上文章也很多。本項目還沒寫完，目前看來，選擇React hook是對的,過程中也學習了不少知識。趁年輕，折騰吧！

責任編輯：龐桂玉來源： segmentfault

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

React hooks實戰總結