React 和 TypeScript 联合使用,React 提供了一些内置类型

在 React 和 TypeScript 联合使用时，React 提供了一些内置类型来帮助你定义组件的属性（props）、状态（state）和其他常见的模式。以下是一些详细的内置类型说明：

常用的 React 类型

React.FC / React.FunctionComponent
- 用于定义函数组件的类型。
- 它包含 children 属性，即使你没有显式地在你的类型定义中声明它们。
- 例子:
  tsx 复制代码
```
interface MyComponentProps {
  title: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ title }) => (
  <div>{title}</div>
);
```
React.Component / React.PureComponent
- 用于定义类组件的类型。
- React.Component<Props, State> 接受两个泛型参数，第一个是 props 的类型，第二个是 state 的类型。
- React.PureComponent 类似于 React.Component，但它通过浅比较 props 和 state 来帮助避免不必要的渲染。
- 例子:
  tsx 复制代码
```
interface MyComponentProps { /* ... */ }
interface MyComponentState { /* ... */ }

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  /* ... */
}
```
React.ReactNode
- 表示任何可以被渲染的内容，包括 JSX 元素、字符串、数字、null、布尔值等。
- 例子:
  tsx 复制代码
```
const content: React.ReactNode = 'This is a text node';
const element: React.ReactNode = <div>{content}</div>;
```
React.ReactElement
- 表示一个 JSX 元素。
- 通常在渲染函数中返回 JSX 时使用。
- 例子:
  tsx 复制代码
```
const element: React.ReactElement = <div>Hello World</div>;
```
React.CSSProperties
- 用于定义传递给 style 属性的对象类型。
- 例子:
  tsx 复制代码
```
const style: React.CSSProperties = { color: 'red', fontSize: 20 };
```
React.ReactEventHandler
- 用于定义处理事件的函数类型，如点击、改变等。
- 例子:
  tsx 复制代码
```
const handleClick: React.ReactEventHandler<HTMLButtonElement> = (event) => {
  // ...
};
```
React.Ref
- 用于定义引用类型，可以引用 DOM 元素或类组件的实例。
- 例子:
  tsx 复制代码
```
const myRef = React.useRef<HTMLDivElement>(null);
```

事件处理相关类型

React.ChangeEvent

用于 onChange 事件处理器中的事件对象。

例子:

tsx 复制代码

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  console.log(event.currentTarget.value);
};

React.FormEvent

用于表单事件，如提交表单。

例子:

tsx 复制代码

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  // ...
};

高级类型工具

React.ComponentProps
- 用于获取组件的 props 类型。
- 例子:
  tsx 复制代码
```
type MyComponentProps = React.ComponentProps<typeof MyComponent>;
```
React.ComponentPropsWithRef
- 类似于 React.ComponentProps，但也包括 ref 属性。
- 例子:
  tsx 复制代码
```
type MyComponentProps = React.ComponentPropsWithRef<typeof MyComponent>;
```
React.ComponentPropsWithoutRef
- 类似于 React.ComponentProps，但不包括 ref 属性。
- 例子:
  tsx 复制代码
```
type MyComponentProps = React.ComponentPropsWithoutRef<typeof MyComponent>;
```

使用这些内置类型，你可以为你的 React 应用创建精确的类型定义，这样不仅可以提高代码的可读性和可维护性，还能在编写代码时获得更好的类型检查和自动完成功能。