面试题：React中useRef钩子在表单处理场景下的应用

Question

请描述如何在React中使用useRef钩子来获取表单元素的值，例如一个输入框和一个按钮，点击按钮后打印输入框的值。并说明相比于使用受控组件获取值，这种方式有什么优缺点。

Answer 1

1. 使用 useRef 钩子获取表单元素值的实现步骤

1. 引入 useRef：从 react 库中引入 useRef 钩子。
2. 创建 ref 对象：使用 useRef 创建一个 ref 对象，用于引用输入框元素。
3. 在输入框中使用 ref：将创建的 ref 对象传递给输入框的 ref 属性。
4. 处理按钮点击事件：在按钮的点击事件处理函数中，通过 ref.current.value 获取输入框的值并进行打印。

以下是示例代码：

import React, { useRef } from'react';

const InputForm = () => {
    const inputRef = useRef();

    const handleClick = () => {
        if (inputRef.current) {
            console.log(inputRef.current.value);
        }
    };

    return (
        <div>
            <input type="text" ref={inputRef} />
            <button onClick={handleClick}>点击打印输入框的值</button>
        </div>
    );
};

export default InputForm;

2. 与受控组件获取值相比的优缺点

优点

• 简单直接：不需要在组件状态中维护输入框的值，代码相对简洁，特别是对于只需要偶尔读取输入值而不需要实时响应输入变化的场景。
• 性能优化：因为不受制于状态更新触发的重新渲染，在某些情况下可以提高性能。例如，当输入框内容频繁变化但不需要每次都触发组件重新渲染时，useRef 不会导致不必要的重新渲染。

缺点

• 失去受控性：不能实时响应输入框的变化，无法方便地进行实时验证、格式化等操作。受控组件通过 onChange 事件实时更新状态，从而可以实时处理输入变化。
• 难以管理复杂逻辑：对于需要在输入变化时进行复杂逻辑处理（如联动其他输入框、实时计算等）的场景，使用 useRef 不如受控组件方便，因为受控组件可以在 onChange 事件中直接处理这些逻辑。