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绑定 stateonChange事件更新 state
- 可以封装自定义 Hook 简化写法，达到类似
v-model的效果。
到此这篇关于react实现双向绑定的示例代码的文章就介绍到这了,更多相关react双向绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解如何在React组件“外”使用父组件的Props，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
React 是一个用于构建用户界面的 JavaScript 库，主要用于构建 UI，而不是一个 MVC 框架，React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它2017-05-05
本文详细的介绍了React传递参数的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-06-06
Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明，因为同期 React 太火，它的光芒被掩盖了。这篇文章主要介绍了Immutable及 React 中的实践,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了解决React初始化加载组件会渲染两次的问题,文中有出现这种现象的原因及解决方法,感兴趣的同学跟着小编一起来看看吧2023-08-08
本篇文章主要介绍了浅谈react前后端同构渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了React.js中组件重渲染性能问题及优化过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-05-05
这篇文章主要为大家介绍了React组件里this指向了undefined原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家介绍了一文学会Remix写API接口实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
本文介绍了如何模仿抖音发布页面,使用div元素作为输入框,并利用CSS样式和JavaScript动态操作DOM,实现类似于input输入框的功能,感兴趣的朋友跟随小编一起看看吧2024-10-10
最新评论