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 暂时没有用到，后续在补充。