快捷導(dǎo)航

淺談React雙向數(shù)據(jù)綁定原理

更新時(shí)間：2021年11月12日 15:16:33 作者：Mrqin-shen

在 React中是不存在雙向數(shù)據(jù)綁定的機(jī)制的，需要我們自己對(duì)其進(jìn)行實(shí)現(xiàn)。本文主要介紹一下React雙向數(shù)據(jù)綁定，感興趣的可以了解一下

如果已經(jīng)學(xué)過(guò)Vue，并且深入了解過(guò)Vue的雙向數(shù)據(jù)綁定的話，就會(huì)明白 Vue 2.0 雙向數(shù)據(jù)綁定的核心其實(shí)是通過(guò)Object.defineProperty來(lái)實(shí)現(xiàn)數(shù)據(jù)劫持和監(jiān)聽(tīng)。

在 Vue 3.0 中則通過(guò) Proxy來(lái)實(shí)現(xiàn)對(duì)整體對(duì)象的監(jiān)聽(tīng)，對(duì) Vue2.0 的優(yōu)化。

什么是雙向數(shù)據(jù)綁定

數(shù)據(jù)模型和視圖之間的雙向綁定。

當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，視圖也就發(fā)生變化，當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也會(huì)跟著同步變化；可以這樣說(shuō)用戶在視圖上的修改會(huì)自動(dòng)同步到數(shù)據(jù)模型中去，數(shù)據(jù)模型也是同樣的變化。

雙向數(shù)據(jù)綁定的優(yōu)點(diǎn)：無(wú)需和單向數(shù)據(jù)綁定那樣進(jìn)行CRUD（Create，Retrieve，Update，Delete）操作，雙向數(shù)據(jù)綁定最常應(yīng)用在就表單上，這樣當(dāng)用戶在前端頁(yè)面完成輸入后，不用任何操作，我們就已經(jīng)拿到了用戶輸入好的數(shù)據(jù)，并放到數(shù)據(jù)模型中了。

實(shí)現(xiàn)雙向數(shù)據(jù)綁定

但是，在 React中是不存在雙向數(shù)據(jù)綁定的機(jī)制的，需要我們自己對(duì)其進(jìn)行實(shí)現(xiàn)。

數(shù)據(jù)影響視圖

這種功能實(shí)際上，React 已經(jīng)幫助我們實(shí)現(xiàn)了，使用 setState({ }) 方法修改數(shù)據(jù)。
（React內(nèi)部提供的修改方法），不允許通過(guò)this.state.屬性名 = 數(shù)據(jù) 的方法進(jìn)行數(shù)據(jù)修改。

代碼

import React, { Component } from 'react';
// 引入 antd UI庫(kù)
import { Button } from 'antd';  
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            inputVal:'',
         };
    }   
    setValue=()=>{
        this.setState({
            inputVal:"修改 Value"
        })
    }
    render() {
        return (
            <div className="home" >
                Home組件
                <p> {this.state.inputVal}</p>
                 {/* 使用了 antd UI庫(kù) */}
                <Button type="primary" onClick={this.setValue}>修改數(shù)據(jù)</Button>
            </div>
        );
    }
}
export default Home;

效果

在這里插入圖片描述

視圖影響數(shù)據(jù)

通過(guò) React 提供的 onChage 監(jiān)聽(tīng)事件 實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)錄入
同時(shí)，使用 value 或者 defaultValue 在 input 框中呈現(xiàn)內(nèi)容
為了方便顯示，這里使用了 p 標(biāo)簽來(lái)顯示內(nèi)容

代碼

import React, { Component } from 'react';
import { Button } from 'antd'; // antd UI庫(kù)
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            inputVal:'',
         };

    }    
    change = (ev)=>{
        this.setState({
            inputVal:ev.target.value
        })
    }
    render() {
        return (
            <div className="home" >
                Home組件
				<input 
                    onChange={this.change}
                    // value={this.state.inputVal}
                    defaultValue={this.state.inputVal}
                    placeholder="輸入文本內(nèi)容"
                 />
                <p>&emsp;{this.state.inputVal}</p>
            </div>
        );
    }
}
export default Home;

效果

在這里插入圖片描述