1. ref
ref 是 React 提供的一種機制，用于訪問和操作 DOM 元素或 React 組件的實例。它可以用于獲取某個 DOM 元素的引用，從而執行一些需要直接操作 DOM 的任務，例如手動設置焦點、選擇文本或觸發動畫。
1.1. 使用 ref 的步驟
1. 創建一個 ref：使用 React.createRef 或 useRef Hook 創建一個 ref；
2. 將 ref 傳遞給 React 元素：將 ref 賦值給 React 元素的 ref 屬性；
3. 訪問 ref：通過 ref.current 訪問元素或組件實例；
1.2. 示例
import React, { useRef, useEffect } from 'react';function TextInput() {const inputRef = useRef(null);useEffect(() => {// 組件掛載后，input 元素獲取焦點inputRef.current.focus();}, []);return <input ref={inputRef} type="text" />
}export default TextInput;1.3. ref 的函數形式
ref 可以直接賦值或通過函數進行賦值，在早期，ref 還支持傳遞字符串，但是新版本已經不再推薦這種寫法。
import React, { useRef, useEffect } from 'react';function TextInput() {const inputRef = useRef(null);useEffect(() => {// 組件掛載后，input 元素獲取焦點inputRef.current.focus();}, []);return <input ref={node => inputRef.current = node} type="text" />
}export default TextInput;2. forwardRef
forwardRef 是一個用于轉發 ref 到子組件的方式，它允許父組件訪問子組件的 DOM 節點或組件實例。它常用于封裝第三方 UI 庫組件或實現高階組件。
注意：React19 棄用改用 props 傳值。
2.1. 使用 forwardRef
1. 定義一個函數組件：使用 React.forwardRef 包裹函數組件，使其能夠接收 ref；
2. 轉發 ref：在組件內部，將 ref 傳遞給某個子組件或 DOM 元素；
2.2. 示例
import React, { forwardRef } from 'react';const FancyButton = forwardRef((props, ref) => (<button ref={ref} className="fancy-button">{props.children}</button>
));function App() {const buttonRef = useRef(null);useEffect(() => {console.log(buttonRef.current); // 輸出 <button> 元素}, []);return <FancyButton ref={buttonRef}>Click me</FancyButton>;
}export default App;
)
