20、React常用API和Hook索引

这一小节中只给出一些API和Hook的索引,需要用到的时候可以去官网查询,如无必要此处不列出详细用法。React v1.19.1。

对Components的支持

  • 以下是开发时通用的一些功能组件
API description
<Fragment> 通常使用 <>...</> 代替,它们都允许你在不添加额外节点的情况下将子元素组合。
<Profiler> 测量 React 树的渲染性能
<StrictMode> 目的是开发过程中尽早地发现组件中的常见错误,它主要是在程序运行过程中发出警告,只在开发环境中有效
<Suspense> 也是一个过场动画的作用
  • 以下是和样式显示相关的一些组件
API description
<form> 表单,代替html中的form
<input > 代替button, checkbox, radio等,并提供原始值,验证等功能
<select> 下拉列表,配合option一同使用
<option> 下拉列表
<progress> 进度条
<textarea> 多行文本输入框
<link > 资源引入,比如css样式等
<meta> meta元素定义
<script> .js文件引入或js块代码
<style > 内联 CSS 样式表
<title > 文字标题

以上这些内置组件都支持以下属性

API description
children 子元素
ref 使用 useRef 或者 createRef 的 ref 对象,或者一个 ref 回调函数
style 内联样式
className 指定css名称
accessKey 指定快捷键
autoCapitalize 指定输入内容大小写
draggable 元素是否可拖动
hidden 此元素是否被隐藏
aria-* 为元素添加辅助信息
data-* 将一些字符串数据附加到元素上,然后可以从 props 与 state 中读取数据
onKeyUp... 还有很多类似的函数,可参考https://zh-hans.react.dev/reference/react-dom/components/common#common

对Hook的支持

API description
useActionState 在表单提交后处理完成前的一个动作,它主要通过pending等属性来控制状态,依些完成相应的插入操作
useCallback 在多次渲染中缓存函数
useContext 全局参数
useDebugValue 在调试工具中显示自定义的参数值,和在控制台输出类似
useDeferredValue 延迟更新 UI 的某些部分
useEffect 允许你 将组件与外部系统同步
useId 相当于一个id生成器,通常用于给元素指定id或生成唯一值使用
useMemo 在每次重新渲染的时候能够缓存计算的结果,可以和memo API配合使用
useReducer 向组件里面添加一个 reducer,用于事件分发
useRef 引用一个不需要渲染的值,即操作dom
useState 向组件添加一个 状态变量
相关推荐
小poop4 小时前
CSS 基础与实战:从入门到精通网页美化
前端
Csvn6 小时前
运行时性能
前端
Never_every996 小时前
位图转矢量工具哪个好?实测抠抠图AI位图转矢量工具
大数据·前端
paopaokaka_luck7 小时前
宠物门店经营管理系统(销售与库存联动、进货自动记账、 退换与退款关联、员工个人业绩、ECharts 经营分析、滞销识别与客户分层、宠物档案年龄计算)
前端·javascript·spring boot·mysql·echarts·mybatis·1024程序员节
空中湖7 小时前
用 React 写数据大屏:为什么我不建议用图表库
前端·react.js·前端框架
行者全栈架构师9 小时前
【鸿蒙心迹】让老照片变清晰:HarmonyOS 7.0 图像超分相册工程化落地与 5 个踩坑解法
架构·前端框架·开源
欣欣之王来了9 小时前
原始HTML插值:v-html指令的使用与安全风险
前端·学习·架构·项目·vue3教程
IT_陈寒9 小时前
Redis的LRU淘汰策略坑了我一整天
前端·人工智能·后端
计算机魔术师9 小时前
砍半价格、参数再涨,国产旗舰追到 Opus 鼻尖了
前端
特立独行的猫A9 小时前
10 MB 的桌面 AI 客户端:用仓颉 + 系统 WebView 替代 Electron
前端·harmonyos