一文帶你搞懂reacthooks的類型聲明

  • JS
目錄 node_modules中的@types是什么？ types查找規則 模塊types *.d.ts是什么 useContext useState useRef useEffect useLayoutEffect useReducer useCallback useMemo useImperativeHandle 總結 在了解react hooks的類型之前，有
目錄
  • node_modules中的@types是什么？
  • types查找規則
  • 模塊types
  • *.d.ts是什么
  • useContext
  • useState
  • useRef
  • useEffect
  • useLayoutEffect
  • useReducer
  • useCallback
  • useMemo
  • useImperativeHandle
  • 總結

在了解react hooks的類型之前，有必要先了解一下@types、.d.ts文件的概念及作用。

node_modules中的@types是什么？

當我們使用第三方npm包的時候，如果這個包不是ts編寫，則沒有導出類型，這時候如果在ts中導入會報錯。比如jquery 這時會報錯

無法找到模塊“jquery”的聲明文件嘗試使用 npm i --save-dev @types/jquery (如果存在)，或者添加一個包含 declare module 'jquery'; 的新聲明(.d.ts

????這里提示找不到jquery的類型定義 可以安裝@types/jquery或者在d.ts中自定義類型,大多數情況我們應該使用第一種辦法,如果這個庫沒有@types庫再使用第二種。

types查找規則

當我們使用import xx from時ts將會默認從./node_modules/@types中獲取類型聲明，具體查找規則是ts編譯器先在當前編譯上下文找jquery的定義,找不到則再去./node_modules/@types中查找。 在本地模塊查找的類型聲明作用域是在模塊，在@types中的類型聲明是全局的。在tsconfig.json中也可以使用 typeRoots設置默認路徑 。

模塊types

當然在`tsconfig.json`中也可以使用`types`單獨控制`@types`。`types`指定的包會被單獨引入。這樣全局引入就失效了。

*.d.ts是什么

@types下存放的文件都是.d.ts開頭的文件 對應的npm包js的類型聲明。 在.d.ts文件中聲明的類型或者模塊，在其他文件中不需要使用import導入，可以直接使用，d.ts的類型聲明可以自行編寫也可以使用工具聲明。有2個工具

可以使用微軟的dts-gen，生成單個文件的聲明dtsmake。值得注意的是如果你使用JSDOC語法 在ts3.7以后是可以通過命令為js生成.ds文件。具體用法可查看TypeScript: Documentation - Creating .d.ts Files from .js files (typescriptlang.org)

介紹完前菜 現在開始進入本文正題。 一起來看下react hooks相關的類型聲明吧。在@types/react/index.d.ts文件中。

useContext

`useContext和createContext`是結合一起使用的??

useContext定義： function useContext<T>(context:Context<T>):TcreateContext定義： function createContext<T>(defaultValue:T,):Context<T> createContext的返回Context類型的值提供給useContext的參數。這里泛型T在2個方法中是一致的，如果不指定 ts會類型推導出正確的類型。而Context 類型 則是一個interface

interface Context<T> {
  Provider: Provider<T>;
  Consumer: Consumer<T>;
  displayName?: string | undefined;
}

`Provider` 擁有`value`和`children` `Consumer`擁有 `children` 類型都是`ReactNode|undefined`。想想我們這react中使用`Context`傳值 是不是感覺很熟悉？看懂類型定義 再也不怕忘記api了。

useState

定義：function useState<S>(initialState:S| (() =>S)): [S, Dispatch<SetStateAction<S>>] 泛型S表示state 是用來約束initialState類型，也可以傳入返回值是S的方法。 useState返回值為2個元素的元組類型，返回state和更新state的方法。默認情況下useState會根據傳入類型自動推導出S類型。 SetStateAction<S>定義了傳入setState的參數類型。是S類型或者返回S類型值的函數的聯合類型。SetStateAction 的定義為： type SetStateAction<S> = S|((prevState:S) =>S)，prevState為上一次的state，聯合類型暫可以理解成或的關系。而 Dispatch 表示setState的類型，是一個沒有返回值的方法。定義也很簡單Dispatch ：type Dispatch<A> = (value:A) =>void。 還有useState參數個數為0的情況。上面的類型無法滿足，所以后面個函數重載約束沒有傳入初始值的實現。 function useState<S=undefined>(): [S|undefined, Dispatch<SetStateAction<S|undefined>>];

useRef

定義比較簡單：function useRef<T>(initialValue:T):MutableRefObject<T>, useRef 返回一個可變 ref 對象，其 .current 屬性初始化為傳遞的參數。MutableRefObject就是一個包含current：T的接口。值得注意的是 這里同樣用了函數重載，包括了initialValue沒有傳或者為null的情況。ref在props中大部分的初始值都為null。 類型聲明中注釋明確指定了如果要使用可變的useRef 則需要在范型參數中包含| null.

* Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type
     * of the generic argument.

如果我們這樣寫，此時ref為RefObject類型?RefObject的current被readonly修飾。所以是不可變的。當在范型中指定了| null?則根據函數重載命中第一種類型，返回MutableRefObject是可變的。

const ref = useRef<number>(null)
ref.current = 2 // 無法分配到 "current" ，因為它是只讀屬性。
// 此時命中的這個重載的useRef
function useRef<T>(initialValue: T|null): RefObject<T>;

useEffect

定義: function useEffect(effect:EffectCallback, deps?:DependencyList):void， EffectCallback是一個只能返回void|Destructor的函數類型 用來處理副作用 。 void表示沒有返回值 ,但這里并不意味著你賦值一個有返回值的函數會報錯，在一個返回值為void的函數你明確返回類型 并不會報錯。而void真正表示無論你返回什么？編譯器都不會使用檢查它。 Destructor 表示析構函數，看下它的定義

declare const UNDEFINED_VOID_ONLY: unique symbol;
type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never }

