浅谈React双向数据绑定原理

2024-11-26 14:05:31

什么是双向数据绑定

数据模型和视图之间的双向绑定。

当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化；可以这样说用户在视图上的修改会自动同步到数据模型中去，数据模型也是同样的变化。

双向数据绑定的优点：无需和单向数据绑定那样进行CRUD（Create，Retrieve，Update，Delete）操作，双向数据绑定最常应用在就表单上，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户输入好的数据，并放到数据模型中了。

实现双向数据绑定

但是，在 React中是不存在双向数据绑定的机制的，需要我们自己对其进行实现。

数据影响视图

这种功能实际上，React 已经帮助我们实现了，使用 setState({ }) 方法修改数据。
（React内部提供的修改方法），不允许通过this.state.属性名 = 数据 的方法进行数据修改。

代码

import React, { Component } from 'react';
// 引入 antd UI库
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库 */}
                <Button type="primary" onClick={this.setValue}>修改数据</Button>
            </div>
        );
    }
}
export default Home;

效果

视图影响数据

通过 React 提供的 onChage 监听事件 实现数据的动态录入
同时，使用 value 或者 defaultValue 在 input 框中呈现内容
为了方便显示，这里使用了 p 标签来显示内容

代码

import React, { Component } from 'react';
import { Button } from 'antd'; // antd UI库
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="输入文本内容"
                 />
                <p>&emsp;{this.state.inputVal}</p>
            </div>
        );
    }
}
export default Home;

效果

注意:

使用 value 绑定时，value 和 defaultValue 只能使用一个，否则会报警告

到此这篇关于浅谈React双向数据绑定原理的文章就介绍到这了,更多相关React双向绑定内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

React实现双向绑定示例代码

前言 React.js现在已经很流行了,不会React.js都不好意思说自己会前端了. 那么下面就来看看关于React双向绑定的实现. 双向绑定的使用: 组件需要mixins:引用LinkedStateMixin.它提供一个linkState方法. 参数是state属性双向绑定用valueLink={this.linkState(XX)} linkState方法返回一个对象,有一个value属性,指定state的属性. 还有一个requestChange回调方法,用来实现state的修改.参数
React利用插件和不用插件实现双向绑定的方法详解

前言以前对于双向绑定概念来自于Angular.js,现在我用我感兴趣的react.js来实现这样的方式. 有2种方式分析,1:不用插件,2:用插件 (引入react.js操作省略...) 不用插件: 先创建react组件 var NoLink = React.createClass({}); React.render(<NoLink />,document.body); 组件创建好了,需要一个初始化变量,来公用显示输入的数据 var NoLink = React.createClass({
react 中父组件与子组件双向绑定问题

在项目中我们可能会遇到类似这样的场景,也就是父子组件的双向数据绑定首先,先把在head中引入react.js.react-dom.js和可选择的babel.js(这里需要注意引用的顺序,react.js必须在react-dom.js之前) <head> <script src="react.js"></script> <script src="react-dom.js"></script> <scr
浅谈React双向数据绑定原理

目录什么是双向数据绑定实现双向数据绑定数据影响视图视图影响数据如果已经学过Vue,并且深入了解过Vue的双向数据绑定的话,就会明白 Vue 2.0 双向数据绑定的核心其实是通过Object.defineProperty来实现数据劫持和监听. 在 Vue 3.0 中则通过 Proxy来实现对整体对象的监听,对 Vue2.0 的优化. 什么是双向数据绑定数据模型和视图之间的双向绑定. 当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化:可以这样说用户在视图
浅谈React底层实现原理

目录 1. props,state与render函数关系,数据和页面如何实现互相联动? 2. React中的虚拟DOM 常规思路改良思路(仍使用DOM) React的思路深入理解虚拟DOM 3. 虚拟DOM的diff算法 4. React中ref的使用 5. React中的生命周期函数 6. 生命周期函数的使用场景 1. props,state与render函数关系,数据和页面如何实现互相联动? 当组件的state或者props发生改变的时候,自己的render函数就会重新执行.注意:当父组
浅谈React useDebounce 防抖原理

目录 1.js防抖 2.React custom Hook useDebounce 1.js防抖 // func 需要去抖动的函数 delay 延时执行时间 const debounce = (func, delay) => { let timeout; //...param es6语法获取形参数组 argaments return (...param) => { // 每次进入清除上一个已经执行/未执行的定时器 if (timeout) { clearTimeout(timeout);
浅谈AngularJs 双向绑定原理(数据绑定机制)

那么什么是双向绑定,下面简单进行讲解. 首先我们要理解数据绑定.我们看到的网站页面中,是由数据和设计两部分组合而成.将设计转换成浏览器能理解的语言,便是html和css主要做的工作.而将数据显示在页面上,并且有一定的交互效果(比如点击等用户操作及对应的页面反应)则是js主要完成的工作.很多时候我们不可能每次更新数据便刷新页面(get请求),而是通过向后端请求相关数据,并通过无刷新加载的方式进行更新页面(post请求).那么数据进行更新后,页面上相应的位置也能自动做出对应的修改,便是数据绑定. 在
浅谈React Event实现原理

React 元素的事件处理和 DOM元素的很相似.但是有一点语法上的不同: React事件绑定属性的命名采用驼峰式写法,而不是小写. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法) 并且 React 自己内部实现了一个合成事件,使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器.你仅仅需要在这个元素初始渲染的时候提供一个监听器. 我们看一下这是怎么实现的 React 事件机制分为事
浅谈React中组件逻辑复用的那些事儿

基本每个开发者都需要考虑逻辑复用的问题,否则你的项目中将充斥着大量的重复代码.那么 React 是怎么复用组件逻辑的呢?本文将一一介绍 React 复用组件逻辑的几种方法,希望你读完之后能够有所收获.如果你对这些内容已经非常清楚,那么略过本文即可. 我已尽量对文中的代码和内容进行了校验,但是因为自身知识水平限制,难免有错误,欢迎在评论区指正. 1. Mixins Mixins 事实上是 React.createClass 的产物了.当然,如果你曾经在低版本的 react 中使用过 Mixins,
浅谈React 属性和状态的一些总结

一.属性 1.第一种使用方法:键值对 <ClaaNameA name = "Tom" /> <ClaaNameA name = {Tom} /> <ClaaNameA name = {"Tom"} /> <ClaaNameA name = {[1,2,3]} />//数组 <ClaaNameA name = {FunctionNAme} /> //定义一个函数 2.第二种方法:三个点的展开对象形式 var
浅谈react.js中实现tab吸顶效果的问题

在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed. 在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed. 一开始我是这样写的: import cs from 'classnam
vue双向数据绑定原理探究(附demo)

昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门双向绑定的思想双向数据绑定的思想就是数据层与UI层的同步,数据再两者之间的任一者发生变化时都会同步更新到另一者. 双向绑定的一些方法目前,前端实现数据双向数据绑定的方法大致有以下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元
浅谈react+es6+webpack的基础配置

这是模块化开发.主流框架和最新版的ECMAScript语法规范的一个小demo 准备工作安装 nodeJs 首先进入node官网,去下载最新版的nodeJs webpack 安装webpack npm install webpack -g 参数-g表示全局安装webpack,你在cmd命令中哪个文件夹下都可以使用webpack的命令,如果不加-g的话,是只可以在你安装webpack的目录下使用webpack这个命令 webpack 也有一个 web 服务器 npm install webpac

浅谈React双向数据绑定原理

目录

什么是双向数据绑定

实现双向数据绑定

数据影响视图

视图影响数据

相关推荐

随机推荐