Hooks封裝與使用示例詳解

Posted on by

Hooks是什麼？

本篇文章主要介紹Hooks如何在React與Vue3兩大框架中封裝使用。

Hooks就是當代碼執行在某個執行階段，觸發被鉤子鉤到的事件函數或者回調函數，Hooks的概念最早在React的V16.8.0版本正式推出,後面Vue3的出現也引入Hooks的概念，兩者使用Hooks還是會有所差異。

Hooks解決瞭什麼？

  • 完善代碼能力
  • 組件邏輯復用

HOC與HOOK對比

HOC概念：hoc是React中用於重用組件邏輯的一種高級技術實現模式,它本身是一個函數,接受一個組件並返回一個新的組件

  • HOC
function Hocomponent(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, props)
      };
    } 
    render() {
      // ... 並使用新數據渲染被包裝的組件!
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };

上邊的例子可以看出高階組件內部返回瞭一個類組件，通過這個類組件對WrappedComponent進行包裝，在返回得到一個全新的組件。但是HOC的缺點就是props可能會被覆蓋，而且容易產生嵌套地域。

  • Hooks

react-Hooks的出現主要彌補函數組件無狀態無生命周期問題等，主要應對class復雜組件變的難以理解，邏輯混亂，不易拆解和測試與嵌套地域問題。

分別使用React與Vue3兩種框架封裝useThrottle鉤子函數

  • React實現節流Hooks
import { useState, useCallback } from "react"; 
export function useThrottleFn(fn, time) {
    let [isTimer,setIsTimer] = useState<any>(null);  
    const clear = () => {
        clearTimeout(isTimer);
        setIsTimer(null) 
    } 
    let throttle = useCallback(()=>{ 
        if (!isTimer) {
            setIsTimer(setTimeout(() => {
                fn()
                clear() 
            }, time)) 
        }
    },[fn, time])
    return [throttle]
}
// 引入使用
  const [throttle] = useThrottleFn((e)=>{
        console.log(e)
    },500)
    const Ceshi  = ()=>{
        let e = 'Hooks'
        throttle(e);
    }

React內部也存在很多的Hooks鉤子，常用的鉤子：

useState,useMemo,useCallback,useRef,useContext,但是這些鉤子必須在函數組件中使用並且在函數組件中使用鉤子需要在組件頂層調用，不能在Class中使用。這樣一來讓我們可以揮手告別this.xxx的時代。

  • Vue3實現節流Hooks
import { ref, unref, watch } from 'vue';
import { useTimeouts } from './useTimeout';
/**
 *
 * @param fn 回調函數
 * @param wait 延遲時間
 * @returns
 */
export function useThrottleFn(fn, wait = 80) {
  if (typeof fn !== 'function') {
    return;
  }
  let Timer: any = null;  
  const isReady = ref<Boolean>(false);
  const clearun = () => {
    Timer && clearTimeout(Timer);
  };
  // 閉包實現節流封裝   
  return function () {
    const _this = this;
    const args = arguments;
    // 更改狀態觸發watch監聽，觸發回調函數fn
    const startFun = function () {
      isReady.value = true;
    };
    // 這裡利用watch監聽isReady的狀態變化執行回到函數，而不是直接將回調函數放在定時器中
    watch(
      () => unref(isReady),
      () => {
        if (unref(isReady) && Timer) {
          fn.apply(_this, args);
          isReady.value = false;
          Timer = null;
          clearun();
        }
      },
    );
    // Timer 如果不存在就開始執行
    if (!Timer) {
      Timer = setTimeout(startFun, wait);
    }
  };
}
// 引入使用
const Ceshi = useThrottleFn(()=>{
      console.log('Hooks')
},300)

Vue3的發佈隨之帶來瞭很多新特性比如從選項式API到組合式API，引入Hooks等。那這裡在介紹一個新的工具庫Vueuse，Vueuse 基於Vue-demi封裝瞭大量的鉤子工具函數，比如useDark,useToggle其他點擊Vueuse文檔查看更多，並且在Vue2與Vue3都可以使用。當然我們也可以自己自定義按需求封裝Hooks,但在Vue3中使用Hooks需要在setup中使用，由setup作為組合式API的入口點，在Vue2使用需要安裝VueCompositionApi進行使用。

總結

React Hooks不能在循環與嵌套函數中使用，Vue3可以在嵌套中使用，所以這兩框架的使用或封裝方式是不同的，但是百變不離其宗，兩種鉤子的本質是沒有變化的，以上就是Hooks封裝與使用示例詳解的詳細內容，更多關於Hooks封裝使用的資料請關註WalkonNet其它相關文章！

推薦閱讀：