这一小节中只给出一些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 | 向组件添加一个 状态变量 |