React 进阶特性

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 &#