react.js和Ajax之间的区别

Question

当我搜索React.js时,我得到的是:React.js是一个用于创建用户界面的框架.如果网站的某个特定部分经常更新,则意味着我们可以使用反应.但我很困惑,Ajax仅用于此.我们可以使用Ajax更新站点的一部分而无需刷新页面.对于模板,我们将使用把手和小胡子.有人可以用什么方式解释我与Ajax不同的反应以及为什么我们应该使用它.

Answer 1

这可能比你想要的更简单,但对于其他可能感到困惑的人......

要了解React,您需要了解AJAX如何改变一切:

还记得上世纪90年代的互联网吗？

当您点击任何内容时,页面必须重新加载以显示您的点击发生了什么 - 即使它什么也没有.

这是一个很棒的例子.转到该页面并单击...查看点击率如何将您带到一个完全不同的页面？那是AJAX之前的互联网.处理动作需要极其耗时的页面加载,这意味着整个显示都受到影响.

该网站是在AJAX之前构建的.

现在,看一下这个页面:每个答案旁边都是向上箭头.继续,然后单击其中一个.请注意,页面不会重新加载,但会给出反馈:箭头变为橙色.这似乎是一个微不足道的事情,但在90年代的原始互联网渗透中,它本来就是革命性的.

AJAX

AJAX代表A synchronous J avascript A和X ML.但最重要的一个词是Asynchronous,意思是"在不同的时间".在我们的Stack Overflow示例中,它意味着SO可以在不重新加载页面的情况下处理交互性.

以下是单击Stack Overflow上的向上箭头时发生的情况:

1. 您的浏览器(Chrome,Internet Explorer,Firefox或其他)在后台将消息发送到另一台计算机Stack Overflow服务器.用户没有看到它.发送的内容称为请求,因为您的浏览器正在从服务器请求内容.从服务器返回的是响应.
2. Stack Overflow服务器使用服务器端代码中的"业务逻辑"来确认您是否可以单击箭头(当您未登录时,不允许的示例将是upvote)."业务逻辑"仅仅意味着它与SO逻辑运算的方式有关,而不是运行应用程序的代码.
3. SO服务器向浏览器发送消息(响应),说"是"或"否".
4. 当您第一次访问SO时,按照SO的javascript文件加载到浏览器中的指示,您的浏览器知道"是"意味着将向上箭头变为橙色以显示您的点击成功.

所有这些都是从用户的角度无缝发生的.而React,Mustache,Handlebars和AJAX(如果SO正在使用这样的设置)将分别处理该过程的不同部分.我们稍后会再回来看看..

现在一切都使用AJAX.很难想象没有它的网络,作为开发人员,编写Web应用程序变得更容易,更容易,甚至不知道AJAX是什么.这是因为它已经被我们使用的javaScript技术所吸收,比如React.

React.js

React是一个javascript库.如果您想更多地了解库和框架与工具包之间的差异,请查看这篇精彩的帖子.

但基本上,React允许您使用已编写的代码来加快创建网页或应用程序所需的时间.它使用声明性编码范例,而不是命令式编码范式.这基本上意味着你告诉它你想要看到什么,它决定了实现它的最佳方式.

就你的问题而言,这意味着React内置了AJAX.它知道何时使用它以及何时不使用它.您无需了解AJAX将从中获益.

React还有很多,但就AJAX而言,这就是你需要知道的.然而,关于React最重要的是它可以更容易地编写单页应用程序.单页应用程序是指使用AJAX以至于用户永远不必离开一个页面的应用程序.

考虑Facebook:您可以评论其他人的帖子,"喜欢",添加表情符号,观看视频,自己发布内容 - 所有这些都可以在一个页面上完成.事实上,React由Facebook维护.小胡子和把手进一步促进了这种单页方法......

胡子

小胡子是一个模板系统.这意味着您可以分离网页的内容和结构.例如,这是一个没有Mustache的常规HTML页面:

<xml>
  <action>upvote</action>
  <success>true</success>
</xml>

