ReactJS - 參考 API

React JS 是一個用於構建使用者介面的 JavaScript 庫。React 允許開發人員高效地建立互動式 UI 元件。因此，本參考試圖記錄 React JS 提供的每個內建函式、Hooks、元件和其他基本功能。在本教程中，我們將使用 React@18 版本。

在 React JS 中，函式根據其功能和用法組織成兩個主要部分。以下是 React JS 中的主要函式

內建 Hooks

在這裡，我們包含了所有可以在元件中與不同 React 功能一起使用的內建 Hooks。

序號	函式和描述
1	use() 讓我們讀取資源的值。
2	useDebugValue() 為自定義 Hook 新增標籤。
3	useDeferredValue() 讓我們延遲更新使用者介面的一部分。
4	useId() 用於生成唯一 ID。
5	useImperativeHandle() 幫助我們連線到子元件。
6	useInsertionEffect() 允許我們向 DOM 插入元素。
7	useLayoutEffect() 用於執行佈局測量。
8	useSyncExternalStore() 讓我們訂閱外部儲存。
9	useTransition() 幫助我們更新狀態而不阻塞 UI。

在這裡，我們記錄了您可以在程式碼中使用的元件以及其他元件。

序號	函式和描述
1	<Suspense> 顯示一個回退，直到其子項完成載入。

React 提供了一些內建 API，這些 API 可用於定義元件。

序號	函式和描述
1	cache() 快取資料獲取的結果。
2	createContext() 它建立一個元件可以提供的上下文。
3	lazy() 允許我們延遲載入元件的程式碼。
4	startTransition() 更新狀態而不阻塞 UI。

這些是與 React 伺服器元件相容的捆綁程式的指令。

序號	函式和描述
1	use client 用於標記在客戶端上執行的程式碼。
2	use server 它用於標記伺服器端函式。

有一些內建的 React DOM Hooks 在瀏覽器 DOM 環境中執行。這些 Hooks 不適合非瀏覽器環境，例如 Android、iOS 和 Windows 應用程式。

序號	函式和描述
1	useFormState() 根據表單操作的結果更新狀態。
2	useFormStatus() 提供上次表單提交的狀態資訊。

在本節中，我們包含了一些支援所有內建 HTML 和 SVG 元件的事件處理函式。

序號	函式和描述
1	事件物件充當我們的程式碼和瀏覽器事件之間的橋樑。
2	AnimationEvent 處理程式 CSS 動畫事件的事件處理程式型別。
3	ClipboardEvent 處理程式它是剪貼簿 API 事件的事件處理程式型別。
4	CompositionEvent 處理程式它是輸入法編輯器事件的事件處理程式型別。
5	DragEvent 處理程式 HTML 拖放 API 事件的事件處理程式型別。
6	FocusEvent 處理程式焦點事件的事件處理程式型別。
7	InputEvent 處理程式 onBeforeInput 事件的事件處理程式型別。
8	KeyboardEvent 處理程式處理鍵盤事件的事件。
9	MouseEvent 處理程式滑鼠事件的事件處理程式型別。
10	PointerEvent 處理程式它是指標事件的事件處理程式型別。
11	TouchEvent 處理程式觸控事件的事件處理程式型別。
12	TransitionEvent 處理程式 CSS 過渡事件的事件處理程式型別。
13	UIEvent 處理程式通用使用者介面事件的事件處理程式型別。
14	WheelEvent 處理程式 onWheel 事件的事件處理程式型別。

react-dom 包包含僅支援 Web 應用程式的方法。在本節中，我們包含了 API、客戶端 API 和伺服器 API。

序號	函式和描述
1	createPortal() 獲取當前的 Axes 例項。
2	flushSync() 建立一個新的 Axes 例項。
3	findDOMNode() 關閉當前圖形。
4	createRoot() 清除當前圖形。
5	hydrateRoot() 檢查是否存在具有給定圖形編號的圖形。
6	renderToReadableStream() 建立一個新圖形。
7	renderToString() 獲取當前圖形。
8	renderToStaticMarkup() 獲取所有圖形的標籤。
9	cloneElement() 將當前 Axes 例項設定為給定的 axes。
10	isValidElement() 向等高線圖新增等高線標籤。
11	PureComponent 它是常規 Component 的增強版本。

