Hooks怎么封裝與使用

今天小編給大家分享一下Hooks怎么封裝與使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

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進行使用。

以上就是“Hooks怎么封裝與使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。