React.ts（函数式组件）

  一般，在一个文件中，我们应该只写一个类组件，其他子组件最好是函数式组件，但是用 javascript 实现的函数式组件不能访问 this.ref 和 this.state ，而且也没有生命周期钩子函数，所以在 typescript 中官方还提供了 React.FC<> 来创建函数式组件，它是 typescript 中的一个泛型，这个泛型提供了：
useState
  实现 this.state 以及 this.setState()

useEffect
  实现 componentWillUnmonut + componentDidMount +componentDidUpdate 的效果，useEffect接受一个回调函数，这个回调函数内代码会在 componentDidMount，componentDidUpdate 时执行。回调函数的返回值应该是一个函数，这个函数会在 componentWillUnmount 被执行。
  默认情况下，它在第一次渲染之后和每次更新之后都会执行。（我们稍后会谈到如何控制它。）你可能会更容易接受 effect 发生在“渲染之后”这种概念，不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。
  与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。如果你的 effect 返回一个函数，React 将会在执行清除操作时调用它。

useRef
  实现 this.ref，创建的对象.current 就是被我们绑定的元素
下面举个例子说明用法（代码不完整，只需关注局部）

import React, {
    
    useRef, useState, useEffect} from 'react';
import ProTable, {
    
     ActionType } from '@ant-design/pro-table';
import {
    
     getRegions } from '@/utils/region'
......

const TableList: React.FC<{
    
    }> = () => {
    
    
  const actionRef = useRef<ActionType>();
  // 数据状态
  const [selectedId, setSelectedId] = useState<number>();
  const [addVisible, setAddVisible] = useState<boolean>(false);
  const [region, setRegion] = useState<[]>();
  ......
  
  useEffect(() => {
    
    
    getRegions().then((res) => {
    
    
      setRegion(res);
    });
  }, []);
  
  ......
  
   const addClose = (ok) => {
    
    
    if (ok) {
    
    
      actionRef.current.reload();
    }
    setAddVisible(false);
  }
  
  // 显示内容
  return (
      <ProTable
        {
    
    ...defaultTableProps}
        rowKey='id'
        actionRef={
    
    actionRef}
        beforeSearchSubmit={
    
    beforeSearchSubmit}
        request={
    
    request}
        columns={
    
    columns}
        search={
    
    {
    
    optionRender}}
      />
      <AddDrawer visible={
    
    addDrawerVisible} onClose={
    
     addClose }/>
  );
}
export default TableList;