在React 中如何轻松实现双向数据绑定？

React主要是单向数据流，所以双向绑定不像Vue那样直接有v-model。那在React里通常是怎么做的呢？

在 React 中实现双向数据绑定需要手动组合状态管理和事件处理，主要通过在输入元素上使用 value 属性和 onChange 事件的组合来实现。以下是具体实现方式：

---

一、核心方法：受控组件（Controlled Component）

import { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState('');

  // 双向绑定逻辑
  const handleChange = (e) => {
    setInputValue(e.target.value); // 输入变化时更新状态
  };

  return (
    <div>
      <input 
        type="text"
        value={inputValue}       // 状态 → 视图
        onChange={handleChange}  // 视图 → 状态
      />
      <p>Current Value: {inputValue}</p>
    </div>
  );
}

关键点：

1. 单向数据流：状态 (inputValue) 通过 value 属性绑定到输入框
2. 事件监听：通过 onChange 监听输入变化，更新状态
3. 自动同步：状态更新触发组件重新渲染，保持视图与状态一致

二、类比 Vue 的 v-model

React 的等效写法相当于显式拆解了 Vue 的 v-model：

// React
<input 
  value={value} 
  onChange={(e) => setValue(e.target.value)}
/>

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

三、高级方案（可选）

1. 自定义 Hook：封装重复逻辑

function useTwoWayBinding(initialValue) {
  const [value, setValue] = useState(initialValue);
  
  const bind = {
    value,
    onChange: (e) => setValue(e.target.value)
  };

  return [value, bind];
}

// 使用
const [text, bind] = useTwoWayBinding('');
return <input {...bind} />;

1. 第三方库：如 formik、react-hook-form 提供更复杂的数据绑定方案

2. 非受控组件（仅限简单场景）：

const inputRef = useRef();
// 通过 ref 直接访问 DOM 值
<button onClick={() => console.log(inputRef.current.value)}>获取值</button>

四、为什么推荐受控组件？

• 更好的状态可控性

• 支持复杂的表单验证

• 与 React 数据流模式一致

• 避免直接操作 DOM

React 的这种设计虽然需要多写少量代码，但带来了更高的可预测性和维护性，符合其声明式编程范式。