结构由HTML定义.<button type="text" class="btn"><i class="arrow"></button>并且{button:{type:"text",class:"btn",children:{i:{class:"arrow"}}}是"标签",告诉浏览器(Chrome或Firefox或IE)内容如何划分为多个部分.

假设您想要更改电子邮件地址.你必须在两个地方改变它.这很糟糕,因为可能十年过去而你忘记了你把你的电子邮件或其他人工作的所有地方,并且他们不知道它在两个地方,所以他们改变一个地方但不改变另一个地方,然后您可能有客户通过电子邮件发送错误的地址.这可能会花费你的钱.

Mustache旨在通过允许您使用变量在HTML中显示内容来解决此问题(除其他外).在小胡子你可以做这样的事情:

<h1>This is the Title of My Page. This is Content</h1>
<p>This is a paragraph. blah blah blah. My email is me@me.com</p>
<footer>Contact me at me@me.com</footer>

请参阅,您在脚本中定义内容,与结构分开.因此,如果您想要更改电子邮件,则只需在一个位置进行更改,它就会传播到您希望电子邮件显示的所有位置.

就像AJAX一样,这种做事方式在当时是如此关键,现在它被整合到更现代的js库中.很快你就可以在不了解胡子的情况下完成整个职业生涯,但每天都要使用它.

事实上,Angular和Vue使用类似的模板系统,双花括号和所有,但没有提到Mustache - 它刚刚内置,因为它是如此合乎逻辑.它对老练的程序员来说也很熟悉,而且对于新手来说也很容易学习 - 根据图书馆的不同,你不必学习不同的模板系统.Angular和Vue将更长时间相关,因为他们将Mustache合并到他们的库中.

把手

把手使胡子更强大.这是一篇很好的帖子,可以了解更多有关差异的信息.在上面的示例中,Handlebars将允许在客户端(您的浏览器)而不是服务器上重新呈现模板(HTML).因此,如果您的AJAX更改了某些内容,它可能会在HTML中显示.

Handlebars再次具有革命性,它可以自动构建到更新的东西中.这就是模式,为什么学习这些东西几乎就像学习历史一样,因为Web应用程序技术正在快速移动并如此贪婪地蚕食.

把它们捆绑在一起

正如我们之前看到的,90年代的网页无法无缝更改 - 您必须等待数据发送到服务器,服务器将发送回新的html页面.这是一个"静态"网页.我们的第一个代码示例是静态的,因为没有开发人员干预,内容无法更改

然而,第二个示例是动态网页,因为内容是由<h1>变量定义的.是的,<p>变量是在同一页面上定义的(这意味着它仍然是一个静态页面),但如果它是由ajax函数定义的,它可能会随时改变.这是一个基本的AJAX函数:

<script>
  var json = {
    title: "This is the Title of My Page. This is Content",
    paragraph: "This is a paragraph. blah blah blah. My email is ",
    footer_verbiage: "Contact me at ",
    email: "me@me.com"
  }
</script>

<h1>{{title}}</h1>
<p>{{paragraph}} {{email}}</p>
<footer>{{footer_verbiage}} {{email}}</footer>

你可以看到我们有一个我们正在调用的URL,以及一个说明如何处理响应的函数.

React将构建上面的AJAX并促进单页应用程序的快速开发,而不是没有它,Mustache将允许在网页外部定义内容,并且当数据返回时Handlebars将在客户端(Web浏览器)上更改该网页从服务器.

奖金 - Angular是什么？为什么这么重要？:

在上面的"将它们捆绑在一起"部分中,所有需要至少3个javascript库才能完成的东西,Angular本身就能完成,代码更少,更容易阅读(虽然它有缺点).

MVC代表模型,视图,控制器.它是一种允许Web应用程序避免复杂性的编码模式(请参阅"意大利面条代码 ").如果你曾经用纯jquery编写过一个应用程序,你知道事情可能会很快失控.React,胡子和把手一起设置了这种范例.

输入Angular

Angular允许您使用一个框架完成所有这些操作.在上面的示例中,您可以更改您的电子邮件,并在网页上查看它.这使得Angular成为一个改变游戏规则,简单易学的基础知识,同时也允许很多复杂性.

正如我们之前看到的那样,在发布包含Angular所有优点的另一个框架之前,这可能只是时间问题,但是它有很多缺点.实际上,Vue结合了Angular和React的流行组件,并且比其中任何一个都更快.截至目前,Vue社区规模较小,但发展迅速.

摘要:

反应是指AJAX,因为飞机是它的轮子 - 飞机是飞机工作所必需的,但是当你想到飞机时,这不是你想到的第一件事 - 所以它们并不是真正可比的.轮子是飞机的一部分,AJAX也是反应--AJAX是React的一部分.

我建议您查看在线课程,以便快速了解这些内容.我用udemy来学习Typescript,并认为课程很好.但我也在那里发现了一些真正的指示器,所以一定要阅读评论.我没有得到udemy的支付这么说,但是如果他们想要付钱给我,我会很感激.

Answer 2

Ajax用于刷新网页而不必重新加载它:它向服务器发送请求,但通常响应由javascript处理,javascript在浏览器上动态显示新元素而无需重新加载整个页面.

React是一个javascript库,可以动态更新带有派系组件的页面.组件通过javascript交互或通过服务器的ajax请求计算.因此ReactJS也可以使用Ajax请求来更新页面.

Mustache和Handlebars与ReactJS略有不同,因为主要目标是转换将在页面中显示的组件中的模板.它还可以使用Ajax来获取数据(用于获取模板或json数据).

Answer 3

阿贾克斯

我们使用 Ajax 发送 http 请求。而且我们无法单独使用 Ajax 重新渲染页面的特定区域（DOM）。在 ajax 调用产生响应后，我们需要 jQuery 重新渲染页面。实际上比较 jQuery + HTML 和 React.js 远比比较 ajax 和 React.js 更好。

React.js

React.js的作用是将页面（DOM）分成小块（组件）。例如：- 个人资料图像区域、主导航、侧边栏、文本字段、按钮。等从大块到小块。最重要的是，我们可以将功能绑定到这些组件中。示例：- 假设用户需要一个弹出窗口，通过单击上面的“个人资料图像区域”来上传个人资料图像。我们可以编写一个函数来打开弹出窗口。我们还可以编写另一个函数来将个人资料图像上传到数据库。这样我们就可以在React.js里面使用ajax了

请按照本教程进行操作。