前言

React组件有两种形式，一种是函数组件（React.FC<>），一种是class组件（继承 React.Component）

一、React.FC<>

1.React.FC是函数式组件，是在TypeScript使用的一个泛型，FC就是FunctionComponent的缩写，事实上React.FC可以写成React.FunctionComponent：

const App: React.FC<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

2.React.FC 包含了 PropsWithChildren 的泛型，不用显式的声明 props.children 的类型。React.FC<> 对于返回类型是显式的，而普通函数版本是隐式的（否则需要附加注释）。

3.React.FC提供了类型检查和自动完成的静态属性：displayName，propTypes和defaultProps（注意：defaultProps与React.FC结合使用会存在一些问题）。

4.我们使用React.FC来写 React 组件的时候，是不能用setState的，取而代之的是useState()、useEffect等 Hook API。

二、class xx extends React.Component

如需定义 class 组件，需要继承 React.Component。React.Component是类组件，在TypeScript中，React.Component是通用类型（ React.Component<PropType, StateType>），因此要为其提供（可选）prop和state类型参数：

class SampleModel extends React.Component {
  state = {
    createModalVisible:false,
  };

  handleModalVisible =(cVisible:boolean)=>{
    this.setState({createModalVisible:cVisible});
  };
  return {
  	<Button onClick={()=>this.handleModalVisible(true)} >样例</Button>
  	<Model 
        onCancel={() => handleModalVisible(false)} 
        ModalVisible={this.state.createModalVisible} 
        /> 
  }

参考文章

【React+Typescript】React.FC与React.Component使用和区别 - 掘金 (juejin.cn)