当前位置: 首页 > 编程日记 > 正文

React和Jquery比较

Jquery的工作方式:

假如你需要给一个按扭添加一个点击事件。

首先根据CSS规则找到对应的dom元素,挂上一个匿名事件处理函数,在事件处理函数中,选中那个需要被修改的DOM元素,读取他的文本值,加以修改,然后修改这个dom元素。

优点:直观易懂。缺点:对于庞大的项目,会造成代码结构复杂,难以维护。

React的工作理念:

打一个比方, React是一个聪明的建筑工人,而 jQuery是一个比较傻的建筑工人, 开发者你就是一个建筑的设计师,如果是 jQuery 这个建筑工人为你工作,你不得不事无 巨细地告诉 jQuery“如何去做”,要告诉他这面墙要拆掉重建,那面墙上要新开一个窗户, 反之,如果是 React这个建筑工人为你工作,你所要做的就是告诉这个工人“我想要什 么样子”,只要把图纸递给 React这个工人,他就会替你搞定一切,当然他不会把整个建 筑拆掉重建,而是很聪明地把这次的图纸和上次的图纸做一个对比,发现不同之处,然 后只去做适当的修改就完成任务了 。

React 的工作方式把开发者从繁琐的操作中解放出来,开发者只需要着重 “我想要显示什么”,而不用操心“怎样去做” 。利用声明式的语法,让开发者专注于描述用户界面“显示成什么样式”,而不是重复思考“如何去显示”。

缺点:对于一个简单的例子也要编写很多代码。

优点:避免构建复杂的程序结构,利用函数式编程的思维来解决用户界面渲染的问题,使开发效率大大提高。

对于大型项目更易管理,整个 React 应用要做的就是渲染,开发者关注的是渲染成成什么样子,而不用关心如何实现增量 渲染。

React 的理念 ,归结为一个公式: UI=render(data)

让我们来看看这个公式表达的含义,用户看到的界面( UI),应该是一个函数(在这 里叫 render)的执行结果,只接受数据( data)作为参数。 这个函数是一个纯函数,所谓 纯函数,指的是没有任何副作用,输出完全依赖于输入的函数,两次函数调用如果输人 相同,得到的结果也绝对相同 。 如此一来,最终的用户界面,在 render 函数确定的情况 下完全取决于输入数据 。

对于开发者来说,重要的是区分开哪些属于 data,哪些属于 render,想要更新用户 界面,要做的就是更新 data,用户界面自然会做出响应,所以 React实践的也是“响应 式编程”( Reactive Programming)的思想,这也就是 React 为什么叫做 React 的原因 。

转载于:https://www.cnblogs.com/huyanluanyu/p/10156473.html

相关文章:

C++的STL栈实现队列

使用内部存储结构为栈的方法实现一个队列,要求实现该队列的如下方法: 1.push(x) : 将元素x压入队列中 2.pop() : 弹出(移除)队列头部元素 3.peek() : 返回队列头部元素(即为front) 4.empty() : 判断队列是否是空 栈的数据结构为先入后出,队列…

如何设置SOLR的高亮 (highlight)?

打开SOLR的核心配置文件&#xff1a; solrconfig.xml找到 standard request handler写入以下XML配置代码&#xff1a;[c-sharp] view plaincopy <requestHandler name"standard" class"solr.SearchHandler" default"true"> <!-- def…

java快排算法解读,java 快排的思路与算法

java 快排的思路与算法有时候面试的时候的会问道Arrays.sort()是怎么实现的&#xff0c;我以前根本不知道是什么东西&#xff0c;最近点进去看了一下。直接吓傻&#xff0c;//看到这个时候还是比较淡定的&#xff0c;可怕的事情来了。public static void sort(int[] a) {DualPi…

SQL:EXISTS的用法理解(转)

摘自&#xff1a;http://www.cnblogs.com/netserver/archive/2008/12/25/1362615.html 比如在Northwind数据库中有一个查询为 SELECT c.CustomerId,CompanyName FROM Customers c WHERE EXISTS( SELECT OrderID FROM Orders o WHERE o.CustomerIDc.CustomerID) 这里面的EXISTS…

002.Heartbeat部署及httpd高可用

一 前期准备 1.1 依赖准备 编译安装需要依赖的包&#xff0c;如gcc等&#xff1a;yum -y install gcc gcc-c make glibc kernel-devel kernel-headers autoconf automake libtool glib2-devel libxml2 libxml2-devel libxslt-devel libtool-ltdl-devel wget asciidoc libuuid-d…

C++的STL栈实现获取栈中最小元素的成员

