react + Typescript 中 react有多少内置的类型 分别是什么

react + Typescript 中 react有多少内置的类型 分别是什么

React 和 TypeScript 结合使用时,React 提供了一系列的内置类型(也称为类型定义或类型别名)来帮助你在 TypeScript 中编写类型安全的代码。这些类型定义涵盖了 React 的各个方面,从组件类和函数组件到组件属性(props)、状态(state)和事件处理等。

以下是一些常用的 React 内置类型:

  1. ReactNode: 用于描述可以被渲染的内容,比如 JSX 表达式、字符串、数字、或者是这些类型的数组等。

  2. ReactElement: 通常由 JSX 表达式返回的类型,代表了虚拟 DOM 元素。

  3. ReactComponentElement: 特定于类组件或函数组件的元素。

  4. ReactFragment: 用于描述一组可以被渲染的子元素,不需要额外的父节点。

  5. ReactPortal: 用于将子节点渲染到不同 DOM 子树的类型。

  6. RefObject: 用于描述通过 React.createRef 创建的 ref 对象。

  7. MutableRefObject: 用于描述通过 useRef 创建的可变 ref 对象。

  8. ReactElement: 代表 React 元素,是由 React.createElement() 返回的类型。

  9. ComponentType<P>: 用于描述一个接受泛型参数 P 的类组件或函数组件。

  10. FunctionComponent<P>FC<P>: 用于描述一个接受泛型参数 P 的函数组件。

  11. ClassComponent<P, S>: 用于描述一个接受泛型参数 PS 的类组件。

  12. ReactChild | ReactChildren: 用于描述可以作为子元素的类型。

  13. ReactEventHandler: 用于描述事件处理函数的类型。

  14. SyntheticEvent: 用于描述 React 封装的合成事件对象。

  15. ChangeEvent, MouseEvent, KeyboardEvent 等: 表示特定类型的合成事件。

  16. PropsWithChildren<P>: 用于描述一个组件的属性 P,并且这个组件可以有子元素。

  17. PropsWithRef<P>: 用于描述一个组件的属性 P,并且这个组件可以接受 ref。

  18. Context<T>: 用于描述 React 上下文对象的类型。

  19. Provider<T>Consumer<T>: 用于描述 React 上下文的提供者和消费者组件。

  20. ReactLazy: 用于描述通过 React.lazy 创建的懒加载组件。

  21. ReactMemo: 用于描述通过 React.memo 创建的记忆化组件。

这些类型定义是通过 React 的 TypeScript 类型定义文件(通常是 @types/react 包)提供的,是开发 TypeScript 项目时使用 React 的基础。随着 React 的版本更新,可能会引入新的类型或弃用旧的类型,因此建议查看具体版本的类型定义文件或官方文档以获取最新的信息。

相关推荐
晴天1620 分钟前
多个 VS Code 项目会导致 Chrome 和 Electron 应用一起卡住?-Day30
前端·chrome·electron
BigTopOne7 小时前
【WebRtc】DTLS-SRTP 加密完整流程详解
前端
陈随易7 小时前
pm2 替代品,nodejs&bun 线上部署必备工具
前端·后端·程序员
单线程_017 小时前
从案例分析 Vue3 Tokenizer 源码一
前端·javascript·vue.js
BigTopOne7 小时前
【WebRtc】-ICE Candidate 与 STUN/TURN 原理详解
前端
l1258657 小时前
# LangGraph Memory机制深度解析:短期记忆与长期记忆的工程实践
前端·人工智能·python·langchain·bootstrap
码视野8 小时前
基于 Spring Boot + Vue3 的【大学英语四六级 (CET-4/6) 作文智能评分与句式润色系统】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端·vue3
大模型码小白8 小时前
AI 对话流性能调优:万级消息的虚拟滚动落地
java·大数据·前端·javascript·人工智能·算法·机器学习
xm_xm_xm_19 小时前
react17版本以前类组件常用操作
前端·javascript·react.js
ly768910 小时前
Web 性能优化实战:从 Core Web Vitals 到工程化性能治理
前端·性能优化