這些元件是定義為 JavaScript 類的 React 元件的基類。React 仍然支援類元件，因此我們在下面的部分中包含了它們。

序號	函式和描述
1	componentDidCatch() 當某個子元件丟擲錯誤時使用。
2	componentDidUpdate() 在元件重新渲染後立即呼叫。
3	componentWillUnmount() 在刪除元件之前呼叫它。
4	forceUpdate() 強制元件重新渲染。
5	getChildContext() 指定舊版上下文的的值。
6	getSnapshotBeforeUpdate() 使您的元件能夠捕獲某些資訊。
7	static contextType 讓我們指定使用哪個舊版上下文。
8	static defaultProps 用於設定類的預設 props。
9	static propTypes 宣告元件接受的 props 型別。
10	static getDerivedStateFromError() 當子元件在渲染過程中丟擲錯誤時呼叫它。
11	static getDerivedStateFromProps() 用於在呼叫 render 之前呼叫它。
12	UNSAFE_componentWillMount() 它是在伺服器渲染期間執行的生命週期方法。
13	UNSAFE_componentWillReceiveProps() 當元件接收新 props 時使用。
14	UNSAFE_componentWillUpdate() 在使用新的 props 或狀態渲染之前呼叫它。
15	createElement() 建立 React 元素，作為編寫 JSX 的替代方法。
16	createRef() 建立一個 ref 物件以包含任意值。

測試實用程式用於簡化在您選擇的測試框架中測試 React 元件。在本節中，我們包含了一些用於執行測試的函式。

序號	函式和描述
1	act() 包裝與元件互動的程式碼。
2	mockComponent() 建立 React 元件的模擬版本。
3	isElement() 檢查給定物件是否為 React 元素。
4	isElementOfType() 檢查給定物件是否為特定型別的元素。
5	isDOMComponent() 檢查給定物件是否為 DOM 元件。
6	isCompositeComponent() 檢查給定物件是否為複合元件。
7	isCompositeComponentWithType() 檢查給定物件是否為特定型別的複合元件。
8	findAllInRenderedTree() 查詢樹中元件的所有已渲染例項。
9	scryRenderedDOMComponentsWithClass() 查詢具有特定類的所有 DOM 元件。
10	findRenderedDOMComponentWithClass() 在已渲染的樹中查詢具有特定類的第一個 DOM 元件。
11	scryRenderedDOMComponentsWithTag() 查詢具有特定標籤的所有 DOM 元件。
12	findRenderedDOMComponentWithTag() 查詢具有特定標籤的第一個 DOM 元件。
13	scryRenderedComponentsWithType() 查詢特定型別的所有複合元件。
14	findRenderedComponentWithType() 查詢特定型別的第一個複合元件。
15	renderIntoDocument() 將 React 元件渲染到 DOM 中。
16	Simulate() 用於模擬使用者互動。

測試渲染器是一個用於將 React 元件渲染為純 JavaScript 物件的實用程式，無需 DOM。在本節中，我們包含了一些此實用程式的功能。

序號	函式和描述
1	TestRenderer.create() 在測試渲染器例項中渲染 React 元件。
2	TestRenderer.act() 執行與測試渲染器的互動。
3	testRenderer.toJSON() 返回渲染的元件樹的 JSON 表示形式。
4	testRenderer.toTree() 返回顯示渲染的元件樹的樹結構。
5	testRenderer.update() 手動觸發渲染元件的更新。
6	testRenderer.unmount() 解除安裝渲染的元件。
7	testRenderer.getInstance() 返回根元件的例項。
8	testRenderer.root() 提供對元件樹根節點的訪問。
9	testInstance.find() 在元件樹中查詢節點。
10	testInstance.findByType() 根據節點型別在元件樹中查詢節點。
11	testInstance.findByProps() 根據節點屬性在元件樹中查詢節點。
12	testInstance.findAll() 查詢元件樹中的所有節點。
13	testInstance.findAllByType() 根據節點型別查詢元件樹中的所有節點。
14	testInstance.findAllByProps() 根據節點屬性查詢所有節點。
15	testInstance.instance 表示元件的實際例項。
16	testInstance.type 表示元件的型別。
17	testInstance.props 表示傳遞給元件的 props。
18	testInstance.parent 表示元件樹中的父節點。
19	testInstance.children 顯示元件樹中的子節點。

列印頁面