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 的原因 。

React和Jquery比较的更多相关文章

  1. react与jQuery对比,有空的时候再翻译一下

    参考资料:http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-t ...

  2. React使用jquery方式动态获取数据

    好久没写react了,今天有空写一下来react实现实时请求数据,并刷新数据的小demo. 首先我还是选择了jquery方式中自带的ajax获取数据,首先要引用所需的js包 接下来要写一个自定义的js ...

  3. 从省市区多重级联想到的,react和jquery的差别

    在我们的前端项目里经常会用到级联的select,比如省市区这样.通常这种级联大多是动态的.比如先加载了省,点击省加载市,点击市加载区.然后数据通常ajax返回.如果没有数据则说明到了叶子节点.   针 ...

  4. qrcode.react和jquery.qrcode生成二维码

    qrcode.react 1.安装 npm install qrcode.react 2.用法(这里用的ant design) import React from 'react'; import QR ...

  5. React中jquery引用

    安装jQuery npm i jquery -S 在那个地方使用jQuery就在什么地方引入jQuery import $ from 'jquery'

  6. React jQuery公用组件开发模式及实现

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  7. vue、react、angular三大框架对比 && 与jQuery的对比

    前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢?  这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...

  8. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

  9. angular开发者吐槽react+redux的复杂:“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

随机推荐

  1. 美国诚实签经验——IMG全球医疗险,TODO

    那么,诚实签最关键的4个要点 是什么呢? 第一,证明你有一定的经济实力. 可能需要房产.存款等证明,也需要银行信用卡或借记卡半年流水证明(让人信服的每月进帐和消费能力). 这些是为了证明,你可以支付在 ...

  2. poj 2762(tarjan缩点+判断是否是单链)

    Going from u to v or from v to u? Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 19234 ...

  3. redirect和forward 的区别

    1.从地址栏显示来说 forward 是服务器请求资源,服务器直接访问目标地址url,把那个url的响应内容读取过来,然后把这些内容再发给浏览器,浏览器根本不知道服务器发送的内容从哪里来的,所以他的地 ...

  4. bzoj 1638: [Usaco2007 Mar]Cow Traffic 奶牛交通【记忆化搜索】

    震惊!记忆化搜索忘记返回map值调了半小时! 边(u,v)的经过次数是:能到u的牛数*v到n的方案数.正反两次连边,dfs两次即可 #include<iostream> #include& ...

  5. P5043 【模板】树同构([BJOI2015]树的同构)

    传送门 把所有的树给哈希起来就好了 具体的方法是一个节点的哈希值就是它所有儿子的哈希值给哈希起来,然后以每个节点为根算出它作为根节点的哈希值.那么把每棵树的哈希值排个序,与之前的比较就好了 注意把儿子 ...

  6. jsonp 监控简陋代码

    url: window.location.href Agent: navigator.userAgent var tkInfo = { VisitUrl: window.location.href, ...

  7. 洛谷 P2090 数字对

    发现如果给定两个数(a,b),可以用类似辗转相除法在logn的时间内计算出(反向)变到(1,1)的最小步数. 然而并不知道另一个数是多少? 暴力嘛,枚举一下另一个数,反正1000000的nlogn不虚 ...

  8. {Python}安装第三方包(setup.py)

    在github上下载了records文件到本地. 解压文件 cmd切换到文件setup.py的目录下 先执行 python setup.py build 再执行python setup.py inst ...

  9. centos 7 中防火墙的关闭问题

    新安装的centos 7 发现有些程序端口是关闭的,想到了防火墙和selinux  selinx 好关闭 /etc/sysconfig/selinux 中 追加 SELINUX=disabled 防火 ...

  10. 类函数:string、math

    类:系统内置的处理字符串类型的函数方法类. string是String的快捷方式.所包含的内容都是一样的. Int i=x.length;//获取一个字符串长度 字符串中,索引号从0开始 String ...