日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 
 

  
  
  
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是這樣的一個鏈表結(jié)構(gòu)，React里面廣泛使用了這樣的結(jié)構(gòu)存儲副作用。   

 
 
 

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

繼續(xù)往下看：   

 
 
 

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

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

return [hook.memoizedState, dispatch];

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

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

 
 
 

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

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

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

四、自定義hooks

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

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

useWindowLoad

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

 
 
 

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

傳統(tǒng)的實現(xiàn)思路：   

 
 
 

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

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

 
 
 

  
  
  
const isWindowLoaded= useWindowLoad(executeOnload) 
 
 
 

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

 
 
 

  
  
  
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狀態(tài)。這里我們主要使用了useEffect這個hook，并在接受的參數(shù)的返回值中清除了對應的副作用。useEffect在每次組件render完成后執(zhí)行，具體使用參考文檔。注意，副作用的清除很重要，因為我們不能保證傳入的回調(diào)函數(shù)不會帶來副作用，所以使用時應該傳遞return一個函數(shù)的函數(shù)作為參數(shù)

useMessage

 
 
 

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

 
 
 

  
  
  
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 {  
  
  
  
     public handleClick() {  
  
  
  
         this.props.message({ content: Errors.GLOBAL_NETWORK_ERROR.message, type: 'error', duration: 1600, show: true });  
  
  
  
     }  
  
  
  
     public render() {  
  
  
  
         return click alert message;  
  
  
  
     }  
  
  
  
 }  
  
  
  
 export default connect(mapStateToProps, mapDispatchToProps)(Demo); 
 
 
 

每次我們要使用就得mapDispatchToProps，引入action,connect，...繁瑣至極，我們也可以用**高階組件**包裝一下，透傳一個message函數(shù)給需要的子組件，這里我們使用自定義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 alert message;  
  
  
  
};  
  
  
  
export default Demo; 
 
 
 

 
 
 

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

 
 
 

  
  
  
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['content']) => dispatch(alert({ content, duration: 3000, show: true, type: 'info' }));  
  
  
  
    const warn = (content: Partial['content']) => dispatch(alert({ content, duration: 3000, show: true, type: 'warn' }));  
  
  
  
    const error = (content: Partial['content']) => dispatch(alert({ content, duration: 3000, show: true, type: 'error' }));  
  
  
  
    const success = (content: Partial['content']) => dispatch(alert({ content, duration: 3000, show: true, type: 'success' }));  
  
  
  
    const message = {  
  
  
  
        success,  
  
  
  
        info,  
  
  
  
        warn,  
  
  
  
        error  
  
  
  
    };  
  
  
  
    return message;  
  
  
  
} 
 
 
 

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

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

五、總結(jié)

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