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双向绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Redux Toolkit可以帮助开发者更快速、更高效地编写Redux应用,本文主要介绍了React使用Redux Toolkit的方法示例,具有一定的参考价值,感兴趣的可以了解一下2025-04-04
这篇文章主要介绍了React 如何拿时间戳计算得到开始和结束时间戳,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
在 React中是不存在双向数据绑定的机制的，需要我们自己对其进行实现。本文主要介绍一下React双向数据绑定，感兴趣的可以了解一下2021-11-11
这篇文章主要介绍了React Hooks的深入理解与使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了react(含hooks)中同步获取state值的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了React 递归手写流程图展示树形数据的操作方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了在 React 中使用 Redux 的 4 种写法,Redux 一般来说并不是必须的，只有在项目比较复杂的时候，比如多个分散在不同地方的组件使用同一个状态，本文就React使用 Redux的相关知识给大家介绍的非常详细，需要的朋友参考下吧2022-06-06
React项目中fetch实现跨域接收传递session的解决方案
这篇文章主要介绍了React项目中fetch实现跨域接收传递session的解决方案,本次项目使用了react框架，同时使用fetch取代ajax作为获取接口数据的交互方法，下面就对这次问题的解决做个总结，需要的朋友可以参考下2022-04-04
react+antd select下拉框实现模糊搜索匹配的示例代码
我们在开发过程中，经常会出现下拉框数据很多得情况，本文主要介绍了react+antd select下拉框实现模糊搜索匹配的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了React 代码共享最佳实践方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-05-05
最新评论