快捷導(dǎo)航

react實(shí)現(xiàn)雙向綁定的示例代碼

更新時(shí)間：2026年04月01日 11:33:52 作者：英俊瀟灑美少年

文章主要討論了React中實(shí)現(xiàn)雙向綁定的方法,默認(rèn)React是單向數(shù)據(jù)流,需要手動(dòng)實(shí)現(xiàn)雙向綁定,文章提供了最簡(jiǎn)實(shí)現(xiàn)、封裝自定義Hook、以及React18中的useImperativeHandle等方法,感興趣的朋友跟隨小編一起看看吧

一、最簡(jiǎn)實(shí)現(xiàn)（原生 React）

function App() {
  const [value, setValue] = useState('')
  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  )
}

這就是 React 版雙向綁定：

數(shù)據(jù) → 視圖：value={value}
視圖 → 數(shù)據(jù)：onChange 里 setValue

二、封裝成類(lèi)似 v-model 的工具

你可以封裝一個(gè)自定義 Hook，實(shí)現(xiàn)像 Vue 一樣簡(jiǎn)潔：

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 里：

沒(méi)有 v-model 指令
沒(méi)有自動(dòng)雙向綁定
一切都是**受控組件（Controlled Component）**手動(dòng)實(shí)現(xiàn)

四、和 Vue 對(duì)比

	Vue	React
雙向綁定	`v-model` 內(nèi)置指令	無(wú)內(nèi)置，手動(dòng) `value + onChange`
數(shù)據(jù)流	天然雙向	單向數(shù)據(jù)流，手動(dòng)實(shí)現(xiàn)雙向
簡(jiǎn)潔度	極簡(jiǎn)潔	稍繁瑣，但更可控

五、面試標(biāo)準(zhǔn)答案

React 沒(méi)有內(nèi)置雙向綁定，遵循單向數(shù)據(jù)流。
通過(guò)受控組件實(shí)現(xiàn)雙向綁定：
- value 綁定 state
- onChange 事件更新 state
可以封裝自定義 Hook 簡(jiǎn)化寫(xiě)法，達(dá)到類(lèi)似 v-model 的效果。

到此這篇關(guān)于react實(shí)現(xiàn)雙向綁定的示例代碼的文章就介紹到這了,更多相關(guān)react雙向綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解如何在React組件“外”使用父組件的Props
這篇文章主要介紹了詳解如何在React組件“外”使用父組件的Props，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
React簡(jiǎn)單介紹
React 是一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫(kù)，主要用于構(gòu)建 UI，而不是一個(gè) MVC 框架，React 擁有較高的性能，代碼邏輯非常簡(jiǎn)單，越來(lái)越多的人已開(kāi)始關(guān)注和使用它
2017-05-05
React傳遞參數(shù)的幾種方式
本文詳細(xì)的介紹了React傳遞參數(shù)的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-06-06
詳解Immutable及 React 中實(shí)踐
Immutable 可以給 React 應(yīng)用帶來(lái)數(shù)十倍的提升，也有人說(shuō) Immutable 的引入是近期 JavaScript 中偉大的發(fā)明，因?yàn)橥?React 太火，它的光芒被掩蓋了。這篇文章主要介紹了Immutable及 React 中的實(shí)踐,需要的朋友可以參考下
2018-03-03
解決React初始化加載組件會(huì)渲染兩次的問(wèn)題
這篇文章主要介紹了解決React初始化加載組件會(huì)渲染兩次的問(wèn)題,文中有出現(xiàn)這種現(xiàn)象的原因及解決方法,感興趣的同學(xué)跟著小編一起來(lái)看看吧
2023-08-08
淺談react前后端同構(gòu)渲染
本篇文章主要介紹了淺談react前后端同構(gòu)渲染，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
React.js中組件重渲染性能問(wèn)題及優(yōu)化過(guò)程
這篇文章主要介紹了React.js中組件重渲染性能問(wèn)題及優(yōu)化過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-05-05
React組件里this指向了undefined原理解析
這篇文章主要為大家介紹了React組件里this指向了undefined原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
一文學(xué)會(huì)使用Remix寫(xiě)API接口
這篇文章主要為大家介紹了一文學(xué)會(huì)Remix寫(xiě)API接口實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
react如何使用useRef模仿抖音標(biāo)題里面添加標(biāo)簽內(nèi)容
本文介紹了如何模仿抖音發(fā)布頁(yè)面,使用div元素作為輸入框,并利用CSS樣式和JavaScript動(dòng)態(tài)操作DOM,實(shí)現(xiàn)類(lèi)似于input輸入框的功能,感興趣的朋友跟隨小編一起看看吧
2024-10-10