TypeScript 中使用React Hook

從 React V 16.8.0 和 React Native 0.59.0 版本開始, 引入了React Hook的概念。React Hook 在開發支持就考慮到了類型，因此不少Hook函數能夠直接推斷出他們的參數、返回值等類型，但也有一些場景須要咱們顯示聲明類型。閱讀本文前你須要瞭解React Hook 的基本用法，參考這裏。下面會總結一下咱們如何在 TypeScript 中使用React Hook。

useState

大多數狀況下，useState 的類型能夠從初始化值推斷出來。但當咱們初始化值爲 null、undefined或者對象以及數組的時候，咱們須要制定useState的類型。

// 能夠推斷 age 是 number類型
const [age, setAge] = useState(20);

// 初始化值爲 null 或者 undefined時，須要顯示指定 name 的類型
const [name, setName] = useState<string>();

// 初始化值爲一個對象時
interface People {
    name: string;
    age: number;
    country?: string;
}
const [owner, setOwner] = useState<People>({name: 'rrd_fe', age: 5});

// 初始化值是一個數組時
const [members, setMembers] = useState<People[]>([]);
複製代碼

useEffect

useEffect 用來在組件完成渲染以後增長反作用(side effect)，能夠返回一個函數，用來作一些狀態還原、移除listener等 clean up的操做。不須要處理返回值，因此能夠不指定他的類型。useLayoutEffect相似。

useEffect(() => {
    const listener = addEventListener(name, callback);
    return () => {
        removeEventListener(listener)
    }
}, [name, callback]);
複製代碼

useMemo、useCallback

對於 useMemo 和 useCallback 咱們能夠從函數的返回值中推斷出來他們返回的類型，須要顯示指定。

const age = 12;
// 推斷 doubleAge 是 number類型
const doubleAge = useMemo(() => {
    return age * 2;
}, [age]);

// 推斷 addTen 類型是 (initValue: number) => number
const addTen = useCallback((initValue: number) => {
    return initValue + 10;
});
複製代碼

useRef

useRef 有兩種比較典型的使用場景：

場景一： 和 hook 以前的 ref 相似，用來關聯一個 Dom節點或者 class component 實例，從而能夠直接操做 Dom節點 或者class component 的方法。 一般會給 ref 的 readonly 屬性 current 初始化爲 null，直到 ref 關聯到組件上。 一般咱們須要指定 useRef 的類型，參考以下:

const RRDTextInput = () => {
    const inputRef = useRef<TextInput>(null);
    return <TextInput ref={inputRef} placeholder="人人貸大前端" />; } 複製代碼

場景二：使用 ref 替代 class component 中的實例屬性，這種場景咱們能夠從初始化值中推斷出類型，current 也是可修改的。

// 推斷 current 是 number 類型
const age = useRef(2);
複製代碼

useReducer

useReducer 能夠認爲是簡配版的redux，可讓咱們把複雜、散落在四處的useState，setState 集中到 reducer中統一處理。相似咱們一樣能夠從reducer 函數(state邏輯處理函數)中推斷出useReducer 返回的 state 和 dispatch 的 action類型，因此無需在顯示的聲明，參考以下實例：

type ReducerAction =
    | { type: 'switchToSmsLogin' | 'switchToAccountLogin' }
    | {
        type: 'changePwdAccount' | 'changeSmsAccount';
        payload: {
            actualAccount: string;
            displayAccount: string;
        };
    };

interface AccountState {
    loginWithPwd: boolean;
    pwdActualAccount: string;
    pwdDisplayAccount: string;
    smsActualAccount: string;
    smsDisplayAccount: string;
}

function loginReducer(loginState: AccountState, action: ReducerAction): AccountState {
    switch (action.type) {
        case 'switchToAccountLogin':
            return {
                ...loginState,
                pwdActualAccount: loginState.smsActualAccount,
                pwdDisplayAccount: loginState.smsDisplayAccount,
                loginWithPwd: !loginState.loginWithPwd,
            };
        // 密碼登錄頁帳號發生變化
        case 'changePwdAccount':
            return {
                ...loginState,
                pwdActualAccount: action.payload.actualAccount,
                pwdDisplayAccount: action.payload.displayAccount,
            };
        default:
            return loginState;
    }
}

// 能夠從 loginReducer 推斷出
// loginState 的類型 知足 AccountState interface
// dispatchLogin 接受的參數知足 ReducerAction 類型
const [loginState, dispatchLogin] = useReducer(loginReducer, initialState);

dispatchLogin({ type: 'switchToAccountLogin' });
dispatchLogin({
    type: 'changePwdAccount',
    payload: {
        actualAccount,
        displayAccount,
    },
});

// 錯誤： 不能將 logout 類型賦值給 type
dispatchLogin({ type: 'logout' });
// 錯誤： { type: 'changePwdAccount' } 類型缺乏 payload屬性
dispatchLogin({ type: 'changePwdAccount' });
複製代碼

useImperativeHandle

useImperativeHandle 是 hook 中提供的容許咱們 ref 一個function component 的方案，也是 Hook 在 TypeScript 中使用最複雜的場景。 咱們先來看下面的Demo，一個RN轉盤組件：

// 第一步：定義轉盤抽獎組件對外暴露的接口 start、stop
export interface WheelHandles {
    startLottery(): void;
    stopLottery(
        luckyIndex: number,
        stopCallback: () => void,
    ): void;
}

// 第二步：將轉盤組件聲明爲 RefForwardingComponent 類型， 能夠接受一個 ref props
// ref props 是經過 forwarding-refs 實現 https://reactjs.org/docs/forwarding-refs.html
const PrizeWheel: RefForwardingComponent<WheelHandles, Props> = (props, ref): => {

    function startLottery(): void {
        // 開始抽獎邏輯
    }

    function stopLottery(luckyIndex: number, stopCallback: () => void): void {
        // 中止抽獎邏輯
    }

    // 第三步： 經過 useImperativeHandle 實現對外提供預約義好的接口
    // useImperativeHandle 的 第一個 ref 參數， 咱們能夠從useRef(第四步會用到)推斷出來
    // 第二個函數 return 內容， 能夠從 WheelHandles推斷出 不須要顯示聲明 
    // 例如： 咱們若是隻實現的 startLottery， TypeScript 編譯期間就會報錯
    useImperativeHandle(ref, () => {
        return {
            startLottery,
            stopLottery,
        };
    });

    return (
        // 抽獎組件
    )
}

// 第四步 useRef 引用轉盤對象， 並調用 startLottery 開始抽獎
const lotteryRef = useRef<PrizeWheelHandles>(null);

<PrizeWheel ref={lotteryRef} data={lotteryInfo} /> lotteryRef.current.startLottery(); 複製代碼

其餘

useContext、useDebugValue 暫時沒有用到，後續在補充。