实现一个获取栈中最小数据成员的函数&#xff0c;该栈支持如下操作&#xff1a; 1.push(x) : 将元素x压入栈中 2.pop() : 弹出(移除)栈顶元素 3.top() : 返回栈顶元素 4.getMin() : 返回栈内最小元素 要求时间复杂度为O(1) 这里关键是如何获取最小值&#xff0c;栈中的元素不断…

java servlet applet,详解Java Servlet与Applet比较

Java Servlet与Applet相似之处&#xff1a;◆它们不是独立的应用程序&#xff0c;没有main()方法。◆它们不是由用户或程序员调用&#xff0c;而是由另外一个应用程序(容器)调用。◆它们都有一个生存周期&#xff0c;包含init()和destroy()方法。Java Servlet与Applet不同之处&…

NTP时间同步服务器搭建

转载&#xff1a;http://blog.s135.com/post/281/ 一、搭建时间同步服务器1、编译安装ntp server tar zxvf ntp-4.2.6.tar.gzcd ntp-4.2.6./configure --prefix/usr/local/ntp --enable-all-clocks --enable-parse-clocksmake && make install注&#xff1a;如以上下载…

OI基础系列之最大子数组问题

OI基础系列之最大子数组问题 ——Edward2414 oi退役了&#xff0c;虽然没取得多少成绩&#xff0c;也算是走过一会的人了。我相信绝大多数oi党都是自学成才&#xff0c;在此&#xff0c;我感谢那些把自己所学写到博客里的前辈们&#xff0c;没有你们&#xff0c;我不可能…

springCloud Zuul网关

1.springboot 仅2.0.x 支持&#xff0c;在此选择 2.0.7 2.新建Module eureka-zuul-client 3.导入依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/…

f-free 查看系统中空闲和使用的内存

文章目录前言语法格式以指定单位显示内存占用情况打印所有内存占用&#xff08;RAM SWAP&#xff09;打印间隔以及次数打印所有的列&#xff08;将buff和cache分开&#xff09;free各个空间含义swap交换空间cache页高速缓存free 与 available前言 free 支持查看空闲的和已使用…

对比两个同类型的泛型集合并返回差异泛型集合 ——两个List类名的比较

1: /// <summary> 2: /// 对比两个同类型的泛型集合并返回差异泛型集合 3: /// </summary> 4: /// <typeparam name"T">泛型类型</typeparam> 5: /// <param name"newModel">修改后的数据集合</param> 6: /// &…

php insert failed,较大的MySQL INSERT语句导致PHP错误

好吧,我正在编写代码,但是发生了一些奇怪的事情,我不认为我的代码是错误的…但是它仍在垂死,我不知道为什么…有错误&#xff1a;Error: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use …

js 取得文件大小

document.getElementById("file").files[0].size

Spring Boot thymeleaf模版支持,css,js等静态文件添加

Thymeleaf引入 Thymeleaf是一个Java模板引擎开发库&#xff0c;可以处理和生成HTML、XML、JavaScript、CSS和文本&#xff0c;在Web和非Web环境下都可以正常工作。 1.添加依赖包 <dependency><groupId>org.springframework.boot</groupId><artifactId>…

s-sed(stream editor) 文本填充和编辑 基本使用

文章目录前言语法格式sed 操作地址sed子命令sed正则表达式sed使用实例打印命令 p删除命令 d替换命令 s指定操作地址的范围 逗号 ,多重编辑命令 e下行插入命令 a上行插入命令 i修改命令 c获取下一行命令 n转换命令 y退出命令 q总结前言 sed是一个“非交互”式的字符流编辑器&am…

c语言动态迁移mysql,flask-migrate动态迁移数据库

了解flask_migrate需要先了解flask-script&#xff0c;那么flask-script的作用是什么呢&#xff1f;flask-script的作用是可以通过命令行的形式来操作Flask。例如通过命令跑一个开发版本的服务器、设置数据库&#xff0c;定时任务等。2.执行pip install flask-script来进行安装…

软考之路-网络攻击:主动攻击和被动攻击

被动攻击(针对路上的东西下手) 概念&#xff1a;就是网络窃听&#xff0c;窃取数据包并进行分析&#xff0c;从中窃取重要的敏感信息 措施&#xff1a;防止被动攻击的主要手段是数据加密传输 主动攻击(针对计算机下手) 概念&#xff1a;包括窃取、篡改、假冒和破坏 措施&#x…

edge.js架起node.js和.net互操作桥梁

今天要介绍的是edge.js这个github上刚兴起的开源项目&#xff0c;它可以让node.js和.net之间在in-process下互操作。.net版本在4.5及以上&#xff0c;因为.net4.5带来的Task&#xff0c;asyn&#xff0c;await关键字和node.js的Event模型正好匹配。如果你感兴趣的话&#xff0c…

