這一小節中只給出一些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 | 向組件添加一個 狀態變量 |