20、React常用API和Hook索引

這一小節中只給出一些API和Hook的索引,需要用到的時候可以去官網查詢,如無必要此處不列出詳細用法。React v1.19.1。

對Components的支持

  • 以下是開發時通用的一些功能組件
APIdescription
<Fragment>通常使用 <>…</> 代替,它們都允許你在不添加額外節點的情況下將子元素組合。
<Profiler>測量 React 樹的渲染性能
<StrictMode>目的是開發過程中盡早地發現組件中的常見錯誤,它主要是在程序運行過程中發出警告,只在開發環境中有效
<Suspense>也是一個過場動畫的作用
  • 以下是和樣式顯示相關的一些組件
APIdescription
<form>表單,代替html中的form
<input >代替button, checkbox, radio等,并提供原始值,驗證等功能
<select>下拉列表,配合option一同使用
<option>下拉列表
<progress>進度條
<textarea>多行文本輸入框
<link >資源引入,比如css樣式等
<meta>meta元素定義
<script>.js文件引入或js塊代碼
<style >內聯 CSS 樣式表
<title >文字標題

以上這些內置組件都支持以下屬性

APIdescription
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的支持

APIdescription
useActionState在表單提交后處理完成前的一個動作,它主要通過pending等屬性來控制狀態,依些完成相應的插入操作
useCallback在多次渲染中緩存函數
useContext全局參數
useDebugValue在調試工具中顯示自定義的參數值,和在控制臺輸出類似
useDeferredValue延遲更新 UI 的某些部分
useEffect允許你 將組件與外部系統同步
useId相當于一個id生成器,通常用于給元素指定id或生成唯一值使用
useMemo在每次重新渲染的時候能夠緩存計算的結果,可以和memo API配合使用
useReducer向組件里面添加一個 reducer,用于事件分發
useRef引用一個不需要渲染的值,即操作dom
useState向組件添加一個 狀態變量

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/83263.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/83263.shtml
英文地址,請注明出處:http://en.pswp.cn/web/83263.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Python爬蟲實戰:研究feedparser庫相關技術

1. 引言 1.1 研究背景與意義 在當今信息爆炸的時代,互聯網上存在著海量的信息資源。RSS(Really Simple Syndication)作為一種標準化的信息聚合技術,被廣泛用于網站內容的發布和訂閱。通過 RSS,用戶可以方便地獲取網站更新的內容,而無需頻繁訪問各個網站。 然而,互聯網…

HTML實現的2048游戲

以下是一個純HTML實現的2048游戲代碼&#xff0c;包含CSS和JavaScript&#xff1a; <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>2048 Game</title><style>body {font-family: Arial, sans-serif;text-a…

使用Python 構建支持主流大模型與 Ollama 的統一接口平臺

?? 背景概述 近年來,隨著大語言模型(LLM)的蓬勃發展,OpenAI 的 GPT 系列、Google 的 Gemini、Anthropic 的 Claude、以及開源的 Ollama 本地模型等,逐漸成為自然語言處理、智能問答、AI 助手等應用的基礎組件。 開發者在使用這些模型時常面臨如下問題: 各模型接口不統…

計算機系統概述(4)

計算機系統層次結構&#xff1a;硬件層、系統層、應用層。 計算機的基本硬件系統由運算器、控制器、存儲器、輸入設備和輸出設備5大部件組成。 運算器、控制器等部件被集成在一起統稱為中央處理單元CPU。 存儲器是計算機系統中的記憶設備&#xff0c;分為內部存儲器和外部存…

Linux 下的COW機制(copy-on-write)

Linux通過MMU進行虛擬地址到物理地址的轉換&#xff0c;當進程執行fork()后&#xff0c;會把頁中的權限設置為RD-ONLY&#xff08;只讀&#xff09;。 MMU&#xff08;內存管理單元&#xff09; MMU本質是一個集成在CPU核心的硬件電路模塊&#xff0c;其核心任務是實現…

客戶案例 | 短視頻點播企業海外視頻加速與成本優化:MediaPackage+Cloudfront 技術重構實踐

01技術背景與業務挑戰 某短視頻點播企業深耕國內用戶市場&#xff0c;但其后臺應用系統部署于東南亞印尼 IDC 機房。 隨著業務規模擴大&#xff0c;傳統架構已較難滿足當前企業發展的需求&#xff0c;企業面臨著三重挑戰&#xff1a; ① 業務&#xff1a;國內用戶訪問海外服…

開發Vue.js組件的二三事

Vue.js作為一款漸進式JavaScript框架&#xff0c;其組件化開發模式是其核心優勢之一。在多年的Vue開發實踐中&#xff0c;我積累了一些組件開發的經驗和思考&#xff0c;在此與大家分享。 組件設計原則 單一職責原則 每個組件應該只關注一個特定的功能或UI部分。如果一個組件…

實現多路視頻截圖預覽之后上傳到后臺系統

********************父組件********************** <div class"camera-box" v-loading"i.loading"> <div class"camera-box-inner" v-for"(x, y) in i.children" :key"y children x.featureCode" v-show"…

分布式鎖-Redisson實現