這里UNDEFINED_VOID_ONLY表示一個常量類型 unique symbol是symbol的子類型 , 使用unique symbol的變量必須為const，而值為never表示的是那些永不存在的值的類型。 never 類型是那些總是會拋出異常或根本就不會有返回值的函數表達式或箭頭函數表達式的返回值類型。這里使用void和{ [UNDEFINED_VOID_ONLY]: never }作為聯合類型, 明確約束了effect是不能有返回類型的, 如果明確聲明 則會報錯。 如果有async修飾函數默認返回promise類型， 所以在useEffect中的effect也同樣不能使用async。deps是可選參數，作為依賴是一個只讀數組。ReadonlyArray是一個真正的只讀數組類型，根據范型來約束數組元素類型。它沒有改變數組的方法push shift等。

useLayoutEffect

useLayoutEffect類型聲明與useEffect一致。但useLayoutEffect的callback會在DOM更新后同步觸發 在瀏覽器同步刷新之前執行完成 可能會阻塞瀏覽器渲染。

useReducer

官方介紹useReducer 為 An alternative to useState.是useState的替代解決方案。一般我們都這樣使用。當state結構或邏輯比較復雜時，用useReducer管理更方便容易。

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}
const [state, dispatch] = useReducer(reducer, {count: 0});
state.count
dispatch({type: 'decrement'})

在類型聲明文件中useReducer寫了5個重載函數類型。

type ReducerWithoutAction<S> = (prevState: S) => S;
type ReducerStateWithoutAction<R extends ReducerWithoutAction<any>> =
        R extends ReducerWithoutAction<infer S> ? S : never;
