A brief discussion on the principle of React two-way data binding

If you have learned Vue and have a deep understanding of Vue 's two-way data binding, you will understand that the core of Vue 2.0 two-way data binding is actually to achieve data hijacking and monitoring through Object.defineProperty .

In Vue 3.0 , Proxy is used to monitor the entire object and optimize Vue2.0 .

What is two-way data binding

Two-way binding between data models and views.

When the data changes, the view also changes, and when the view changes, the data also changes synchronously; it can be said that the user's modifications to the view are automatically synchronized to the data model, and the data model also changes in the same way.

Advantages of two-way data binding: There is no need to perform CRUD (Create, Retrieve, Update, Delete) operations like one-way data binding. Two-way data binding is most commonly used on forms. In this way, when the user completes the input on the front-end page, we have obtained the user's input data and put it into the data model without any operation.

Implementing two-way data binding

However, there is no two-way data binding mechanism in React , and we need to implement it ourselves.

Data Impact View

In fact, React has helped us achieve this function by using setState({ }) method to modify data.
(The modification method provided by React internally) does not allow data modification through the method of this.state.屬性名= 數據.

Code

import React, { Component } from 'react';
// Import antd UI libraryimport { Button } from 'antd';  
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            inputVal:'',
         };
    }   
    setValue=()=>{
        this.setState({
            inputVal: "Modify Value"
        })
    }
    render() {
        return (
            <div className="home" >
                Home component<p> {this.state.inputVal}</p>
                 {/* Using antd UI library*/}
                <Button type="primary" onClick={this.setValue}>Modify data</Button>
            </div>
        );
    }
}
export default Home;

Effect

Views affect data

onChage 監聽事件provided by React is used to realize the dynamic entry of data. At the same time, value or defaultValue is used to present the content in input box. For the convenience of display, the p tag is used here to display the content

Code

import React, { Component } from 'react';
import { Button } from 'antd'; // antd UI library 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 component <input 
                    onChange={this.change}
                    // value={this.state.inputVal}
                    defaultValue={this.state.inputVal}
                    placeholder="Enter text content"
                 />
                <p>&emsp;{this.state.inputVal}</p>
            </div>
        );
    }
}
export default Home;

Effect

Notice:

When using value binding, only one value and defaultValue can be used, otherwise a warning will be reported

This concludes this article on the principle of React two-way data binding. For more relevant React two-way binding content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!