React & Typescript：组件的入门实例

React 组件的演化

组件复用方式	优势	劣势	状态
类组件（Class）	发展时间长，接受度广泛	只能继承父类	作为一种传统开发模式，会长期存在
Mixin	可以复制任意对象的任意多个方法，实现组件间的复用	组件间相互依赖、耦合，可能产生冲突，不利于维护	被官方抛弃
高阶组件（HOC）	利用装饰器模式，在不改变组件的基础上，动态地为其添加新的能力	嵌套过多调试困难，需要遵循某些约定（不改变原始组件，透传 props 等）	能力强大，广泛引用
Hooks	替代类组件，多个 Hooks 间互不影响，避免嵌套地狱，开发效率高	切换新思维需要成本	React 的未来（官方主推）

函数组件

普通函数组件

上一篇 中，我们创建了一个无状态组件（没有状态影响，作为纯静态展示） ，同时它也是一个函数组件。

import React from "react";
import { Button } from "antd";

interface Greeting {
  name: string;
  firstName: string;
  lastName: string;
}

const Hello = (props: Greeting) => hello {props.name};

Hello.defaultProps = {
  firstName: "",
  lastName: "",
};

export default Hello;

React.FC

在 react 的声明文件中，对函数组件单独定义了一个类型 – React.FC:

type React.FC
 = React.FunctionComponent

现在使用 React.FC 重新定义一下 ：

const Hello: React.FC = ({ name, firstName, lastName }) => (
  hello {name}
);

使用 React.FC 后的区别

FC 是 FunctionComponent 的简写，这个类型定义了默认的 props (如 children)。