從 React V 16.8.0 和 React Native 0.59.0 版本開始, 引入了React Hook的概念坐搔。React Hook 在開發(fā)支持就考慮到了類型，所以很多Hook函數(shù)可以直接推斷出他們的參數(shù)、返回值等類型震嫉，但也有一些場景需要我們顯示聲明類型价卤。閱讀本文前你需要了解React Hook 的基本用法，參考這里闯狱。下面會(huì)總結(jié)一下我們?nèi)绾卧?TypeScript 中使用React Hook煞赢。
useState
大多數(shù)情況下，useState 的類型可以從初始化值推斷出來哄孤。但當(dāng)我們初始化值為 null照筑、undefined或者對象以及數(shù)組的時(shí)候，我們需要制定useState的類型。
// 可以推斷 age 是 number類型
const [age, setAge] = useState(20);
// 初始化值為 null 或者 undefined時(shí)凝危，需要顯示指定 name 的類型
const [name, setName] = useState<string>();
// 初始化值為一個(gè)對象時(shí)
interface People {
name: string;
age: number;
country?: string;
}
const [owner, setOwner] = useState<People>({name: 'rrd_fe', age: 5});
// 初始化值是一個(gè)數(shù)組時(shí)
const [members, setMembers] = useState<People[]([]);
useEffect
useEffect 用來在組件完成渲染之后增加副作用(side effect)波俄，可以返回一個(gè)函數(shù)，用來做一些狀態(tài)還原蛾默、移除listener等 clean up的操作懦铺。不需要處理返回值，所以可以不指定他的類型支鸡。useLayoutEffect類似冬念。
useEffect(() => {
const listener = addEventListener(name, callback);
return () => {
removeEventListener(listener)
}
}, [name, callback]);
useMemo、useCallback
對于 useMemo 和 useCallback 我們可以從函數(shù)的返回值中推斷出來他們返回的類型牧挣，需要顯示指定急前。
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 類似，用來關(guān)聯(lián)一個(gè) Dom節(jié)點(diǎn)或者 class component 實(shí)例瀑构，從而可以直接操作 Dom節(jié)點(diǎn) 或者class component 的方法裆针。 通常會(huì)給 ref 的 readonly 屬性 current 初始化為 null，直到 ref 關(guān)聯(lián)到組件上寺晌。 通常我們需要指定 useRef 的類型据块，參考如下:
const RRDTextInput = () => {
const inputRef = useRef<TextInput>(null);
return <TextInput ref={inputRef} placeholder="人人貸大前端" />;
}
場景二：使用 ref 替代 class component 中的實(shí)例屬性，這種場景我們可以從初始化值中推斷出類型折剃，current 也是可修改的另假。
// 推斷 current 是 number 類型
const age = useRef(2);
useReducer
useReducer 可以認(rèn)為是簡配版的redux，可以讓我們把復(fù)雜怕犁、散落在四處的useState边篮，setState 集中到 reducer中統(tǒng)一處理。類似我們同樣可以從reducer 函數(shù)(state邏輯處理函數(shù))中推斷出useReducer 返回的 state 和 dispatch 的 action類型奏甫，所以無需在顯示的聲明戈轿，參考如下實(shí)例：
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,
};
// 密碼登陸頁賬號發(fā)生變化
case 'changePwdAccount':
return {
...loginState,
pwdActualAccount: action.payload.actualAccount,
pwdDisplayAccount: action.payload.displayAccount,
};
default:
return loginState;
}
}
// 可以從 loginReducer 推斷出
// loginState 的類型 滿足 AccountState interface
// dispatchLogin 接受的參數(shù)滿足 ReducerAction 類型
const [loginState, dispatchLogin] = useReducer(loginReducer, initialState);
dispatchLogin({ type: 'switchToAccountLogin' });
dispatchLogin({
type: 'changePwdAccount',
payload: {
actualAccount,
displayAccount,
},
});
// 錯(cuò)誤： 不能將 logout 類型賦值給 type
dispatchLogin({ type: 'logout' });
// 錯(cuò)誤： { type: 'changePwdAccount' } 類型缺少 payload屬性
dispatchLogin({ type: 'changePwdAccount' });
useImperativeHandle
useImperativeHandle 是 hook 中提供的允許我們 ref 一個(gè)function component 的方案，也是 Hook 在 TypeScript 中使用最復(fù)雜的場景阵子。 我們先來看下面的Demo思杯，一個(gè)RN轉(zhuǎn)盤組件：
// 第一步：定義轉(zhuǎn)盤抽獎(jiǎng)組件對外暴露的接口 start归露、stop
export interface WheelHandles {
startLottery(): void;
stopLottery(
luckyIndex: number,
stopCallback: () => void,
): void;
}
// 第二步：將轉(zhuǎn)盤組件聲明為 RefForwardingComponent 類型框仔， 可以接受一個(gè) ref props
// ref props 是通過 forwarding-refs 實(shí)現(xiàn) https://reactjs.org/docs/forwarding-refs.html
const PrizeWheel: RefForwardingComponent<WheelHandles, Props> = (props, ref): => {
function startLottery(): void {
// 開始抽獎(jiǎng)邏輯
}
function stopLottery(luckyIndex: number, stopCallback: () => void): void {
// 停止抽獎(jiǎng)邏輯
}
// 第三步： 通過 useImperativeHandle 實(shí)現(xiàn)對外提供預(yù)定義好的接口
// useImperativeHandle 的 第一個(gè) ref 參數(shù)仲墨， 我們可以從useRef(第四步會(huì)用到)推斷出來
// 第二個(gè)函數(shù) return 內(nèi)容新思， 可以從 WheelHandles推斷出 不需要顯示聲明
// 例如： 我們?nèi)绻粚?shí)現(xiàn)的 startLottery， TypeScript 編譯期間就會(huì)報(bào)錯(cuò)
useImperativeHandle(ref, () => {
return {
startLottery,
stopLottery,
};
});
return (
// 抽獎(jiǎng)組件
)
}
// 第四步 useRef 引用轉(zhuǎn)盤對象笋敞， 并調(diào)用 startLottery 開始抽獎(jiǎng)
const lotteryRef = useRef<PrizeWheelHandles>(null);
<PrizeWheel
ref={lotteryRef}
data={lotteryInfo}
/>
lotteryRef.current.startLottery();
其他
useContext音半、useDebugValue 暫時(shí)沒有用到琳袄，后續(xù)在補(bǔ)充君旦。