function useReducer<R extends ReducerWithoutAction<any>, I>(
        reducer: R,
        initializerArg: I,
        initializer: (arg: I) => ReducerStateWithoutAction<R>
    ): [ReducerStateWithoutAction<R>, DispatchWithoutAction];
  • 第一種是reducer函數沒有傳action的情況。R表示reducer函數類型, 其中參數state類型和返回類型必須一致。initializerArg表示初始參數，類型為泛型的第二個參數。initializer定義稍微復雜，但是其實約束了此類型必須是一個參數為initializerArg類型 返回值也同initializerArg類型一致的參數類型。而這個initializerArg就是reducer的參數state類型。ReducerStateWithoutAction就是為了約束這三個參數的類型。舉個例子更清晰. 下述代碼reducer中state initializerArg 已經 initializer的參數和返回參數類型都應該保持一致。
type stateType = {num: number}
function reducer(state: stateType) {
  return state
}
const [state,dispatch]=useReducer<typeof reducer,stateType>(
  reducer, {num: 0},state=>{
    return {num: state.num+1}
  })

這里的extends 條件類型是一種條件表達式進行類型的關系檢測，類似于三元表達式。意思為左側類型可分配給右側類型則返回？后面的類型 否則返回：后的類型。 而infer關鍵字只能出現在條件類型extends 判斷為true的分支，表示一個待推斷的類型，infer S表示將推斷的類型保存在S中。

  • 第二個重載與第一個類似 只是在initializer為undefined的情況。如果在useReducer的泛型中指定了第二個參數，則命中第一個重載 此時會報錯。具體實現類似下述代碼。
function useReducer<R extends ReducerWithoutAction<any>>(
        reducer: R,
        initializerArg: ReducerStateWithoutAction<R>,
        initializer?: undefined
    ): [ReducerStateWithoutAction<R>, DispatchWithoutAction];
type stateType = {num: number}
function reducer(state: stateType) {
  return state
}
const [state,dispatch]=useReducer<typeof reducer>(
reducer, {num: 0})
  • 第三個重載約束了reducer函數傳入action的情況，不同于redux action是any類型。initializerArg初始參數為 state與泛型I的交叉類型。I可能是state的子集的情況。ReducerState同樣是為了取出reducer中state類型。initializer同上述第一種重載類似。要約束arg initializerArg 一致。而初始initializer的返回值要與reducer中state一致。
// Unlike redux, the actions _can_ be anything
type Reducer<S, A> = (prevState: S, action: A) => S;
// types used to try and prevent the compiler from reducing S
// to a supertype common with the second argument to useReducer()
type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never;
function useReducer<R extends Reducer<any, any>, I>(
        reducer: R,
        initializerArg: I & ReducerState<R>,
        initializer: (arg: I & ReducerState<R>) => ReducerState<R>
    ): [ReducerState<R>, Dispatch<ReducerAction<R>>];

舉個例子 初始參數initializer的state類型 在初始函數的參數類型也應該一致。

// 代碼實現
type stateType = {num: number}
type actionType = { type: string, payload: number}
function reducer(state: stateType,action: actionType) {
  if(action.type=='add'){
    return {num: state.num+1}
  }else {
    return {num: state.num-1}
  }
}
const [state,dispatch]=useReducer<typeof reducer,actionType>(
reducer, { type: 'add', payload: 1,num: 2},state=>{
  return {num:state.num+state.payload}
})
  • 第4個重載 和第三個類似 在初始參數不包括state的情況， 初始參數initializer的state類型 在初始函數的參數類型也應該一致。
function useReducer<R extends Reducer<any, any>, I>(
        reducer: R,
        initializerArg: I,
        initializer: (arg: I) => ReducerState<R>
    ): [ReducerState<R>, Dispatch<ReducerAction<R>>];

第5個重載 和上述類似 約束了initializer為undefined,reducer存在actions的情況

function useReducer<R extends Reducer<any, any>>(
        reducer: R,
        initialState: ReducerState<R>,
        initializer?: undefined
    ): [ReducerState<R>, Dispatch<ReducerAction<R>>];

useReducer的返回值都是一致。返回reducerState和Dispatch，而type Dispatch<A> = (value:A) =>void;就是一個沒有返回值的函數 用來觸發action 改變reducerState。