connect() failed (111: Connection refused) while connecting to upstream, cli

php-fpm没有运行 执行如下命令查看是否启动了php-fpm&#xff0c;如果没有则启动你的php-fpm即可 netstat -ant | grep 9000没有运行为空&#xff0c;有运行显示 tcp 0 0 127.0.0.1:9000 0.0.0.0:* LISTEN 启动方法 sudo /usr/loca…

C++的STL 栈实现 判断栈的出栈顺序是否合理

有这样的题目&#xff1a; 已知从1至n的数字序列&#xff0c;按顺序入栈&#xff0c;每个数字入栈后即可出栈&#xff0c; 也可在栈中停留&#xff0c;等待后面的数字入栈出栈后&#xff0c;该数字再出栈&#xff0c;求该数字序列的出栈序列是否合法? 类似如下&#xff1a; 已…

fire.php,Fire PHP

项目介绍&#xff1a; Fire PHP 是基于 PHP JavaScript开发的跨平台的Firefox 的扩充套件&#xff0c;即PHP调试插件&#xff0c;可以帮你debug 后端PHP 的程式&#xff0c;其使用的技术跟某些IDE 一样&#xff0c;要求你在写程式时加入一些追踪用的代码。通过使用Firephp你可以…

json_encode时中文编码转正常状态

function json_encode_cn($data) {$data json_encode($data);return preg_replace("/\\\u([0-9a-f]{4})/ie", "iconv(UCS-2, UTF-8, pack(H*, $1));", $data); }直接json_encode()函数 ["\u6fb3\u5927\u5229\u4e9e","\u8056\u8a95\u5cf6&q…

验证URL链接和IP有效性的JS代码(正则表达式)

千里之行&#xff0c;始于足下&#xff0c;因之前毕业设计的耽误&#xff0c;没能在博客园记录我的程序猿体会&#xff0c;稍有遗憾&#xff0c;这么多的时间&#xff0c;我竟让他转瞬而过&#xff01;但没关系&#xff0c;再次出发&#xff0c;勿忘为什么出发&#xff01; 一下…

[转帖]什么是光纤的波长?看看有哪些是你不知道的!

什么是光纤的波长&#xff1f;看看有哪些是你不知道的&#xff01; FShttps://www.feisu.com/bbs/e-1640.html2017-07-01 00:00:001084我们平时最熟悉的光当然是我们肉眼所能看见的光。我们的眼睛对波长在400nm的紫光到700nm的红光很敏 感。但对于携带玻璃纤维的光纤&#xff0…

C++的STL 栈 实现四则运算

使用栈实现四则运算&#xff0c;支持&#xff0c;-&#xff0c;*&#xff0c;/&#xff0c;(&#xff0c;) 输入为字符串&#xff0c;输出为计算好的数值&#xff0c;如不符合四则运算的规定&#xff0c;则异常退出 这个实现借用了栈以及字符处理状态机的思想&#xff1a; 维…

javascript小数相减会出现一长串的小数位数的原因

javascript小数相减会出现一长串的小数位数的原因 <script>var a38.8;var b6.8;alert(parseFloat(a)-parseFloat(b));var a134.22;var b6;alert(a*b);</script>以上代码为什么产生一长串小数位出来&#xff0c;虽然比较精确&#xff0c;可没必要呀。这个和数据结构…

Java孩子父母类,@Output孩子和父母之间的沟通 . 角2(5)

我正在尝试学习角度2&#xff0c;并且我正在尝试使用来自我的子组件的数据在父组件中设置变量 . 基本上我在父视图中有一个子 Headers &#xff0c;我希望 Headers 和一些HTML根据加载的子项进行更改 .父组件&#xff1a;import { Component, OnInit, ViewEncapsulation } from…

SQL 自学笔记1(W3School)

自学W3Schoolhttp://www.w3school.com.cn/sql/index.asp 简介 SQL是什么&#xff1f; Structured Query Language 结构化的查询语言 SQL能做什么&#xff1f; 面向数据库查询、取出数据、插入新数据、更新数据、删除数据在数据库中建立库、表&#xff1b;创建存储过程及视图可设…

BZOJ 1096: [ZJOI2007]仓库建设

传送门 斜率优化DP入门题 显然如果在一个位置 i 建一个仓库&#xff0c;且上一个仓库位置为 j 那么从 j1到 i 的物品显然都要存在 i 仓库是最优的 设 $f [ i ]$ 表示在第 i 个工厂建设仓库时&#xff0c;工厂 1 到 i 的物品都转移好的最小花费 考虑上一个仓库的位置 j 设工厂 i…