React-useTypescript!

作者: 小小小小小粽子 | 来源:发表于2020-09-14 00:12 被阅读0次

React-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

高级Hook

每个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 个参数：

React ref
createHandle 函数
可选的 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就难不倒你了，它们就只是一些简单的函数，对吧？

React-useTypescript!
在React v16.8新增了Hook，它提供了在函数组件中访问状态和React生命周期等能力，这些函数可以在程序...

React-useTypescript!

对于函数组件写法的改变

Hooks概览

useState

useEffect

useContext

useReducer

useCallback

useMemo

useRef

useImperativeHandle

useLayoutEffect

useDebugValue

Custom Hooks

相关文章

React-useTypescript!

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读