React 中没有 v-model，如何优雅地处理表单输入

在 Vue 中，我们可以很方便地使用 v-model 实现数据的双向绑定。但在 React 的世界里，并没有这样的语法糖，我们需要通过不同的方式来处理表单数据。

Vue 的简洁写法

<template>
  <input v-model="value" />
</template>

React 的几种实现方案

方案一：基础受控组件

function App() {
  const [value, setValue] = useState("");
  
  return (
    <input 
      value={value} 
      onChange={e => setValue(e.target.value)} 
    />
  );
}

这是 React 初学者最常用的写法。在简单场景下表现良好，但在复杂表单或大型应用中，每次输入都会触发组件重新渲染，可能导致性能问题。

方案二：非受控组件 + useRef

function App() {
  const inputRef = useRef("");
  
  return (
    <input 
      onChange={e => (inputRef.current = e.target.value)} 
    />
  );
}

这种方案避免了频繁的重新渲染，适合性能敏感的场景。

方案三：防抖优化

function App() {
  const [value, setValue] = useState("");
  
  const handleChange = useCallback(
    debounce((newValue) => {
      setValue(newValue);
    }, 300),
    []
  );

  return (
    <input 
      onChange={e => handleChange(e.target.value)} 
    />
  );
}

通过防抖函数减少状态更新的频率，在需要实时搜索等场景下特别有用。

深入理解：受控组件 vs 非受控组件

概念解析

受控组件和非受控组件是数据驱动框架中的重要概念：

• 表面区别：值是否只能由用户输入改变，还是也可以由程序逻辑直接改变
• 本质区别：数据是由 React 状态托管，还是由 DOM 自身管理

受控组件（Controlled Components）

表单元素的值完全由 React 状态控制，通过 onChange 事件同步更新。

优点：

• ✅ 符合 React 单向数据流理念，状态完全可控
• ✅ 便于实现实时验证和输入格式化
• ✅ 可动态控制表单提交状态
• ✅ 支持多组件间的数据同步

缺点：

• ❌ 需要为每个字段编写事件处理逻辑
• ❌ 表单复杂时可能引发性能问题

适用场景：

• 需要实时验证用户输入
• 需要根据输入动态更新UI
• 需要强制特定的输入格式
• 表单数据被多个组件共享

function LoginForm() {
  const [formData, setFormData] = useState({
    username: "",
    password: ""
  });

  const handleChange = (field) => (e) => {
    setFormData(prev => ({
      ...prev,
      [field]: e.target.value
    }));
  };

  return (
    <form>
      <input 
        value={formData.username} 
        onChange={handleChange("username")} 
      />
      <input 
        type="password"
        value={formData.password} 
        onChange={handleChange("password")} 
      />
    </form>
  );
}

非受控组件（Uncontrolled Components）

表单数据由 DOM 自身管理，通过 ref 在需要时获取值。

优点：

• ✅ 代码简洁，减少事件处理逻辑
• ✅ 性能更优，避免频繁重新渲染
• ✅ 更接近原生 DOM 操作

缺点：

• ❌ 不符合 React 数据流最佳实践
• ❌ 无法实现实时验证和UI反馈
• ❌ 状态管理不够直观

适用场景：

• 简单表单，无需实时验证
• 只在提交时需要获取数据
• 性能敏感的大型表单
• 集成第三方表单库

function UncontrolledForm() {
  const usernameRef = useRef();
  const passwordRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      username: usernameRef.current.value,
      password: passwordRef.current.value
    };
    console.log("表单数据:", data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={usernameRef} />
      <input type="password" ref={passwordRef} />
      <button type="submit">提交</button>
    </form>
  );
}

实践建议

1. 当需要做性能优化时，可以考虑使用非受控组件
2. 非受控组件和受控组件可以混用