目錄 本地鎖的局限性 Redisson解決分布式鎖問題 在分布式環境下&#xff0c;分布式鎖可以保證在多個節點上的并發操作時數據的一致性和互斥性。分布式鎖有多種實現方案&#xff0c;最常用的兩種方案是&#xff1a;zookeeper和redis&#xff0c;本文介紹redis實現分布式鎖方案…

【辦公類-48-04】202506每月電子屏臺賬匯總成docx-5(問卷星下載5月范圍內容,自動獲取excel文件名,并轉移處理)

背景需求&#xff1a; 1-4月電子屏表格&#xff0c;都是用這個代碼將EXCEL數據整理成分類成3個WORD表格。 【辦公類-48-04】20250118每月電子屏臺賬匯總成docx-4&#xff08;提取EXCLE里面1月份的內容&#xff0c;自制月份文件夾&#xff09;-CSDN博客文章瀏覽閱讀1.2k次&…

【websocket】安裝與使用

websocket安裝與使用 1. 介紹2. 安裝3. websocketpp常用接口4. Websocketpp使用4.1 服務端4.2 客戶端 1. 介紹 WebSocket 是從 HTML5 開始支持的一種網頁端和服務端保持長連接的 消息推送機制。 傳統的 web 程序都是屬于 “一問一答” 的形式&#xff0c;即客戶端給服務器發送…

微算法科技(NASDAQ:MLGO)基于信任的集成共識和灰狼優化(GWO)算法,搭建高信任水平的區塊鏈網絡

隨著數字化轉型的加速&#xff0c;區塊鏈技術作為去中心化、透明且不可篡改的數據存儲與交換平臺&#xff0c;正逐步滲透到金融、供應鏈管理、物聯網等多個領域&#xff0c;探索基于信任的集成共識機制&#xff0c;并結合先進的優化算法來提升區塊鏈網絡的信任水平&#xff0c;…

【項目實戰】通過多模態+LangGraph實現PPT生成助手

PPT自動生成系統 基于LangGraph的PPT自動生成系統&#xff0c;可以將Markdown文檔自動轉換為PPT演示文稿。 功能特點 Markdown解析&#xff1a;自動解析Markdown文檔結構PPT模板分析&#xff1a;分析PPT模板的布局和風格智能布局決策&#xff1a;匹配內容與合適的PPT布局自動…

貝葉斯優化+LSTM+時序預測=Nature子刊!

貝葉斯優化與LSTM的融合在時間序列預測領域取得了顯著成效&#xff0c;特別是在處理那些涉及眾多超參數調整的復雜問題時。 1.這種結合不僅極大提高了預測的精確度&#xff0c;還優化了模型訓練流程&#xff0c;提升了效率和成本效益。超參數優化的新篇章&#xff1a;LSTM因其…

AWSLambda之設置時區

目標 希望Lambda運行的時區是東八區。 解決 只需要設置lambda的環境變量TZ為東八區時區即可&#xff0c;即Asia/Shanghai。 參考 使用 Lambda 環境變量

RAG系統向量數據庫選型與Prompt Engineering魯棒性測試實踐

引言 在AI應用不斷落地的今天&#xff0c;RAG&#xff08;Retrieval-Augmented Generation&#xff0c;檢索增強生成&#xff09;和Prompt Engineering&#xff08;提示工程&#xff09;成為大模型工程師和測試工程師的核心武器。 一方面&#xff0c;RAG系統依賴強大的向量數據…

2.Socket 編程 UDP

1.UDP網絡編程 0.背景知識 自實現IP轉化 相關函數理解 IP相關理解 1. V2版本 - DictServer封裝版 實現一個簡單的英譯漢的網絡字典 Dict.hpp dictionary.txt InetAddr.hpp ? 在 InetAddr 中&#xff0c;重載一下方便對用戶是否是同一個進行比較 Log.hpp makefile Mutex.hpp…

數據可視化交互

目錄 【實驗目的】 【實驗原理】 【實驗環境】 【實驗步驟】 一、安裝 pyecharts 二、下載數據 三、實驗任務 實驗 1&#xff1a;AQI 橫向對比條形圖 代碼說明&#xff1a; 運行結果&#xff1a; 實驗 2&#xff1a;AQI 等級分布餅圖 實驗 3&#xff1a;多城市 AQI…

【MATLAB去噪算法】基于CEEMDAN聯合小波閾值去噪算法(第四期)

CEEMDAN聯合小波閾值去噪算法相關文獻 一、EMD 與 EEMD 的局限性 &#xff08;1&#xff09;EMD (經驗模態分解) 旨在自適應地將非線性、非平穩信號分解成一系列 本征模態函數 (IMFs)&#xff0c;這些 IMFs 從高頻到低頻排列。 核心問題&#xff1a;模態混合 (Mode Mixing) 同…

大話軟工筆記—架構模型

1. 架構模型1—拓撲圖 &#xff08;1&#xff09;拓撲圖概念 拓撲圖&#xff0c;將多個軟件系統用網絡圖連接起來的表達方式。 &#xff08;2&#xff09;拓撲圖分類 總線型結構 比較普遍采用的方式&#xff0c;將所有的系統接到一條總線上。 星狀結構 各個系統通過點到…