從 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 暫時沒有用到，后續在補充。
