## React.FC\<Props> | React.FunctionComponent\<Props>
申明一个函数组件
```tsx
const MyComponent: React.FC<Props> = ...
```
## React.Component\<Props, State>
申明一个类组件
```tsx
class MyComponent extends React.Component<Props, State> { ...
```
## React.ComponentType\<Props>
申明一个复合组件 (React.FC | React.Component)，一般在高阶组件中使用
```tsx
const withState = <P extends WrappedComponentProps>(
WrappedComponent: React.ComponentType<P>,
) => { ...
```
## React.ComponentProps\<typeof XXX>
获取指定组件XXX的Props类型（警告：不适用于静态声明的默认props和通用props）
```tsx
type MyComponentProps = React.ComponentProps<typeof MyComponent>;
```
## React.ReactElement | JSX.Element
React元素类型的概念 - 表示DOM原生组件（例如`<div />`），或用户定义的复合组件（例如`<MyComponent />`）
```tsx
const elementOnly: React.ReactElement = <div /> || <MyComponent /> ;
```
## React.ReactNode
表示任何可能的React节点类型(基本上是ReactElement(包括Fragments和Portals) +基本JS类型)
```tsx
const elementOrPrimitive: React.ReactNode = 'string' || 0 || false || null || undefined || <div /> || <MyComponent />;
const Component = ({ children: React.ReactNode }) => ...
```
## React.CSSProperties
在JSX中表示样式对象的类型 - 用于css-in-js样式
```tsx
const styles: React.CSSProperties = { flexDirection: 'row', ...
const element = <div style={styles} ...
```
## React.HTMLProps\<HTMLXXXElement>
表示指定HTML元素的Props的类型 - 用于扩展HTML元素
```tsx
const Input: React.FC<Props & React.HTMLProps<HTMLInputElement>> = props => { ... }
<Input about={...} accept={...} alt={...} ... />
```
## React.ReactEventHandler\<HTMLXXXElement>
表示通用事件处理程序的类型 - 用于声明事件处理程序
```tsx
const handleChange: React.ReactEventHandler<HTMLXXXElement> = (ev) => { ... }
<input onChange={handleChange} ... />
```
## React.XXXEvent\<HTMLXXXElement>
表示更具体的事件处理程序类型，一些常见事件示例：
> ChangeEvent, FormEvent, FocusEvent, KeyboardEvent, MouseEvent, DragEvent, PointerEvent, WheelEvent, TouchEvent
```tsx
const handleChange = (ev: React.MouseEvent<HTMLXXXElement>) => { ... }
<div onMouse={handleChange } ... />
```
