首页 > 网络编程 > JavaScript > javascript类库 > React > react双向绑定

react实现双向绑定的示例代码

2026-04-01 11:33:52 作者：英俊潇洒美少年

文章主要讨论了React中实现双向绑定的方法,默认React是单向数据流,需要手动实现双向绑定,文章提供了最简实现、封装自定义Hook、以及React18中的useImperativeHandle等方法,感兴趣的朋友跟随小编一起看看吧

React 本身没有内置双向绑定，它默认是单向数据流：
state → 视图
视图要改回 state，必须手动写事件监听。

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

一、最简实现（原生 React）

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 一样简洁：

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 的效果。

到此这篇关于react实现双向绑定的示例代码的文章就介绍到这了,更多相关react双向绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！