react如何实现双向绑定

英俊潇洒美少年2026-04-01 8:59

React 本身没有内置双向绑定 ，它默认是单向数据流 ：
state → 视图

视图要改回 state，必须手动写事件监听。

所谓 React 的双向绑定，就是自己把"数据到视图"+"视图到数据"封装起来。

一、最简实现（原生 React）

jsx 复制代码

function App() {
  const [value, setValue] = useState('')

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

这就是 React 版双向绑定：

数据 → 视图：value={value}
视图 → 数据：onChange 里 setValue

二、封装成类似 v-model 的工具

你可以封装一个自定义 Hook，实现像 Vue 一样简洁：

jsx 复制代码

function useModel(initialState) {
  const [value, setValue] = useState(initialState)
  return {
    value,
    onChange: e => setValue(e.target.value)
  }
}

// 使用
function App() {
  const username = useModel('')

  return <input {...username} />
}

这样就和 v-model="username" 几乎一样用。

三、React 18 官方：useImperativeHandle 不算

真正 React 里：

没有 v-model 指令
没有自动双向绑定
一切都是**受控组件（Controlled Component）**手动实现

四、和 Vue 对比

	Vue	React
双向绑定	`v-model` 内置指令	无内置，手动 `value + onChange`
数据流	天然双向	单向数据流，手动实现双向
简洁度	极简洁	稍繁琐，但更可控

五、面试标准答案

React 没有内置双向绑定 ，遵循单向数据流。
通过受控组件 实现双向绑定：
- value 绑定 state
- onChange 事件更新 state
可以封装自定义 Hook 简化写法，达到类似 v-model 的效果。