React Hooks-useTypescript!
在React v16.8新增了Hook，它提供了在函数组件中访问状态和React生命周期等能力，这些函数可以在程序的各个组件之间复用，达到共享逻辑的目的。
之前在React中, 我们只能通过 Higher Order Components(高阶组件)跟Render Props(渲染属性)来共享逻辑。Hook的出现提供了一个新思路、一个更简单的方式来复用代码，使得我们的组件DRY(Don’t repeat yourself)。
今天我主要想聊聊如何把Hook跟Typescript代码结合到一起，以及如何给官方的Hook或者我们自己的Hook增加类型。
本文中的类型定义来自@types/react。一些例子来自 react-typescript-cheatsheet，从他们这里可以看到更完整的示例。其他例子来自官网文档。
对于函数组件写法的改变
之前在React中函数组件被称为Stateless Function Components，因为它们没有状态。有了Hook之后，函数组件也可以访问状态跟React生命周期。为了做个区分，我们再也不能把我们组件的类型写成 React.SFC了，要写成 React.FC 或者 React.FunctionComponent 。
import * as React from 'react'interface IProps {
// ... props接口}// 现在我们得这么写const MyNewComponent: React.FC<IProps> = (props) => {...};// 过去的写法const MyOldComponent: React.SFC<IProps> = (props) => {...};通过把组件的类型声明成 FC，TypeScript就能允许我们正确地处理 children 跟defaultProps 。此外，它也提供了context，propTypes， contextTypes，defaultProps，displayName等属性的类型。
如下所示：
interface FunctionComponent<P = {}> {
(props: P & { children?: ReactNode }, context?: any): ReactElement | null;
propTypes?: WeakValidationMap<P>;
contextTypes?: ValidationMap<any>;
defaultProps?: Partial<P>;
displayName?: string;}这个defaultProps在这儿我觉得没啥必要，既然都是函数了，函数也支持给参数写默认值，那何必引入一个新的属性出来，不知道官方是不是有别的考虑，后续会不会去掉。
Hooks概览
我之前也说过，Hook没什么新奇的，他们只是一些简单的函数，允许我们管理状态，使用生命周期，以及访问context之类的React机制。只不过Hook是对函数组件功能的增强，只能在函数组件中使用:
import * as React from 'react'
const FunctionComponent: React.FC = () => {
const [count, setCount] = React.useState(0) //useState hook
}React自带了10个hook。3个比较常用，其他的多用于一些边缘情况。如下：
常用的Hooks
- useState
- useEffect
- useContext
高级Hook
- useReducer`
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
每个hook都很强大,他们也能被组合起来实现自定义hook提供更强大的功能。通过实现自定义hook，我们可以把一些逻辑抽成可复用的函数，之后在我们的组件中引入。唯一需要注意的是使用hook要遵守某些规则。至于这些规则为什么存在，我之前也稍微聊到过，后面我们再单独具体说说。
useState
useState允许我们在函数组件中使用类似类组件中 this.state的能力。这个hook会返回一个数组，包含当前状态值跟一个更新状态的函数。当状态被更新时，它会触发组件的重新渲染。使用方式如下:
import * as React from 'react';
const MyComponent: React.FC = () => {
const [count, setCount] = React.useState(0);
return (
<div onClick={() => setCount(count + 1)}>
{count}
</div>
);
};这里的状态可以是任意的JavaScript类型，上面的例子中我们用的是number。这个set state函数是一个纯函数，指定了如何更新状态，并且总是会返回一个相同类型的值。
useState可以通过我们提供给函数的值的类型推断出初始值跟返回值的类型。对于复杂的状态，useState<T>可以用来指定类型。下面的例子展示了一个可以为null的 user对象。
import * as React from 'react';
interface IUser {
username: string;
email: string;
password: string;
}
const ComplexState = ({ initialUserData }) => {
const [user, setUser] = React.useState<IUser | null>(initialUserData);
if (!user) {
// do something else when our user is null
}
return (
<form>
<input value={user.username} onChange={e => setUser({...user, username: e.target.value})} />
<input value={user.email} onChange={e => setUser({...user, email: e.target.value})} />
<input value={user.password} onChange={e => setUser({...user, password: e.target.value})} />
</form>
);
}官方类型定义如下:
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
type Dispatch<A> = (value: A) => void;
type SetStateAction<S> = S | ((prevState: S) => S);useEffect
useEffect可以被用来在函数组件中管理一些诸如API 请求跟使用React生命周期等我们称之为side effect的东西。我们可以让useEffect 接受一个回调作为参数，并且这个回调可以返回一个清理函数。这个回调会在类似 componentDidMount 跟componentDidUpdate的时机执行, 然后这个清理函数会在类似 componentWillUnmount的时机执行。
useEffect(() => {
const subscription = props.source.beginAPIPoll();
return () => {
// Clean up the subscription
subscription.cancelAPIPoll();
};
});默认情况下 useEffect 在每次渲染的时候都会执行,但是它也有个可选的第二个参数，允许我们在一个值更新的时候或者初次渲染时执行 useEffect 。这个可选参数是一个数组，每当这个数组中的任意一个值更新的时候都会重新执行这个hooks。如果数组为空，那么useEffect只会执行一次，也就是在初次渲染的时候。更加详细的信息参考 官方文档.
当使用这个hook的时候,我们只能返回 undefined或者另一个 function。如果我们返回了一个值， React跟TypeScript都会报错。如果我们使用一个箭头函数作为回调，我们需要确保没有隐式返回一个值。比如说， setTimeout在浏览器里返回一个整数:
function DelayedEffect(props: { timerMs: number }) {
const { timerMs } = props;
//setTimeout隐式地返回了一个数字
useEffect(() => setTimeout(() => {/* do stuff */}, timerMs), [timerMs])
// **
return null
}useEffect 的第二个参数是一个只读数组，可以包含 any 类型的值—any[].
既然useEffect接受一个 function 作为参数并且只返回function或者undefined，那其实类型定义就很明确了:
function useEffect(effect: EffectCallback, deps?: DependencyList): void;
// The first argument, `effect`
type EffectCallback = () => (void | (() => void | undefined));
// The second argument, `deps?`
type DependencyList = ReadonlyArray<any>;useContext
useContext让我们可以在函数组件中使用React的context，context可以让我们在任意组件中访问全局状态，而不必一层一层地把数据往下传。
useContext函数接受一个Context 对象并且返回当前context值。当provider更新的时候，这个 Hook会带着当前context最新值触发重新渲染。
import { createContext, useContext } from 'react';
props ITheme {
backgroundColor: string;
color: string;
}
// The standard way to create context. It takes an initial value object
const ThemeContext = createContext<ITheme>({
backgroundColor: 'black',
color: 'white',
})
// Accessing context in a child component
const themeContext = useContext<ITheme>(ThemeContext);通过createContext函数可以创建一个context对象。Context对象包含一个Provider 组件, 然后所有想要访问这个context的组件需要在这个Provider的子组件树中。接触React的同学大部分都熟悉Redux，这个跟redux的 <Provider store={store} /> 组件一样，允许我们通过context访问全局状态。对context的感兴趣想进一步了解的同学看这里：官方文档。
useContext类型如下:
function useContext<T>(context: Context<T>): T;
interface Context<T> {
Provider: Provider<T>;
Consumer: Consumer<T>;
displayName?: string;
}useReducer
对于复杂的状态, 我们也可以使用useReducer函数来代替useState。
const [state, dispatch] = useReducer(reducer, initialState, init); |这个跟redux很相似。useReducer接受3个参数然后返回state对象跟dispatch函数。reducer是一个形如(state, action) => newState的函数，initialState是一个JavaScript对象，init参数是一个允许我们懒加载初始状态的函数，就像这样：init(initialState).
看起来很绕，我们来看一个具体的例子。我们把上面使用useState的计数器的例子用useReducer重写，代码如下：
import * as React from 'react';
enum ActionType {
Increment = 'increment',
Decrement = 'decrement',
}
interface IState {
count: number;
}
interface IAction {
type: ActionType;
payload: {
count: number;
};
}
const initialState: IState = {count: 0};
const reducer: React.Reducer<IState, IAction> = (state, action) => {
switch (action.type) {
case ActionType.Increment:
return {count: state.count + action.payload.count};
case ActionType.Decrement:
return {count: state.count - action.payload.count};
default:
throw new Error();
}
}
const ComplexState = () => {
const [state, dispatch] = React.useReducer<React.Reducer<IState, IAction>>(reducer, initialState);
return (
<div>
<div>Count: {state.count}</div>
<button onClick={
() => dispatch({type: ActionType.Increment, payload: { count: 1 } })
}>+</button>
<button onClick={
() => dispatch({type: ActionType.Decrement, payload: { count: 1 }})
}>-</button>
</div>
);useReducer函数可以使用如下类型:
type Dispatch<A> = (value: A) => void;
type Reducer<S, A> = (prevState: S, action: A) => S;
type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never;
type ReducerAction<R extends Reducer<any, any>> = R extends Reducer<any, infer A> ? A : never;
function useReducer<R extends Reducer<any, any>, I>(
reducer: R,
initializerArg: I & ReducerState<R>,
initializer: (arg: I & ReducerState<R>) => ReducerState<R>
): [ReducerState<R>, Dispatch<ReducerAction<R>>];
function useReducer<R extends Reducer<any, any>, I>(
reducer: R,
initializerArg: I,
initializer: (arg: I) => ReducerState<R>
): [ReducerState<R>, Dispatch<ReducerAction<R>>];
function useReducer<R extends Reducer<any, any>>(
reducer: R,
initialState: ReducerState<R>,
initializer?: undefined
): [ReducerState<R>, Dispatch<ReducerAction<R>>];useCallback
useCallbackhook返回一个缓存的回调。这个hook函数接收2个参数:第一个参数是一个内联回调函数，第二个参数是一个数组。这个数组里的值将会被回调函数引用，并且按照他们在数组中的顺序被访问。
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);useCallback将会返回这个回调缓存的版本，然后只有在数组中的值改变的时候才会更新返回的回调。当我们从子组件中传出一个回调时，这个hook可以被用来避免没有意义的渲染。因为这个回调只有在数组里的值改变的时候才会被执行，我们可以借此优化我们的组件。我们可以把这个hook当成shouldComponentUpdate生命周期函数在函数组件中的替代品。
useCallbackTypeScript定义如下:
function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;useMemo
useMemohook类似于useCallback，不过它返回的是一个值。它接受一个函数作为它的第一个参数，同样的，第二个参数是一个数组。然后会返回一个缓存的值，这个值会在数组中的值有更新的时候重新计算。我们可以借此在渲染时避免一些复杂的计算。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); |useMemo允许我们计算任意类型的值。下面的例子展示了一个有类型的缓存的数字：
const computeExpensiveValue = (end: number) => {
let result = 0;
for (let i = 0; i < end * 1000000; i++) {
for (let j = 0; i < end * 1000; j++) {
result = result + i - j;
}
}
return result;
};
const MyComponent = ({ end = 0 }) => {
const memoizedNumber = React.useMemo<number>(computeExpensiveValue(end))
return (
<DisplayResult result={memoizedNumber} />
);
}useMemo类型定义如下:
function useMemo<T>(factory: () => T, deps: DependencyList): T;DependencyList被允许包含 any类型的值，没有任何特殊的限制。
useRef
useRefhook允许我们创建一个ref去访问一个底部节点的属性。当我们需要访问某个元素的值或者推导出一些相对于DOM的信息(比如说滑动位置)时，它就能派上用场。
const refContainer = useRef(initialValue);之前我们使用createRef()，每次渲染时这个函数总是返回一个新的ref。现在useRef` 在创建后会总是返回同一个ref 这无疑会带来性能上的提升。
这个hook会返回一个ref对象(MutableRefObject类型) ，它的.current 属性会用传递进来的initialValue初始化。返回的对象会存在于组件的整个生命周期，ref 的值可以通过把它设置到一个React元素的 ref属性上来更新。
function TextInputWithFocusButton() {
// The type of our ref is an input element
const inputEl = useRef<HTMLInputElement>(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}useRef类型定义如下:
function useRef<T>(initialValue: T): MutableRefObject<T>;
interface MutableRefObject<T> {
current: T;
}useImperativeHandle
| useImperativeHandle(ref, createHandle, [inputs]) |useImperativeHandle hook 函数有3 个参数：1. React ref 2. createHandle 函数 3. 可选的 deps 数组用来暴露传给 createHandle的值
useImperativeHandle很少被用到，因为一般我们会避免使用ref。这个hook被用来自定义一个暴露给父组件的可修改的 ref 对象 ，useImperativeHandle要与forwardRef一起用:
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} ... />;
}
FancyInput = React.forwardRef(FancyInput);
// You can now get a ref directly to the DOM button:
const fancyInputRef = React.createRef();
<FancyInput ref={fancyInputRef}>Click me!</FancyInput>;组建的第二个ref 参数(FancyInput(props, **ref**)) 只在我们使用[forwardRef](https://reactjs.org/docs/forwarding-refs.html)[ 函数]时存在，(https://reactjs.org/docs/forwarding-refs.html)，使得把ref传递给子组件更加容易。
在这个例子里，渲染<FancyInput ref={fancyInputRef} /> 的父组件将可以调用fancyInputRef.current.focus()。
useImperativeHandle类型定义如下：
function useImperativeHandle<T, R extends T>(ref: Ref<T>|undefined, init: () => R, deps?: DependencyList): void;useLayoutEffect
useLayoutEffect类似于useEffect，唯一不同的是它仅仅被用来做一些DOM相关的side effects。它允许你从DOM读取值，并且在浏览器有机会重绘前同步地重新渲染。
尽可能使用**useEffect** hook，如无必要尽量避免****useLayoutEffect**。
useLayoutEffect类型定义跟useEffect很类似:
function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;useDebugValue
useDebugValue被用来调试我们的自定义hook，它允许我们在React Dev Tools中给我们的自定义hook展示一个标签。
useDebugValue(value)下面我们来自定义一个hook，这个例子展示了我们如何在自定义hook中使用 useDebugValue hook来调试。
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
// ...
// 在DevTools靠近这个hook的地方展示一个值
// e.g. "FriendStatus: Online"
useDebugValue(isOnline ? 'Online' : 'Offline');
return isOnline;
}Custom Hooks
给我们定义自己的hook的能力正是React这个更新大放异彩的地方。之前我们在React中通过 Higher Order Components 跟Render Props来共享逻辑。这导致我们的组件树变得很臃肿，也产生了一些难以阅读和理解的代码。而且，他们都是用类组件实现的，会导致一些难以优化的问题.
自定义hook允许我们组合React核心的hook到我们自己的函数中，抽象出一些组件的逻辑。自定义hook函数可以很方便地共享逻辑，像其他JavaScript函数一样导入。它们跟React自带的hook没有什么不同，也要遵守相同的规则。
我们还是使用官方文档 的例子来自定义个hook，并且加入我们的TypeScript类型。这个自定义hook使用了useState 跟 useEffect ，它将管理一个用户的在线状态。我们将假设我们有一个ChatAPI可以使用，用它来访问好友的在线状态。
对于自定义hook，我们应该遵守规则在我们的函数前加个use前缀代表我们这个函数是一个hook。把这个hook命名成useFriendStatus，先看代码，稍后我们来解释一下：
import React, { useState, useEffect } from 'react';
type Hook = (friendID: number) => boolean
interface IStatus {
id: number;
isOnline: boolean;
}
const useFriendStatus: Hook = (friendID) => {
const [isOnline, setIsOnline] = useState<boolean | null>(null);
function handleStatusChange(status: IStatus) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}useFriendStatushook 接受一个 friendID ，通过它我们可以访问这个用户的在线状态。我们使用了useState 函数并且给了个初始值null。重命名状态值为isOnline，改变这个布尔值的函数为setIsOnline。这个状态比较简单，TypeScript 可以推断出状态值跟更新函数的类型。
我们还得有个handleStatusChange 函数。这个函数有个status 参数，包含了一个isOnline 值。我们调用setIsOnline 函数来更新这个状态值。status 不能被推断，所以我们给它创建了一个接口类型。
useEffecthook’的回调注册到了这个API来检查一个朋友的在线状态，并且返回了一个清理函数可以在组件unmount的时候取消注册。当在线状态发生改变时会执行handleStatusChange 函数。一旦状态更新，它就会传递给正在使用这个hook的组件，导致其重新渲染。
我们的这个hook可以在任意的函数组件中使用，因为我们给它增加了类型定义， 使用它的组件默认都会拿到它的类型定义。
import * as React from 'react';
import useFriendStatus from './useFriendStatus';
interface IUser {
id: number;
username: string;
}
const FriendsListItem ({ user }) => {
//这里我们就知道这个返回值是个布尔值了
const isOnline = useFriendStatus(user.id);
return (
<li>
<span style={{ backgroundColor: isOnline ? 'green' : 'red }} />
<span>
{user.username}
</span>
<li>
);
};现在任何想要拿到一个用户的在线状态的组件都可以直接使用这个hook来扩展功能了。
interface FunctionComponent<P = {}> {
(props: P & { children?: ReactNode }, context?: any): ReactElement | null;
propTypes?: WeakValidationMap<P>;
contextTypes?: ValidationMap<any>;
defaultProps?: Partial<P>;
displayName?: string;
}好啦，了解清楚其中的一些类型定义之后，想必在typescript中使用hook就难不倒你了，它们就只是一些简单的函数，对吧？