使用 Typescript 开发 React Hooks

React Hook 是 React 的未来，使用 Hooks 开发项目会给我们带来更好的开发体验。本篇文章将会尝试使用 Typescript 来开发 React Hooks。

在开始正文之前，我觉得有必要先了解一下 React Hook以及一些 API。

React Hook 简介

Hook 是 React 16.8 中新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

在使用 React 开发一个Web应用时，我们经常会利用组件和自上而下的数据流来将大的 UI 拆分成小的组件，而这些组件通常是独立、可复用的。在我们使用 class 开发组件时，发现有状态的逻辑是无法抽离到函数或者组件中被复用的。这就导致随着业务的增长，最终组件会变得越来越臃肿，重复的逻辑代码会越来越多。

而 Hooks 带来的变化是，将可复用的最小单元从组件细化成了组件中的逻辑层面，这个时候 UI 和状态逻辑是解耦的，UI 只需要关注计算出来的状态数据，而 Hook 只关注状态的计算和改变。

React 为我们提供了 3 个基础 API，和 7 个进阶API。我们先来简单介绍下

useState

以前，当我们意识到组件需要有状态的时候，我们只能使用 class 通过 this.state 来声明组件的状态变量。现在通过 useState 钩子在函数组件中也能做到，useState 是允许你在 React 函数组件中添加 state 的 Hook。

import React, { useState } from 'react';
import { Button } from 'antd';
function CounterHooks() {
  // 声明 “count” state 变量用于计数
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>
        你点击了 {count} 次
      </p>
      <Button onClick={() => setCount(count + 1)}>+</Button>
    </div>
  );
}
export default CounterHooks;

上面代码使用 Hook 实现了一个累加器，我们通过调用 useState 来声明一个新的 state 变量 count 用来存储点击数，同时我们给 useState 传了一个唯一参数 0，来作为 count 的初始化值。useState 返回的数组的第二个参数是一个函数，可以用来更新 count，取名为 setCount。

useEffect

Effect Hook 可以让你在函数组件中执行副作用操作，你可以把 useEffect Hook 看作是 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数组合。常见的副作用有：获取数据，设置订阅以及手动更改 React 组件中的 DOM。

import React, { useState, useEffect } from 'react';
import { Button } from 'antd';
function CounterHooks() {
  // 声明 “count” state 变量用于计数
  const [count, setCount] = useState(0);
  // 同步更新 title
  useEffect(() => {
      document.title = `你已经点击了${count}次`;
  }, [count]);
  return (
    <div>
      <p>
        你点击了 {count} 次
      </p>
      <Button onClick={() => setCount(count + 1)}>+</Button>
    </div>
  );
}
export default CounterHooks;

Class 组件中使用 Typescript

使用 Hooks 对 Typescript 的增益