函数式组件

Posted 2021-04-09 剑指前端

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

1、userState

实现 this.state 以及 this.setState()

2、useEffect

实现 componentWillUnmonut + componentDidMount + componentDidUpdate 的效果，useEffect 接受一个回调函数，这个回调函数内代码会在 componentDidMount，componentDidUpdate 时执行。回调函数的返回值应该是一个函数，这个函数会在 componentWillUnmount 被执行。

3、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;