从 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的类型。
const [age, setAge] = useState(20);
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;
const doubleAge = useMemo(() => {
return age * 2;
}, [age]);
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 中的实例属性[2],这种场景我们可以从初始化值中推断出类型,current 也是可修改的。
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;
}
}
const [loginState, dispatchLogin] = useReducer(loginReducer, initialState);
dispatchLogin({ type: 'switchToAccountLogin' });
dispatchLogin({
type: 'changePwdAccount',
payload: {
actualAccount,
displayAccount,
},
});
dispatchLogin({ type: 'logout' });
dispatchLogin({ type: 'changePwdAccount' });
useImperativeHandle
useImperativeHandle 是 hook 中提供的允许我们 ref 一个function component 的方案,也是 Hook 在 TypeScript 中使用最复杂的场景。 我们先来看下面的Demo,一个RN转盘组件:
export interface WheelHandles {
startLottery(): void;
stopLottery(
luckyIndex: number,
stopCallback: () => void,
): void;
}
const PrizeWheel: RefForwardingComponent<WheelHandles, Props> = (props, ref): => {
function startLottery(): void {
}
function stopLottery(luckyIndex: number, stopCallback: () => void): void {
}
useImperativeHandle(ref, () => {
return {
startLottery,
stopLottery,
};
});
return (
)
}
const lotteryRef = useRef<PrizeWheelHandles>(null);
<PrizeWheel
ref={lotteryRef}
data={lotteryInfo}
/>
lotteryRef.current.startLottery();
其他
useContext、useDebugValue 暂时没有用到,后续在补充。