useCallback

定義比較簡單： function useCallback<T extends (...args:any[]) =>any>(callback:T, deps:DependencyList):T; 范型T為function類型為第一個參數callback的類型，第二個參數DependencyList與useEffect的依賴數組一致，都是一個只讀的數組。主要作用是用來緩存callback實例，當傳遞給子組件方法時與React.memo 或者shouldComponentUpdate一起使用。

useMemo

定義也比較簡單：

// allow undefined, but don't make it optional as that is very likely a mistake
function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;

范型T為factory的返回值類型。deps依賴為DependencyList和undefined的聯合類型，這里會有提示允許deps為undefined，但不能是可選的 否則可能是個錯誤。

useImperativeHandle

useImperativeHandle主要用來配合forwardRef自定義暴露給父組件數據的。一般用來父組件調用子組件方法或獲取子組件數據時使用。

function useImperativeHandle<T, R extends T>(ref: Ref<T>|undefined, init: () => R, deps?: DependencyList): void;
interface RefObject<T> {
        readonly current: T | null;
    }
    // Bivariance hack for consistent unsoundness with RefObject
type RefCallback<T> = { bivarianceHack(instance: T | null): void }["bivarianceHack"];
type Ref<T> = RefCallback<T> | RefObject<T> | null;

泛型T為ref的current的類型，R是第二個參數init方法的返回值，DependencyList同上述依賴數組一樣 不可變數組。可以這樣使用

const Child = React.forwardRef<{num: number}>((prop,ref)=>{
  useImperativeHandle<{num: number}, {num: number}>(ref,()=>({
    'num': 1
  }))
  return (<div>123</div>)
})
const Foo = ()=>{
  const childRef = useRef<{num: number}|null>(null)
  useLayoutEffect(() => {
    console.log(childRef.current?.num) // 1
  }, [])
  return <>
    <Child ref={childRef}/>
  </>
}

總結

本文根據閱讀@types/react下hook相關源碼入手，意在幫助大家熟悉常用hook以及類型聲明 在開發時能得心應手 明白hooks的約束條件 更深入理解hook的功能。如上述內容有錯誤，請不吝指出

以上就是一文帶你搞懂react hooks的類型聲明的詳細內容，更多關于react hooks的類型聲明的資料請關注技圈網其它相關文章！

聲明：所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益，可聯系我們進行處理。
發表評論
更多 網友評論 （0 條評論）
暫無評論

返回頂部
主站蜘蛛池模板： 好吊妞视频这里有精品| 99re99热| 亚洲中文字幕久久精品无码a| 9自拍视频在线观看| 男女肉粗暴进来动态图| 手机在线看片国产| 国产一级毛片网站| 久久久不卡国产精品一区二区| 麻豆一区二区99久久久久| 日韩视频免费在线观看| 国产欧美日韩在线观看精品| 亚洲一线产区二线产区精华| 2023天天操| 最近免费中文字幕大全高清10| 国产真实乱在线更新| 五月天亚洲婷婷| 高贵的你韩剧免费观看国语版| 日韩成人国产精品视频| 国产女人水多毛片18| 久久国产精品99精品国产| 色釉釉www网址| 澳门码资料2020年276期| 天天在线天天综合网色| 国产又大又粗又猛又爽的视频 | 久久人人爽人人爽人人av东京热 | 永久黄网站色视频免费观看| 国产色视频网免费| 亚洲国产一区二区三区| 欧美jizz40性欧美| 狠狠色香婷婷久久亚洲精品| 国模精品视频一区二区三区| 免费日本三级电影| 99视频精品全部在线观看| 欧美精品v国产精品v日韩精品 | 免费又黄又爽又猛的毛片| 99re在线观看| 欧美一区二区三区久久综合| 国产成人亚洲综合无码精品| 中文字幕无码不卡一区二区三区| 精品69久久久久久99| 国产精品视频久|