在 React 中编写表单组件时，为什么应该使用 ref.current.value 而不是 e.target.value

在 React 表单处理中，正确获取输入元素的当前值对于表单状态管理和用户交互至关重要。通常，开发者在处理表单的 onChange 事件时，会面临一个选择：是通过事件对象 e 使用 e.target.value，还是通过引用（ref）使用 ref.current.value。本文将探讨这两种方法的适用场景，并论证在 React 中编写表单组件时，为何推荐使用 ref.current.value。

引言

React 通过声明式的数据流和组件化的用户界面，提供了一种高效的方式来构建和管理表单。在表单的 onChange 事件处理中，获取输入的当前值是常见的需求。然而，选择不同的方法可能会对组件的性能和行为产生影响。

使用 e.target.value 的场景

在原生 JavaScript 和许多其他前端框架中，e.target.value 是获取输入元素当前值的标准方式。在 React 中，这同样适用：

function handleChange(event) {
  console.log(event.target.value); // 获取输入的当前值
}

使用 ref.current.value 的场景

React 的 ref 提供了对 DOM 元素或组件实例的直接引用。通过 ref，你可以访问组件的属性和状态：

function MyComponent() {
  let inputRef = useRef(null);

  function handleChange() {
    console.log(inputRef.current.value); // 获取输入的当前值
  }

  return (
    <input type="text" ref={inputRef} onChange={handleChange} />
  );
}

为什么推荐使用 ref.current.value

1. 函数组件和 Hooks 的支持

在 React 的函数组件和 Hooks 世界中，使用 ref 是管理状态的推荐方式。通过 useRef Hook，你可以创建一个稳定的身份引用，而不必依赖于事件对象，这与 React 的函数式编程范式相契合。

2. 性能考虑

使用 ref 可以避免在每次事件触发时都传递整个事件对象，这可以减少不必要的内存分配和垃圾收集，从而提高性能。

3. 明确性和可维护性

使用 ref 可以提供更清晰的代码，明确表明你正在访问 DOM 元素的属性。这种方式也使得组件更容易维护，因为引用的逻辑与事件处理逻辑分离。

4. 与 React 的严格模式的兼容性

React 的严格模式下，直接修改 DOM 或依赖于 DOM 的行为可能会受到限制或警告。使用 ref 可以避免这些潜在的问题。

代码对比

考虑以下两种处理 onChange 事件的方式：

使用 e.target.value：

function handleChange(event) {
  console.log(event.target.value);
}

使用 ref.current.value：

function MyComponent() {
  const inputRef = useRef(null);

  function handleChange() {
    console.log(inputRef.current.value);
  }

  return <input type="text" ref={inputRef} onChange={handleChange} />;
}

结论

在 React 中编写表单组件时，推荐使用 ref.current.value 而不是 e.target.value，主要基于以下几个理由：

• 与函数组件和 Hooks 的自然配合。
• 潜在的性能优势。
• 代码的明确性和可维护性。
• 避免与 React 严格模式的潜在冲突。

虽然两种方法在功能上都能达到相同的目的，但从 React 的最佳实践和长期维护的角度来看，使用 ref.current.value 是更优的选择。