当我搜索React.js时，我得到的是：React.js是一个用于创建用户界面的框架。如果网站的某个特定部分经常更新，则意味着我们可以使用反应。但我很困惑，Ajax仅用于此。我们可以使用Ajax更新站点的一部分而无需刷新页面。对于模板，我们将使用把手和小胡子。有人可以用什么方式解释我与Ajax不同的反应以及为什么我们应该使用它。
答案 0 :(得分：55)
这可能比你正在寻找的更简单，但对于其他可能感到困惑的人来说......
要了解React，您需要了解AJAX如何改变一切：
请记住90年代的互联网
当您点击任何内容时，页面必须重新加载以显示您的点击发生了什么 - 即使它什么也没有。
Here's an awesome example。转到该页面并单击...查看点击率如何将您带到一个完全不同的页面？那是AJAX之前的互联网。处理动作需要极其耗时的页面加载，这意味着整个显示都会受到影响。
该网站是在AJAX之前构建的。
现在，看看这个页面：每个答案旁边都是向上箭头。继续，然后单击其中一个。请注意页面没有重新加载，但您会得到反馈：箭头变为橙色。这似乎是一个微不足道的事情，这就是重点。
想想一个祖父时钟：当你看到它的前面时，你会看到界面 - 一个带有数字和三只手的圆圈。但是当你打开它时，你会看到使它全部工作所需的复杂齿轮和电路。同样，对于良好的Web界面，用户隐藏了复杂性，使他们的体验尽可能无痛苦。
AJAX代表 A 同步 J avascript A nd X ML。但最重要的词是异步，这意味着＆＃34;在不同的时间＆＃34;。在我们的Stack Overflow示例中，它意味着SO可以在不重新加载页面的情况下处理交互性。
点击Stack Overflow上的向上箭头时发生了什么：
所有这一切都是从用户的角度无缝发生的，这意味着没有震动的页面重新加载，箭头只是变成了橙色。而React，Mustache，Handlebars和AJAX（如果SO正在使用这样的设置）将分别处理该过程的不同部分。我们稍后会再回来......
现在一切都使用AJAX。很难想象没有它的网络，作为开发人员，在不知道AJAX是什么的情况下编写Web应用程序变得越来越容易。这是因为它已经被我们使用的javaScript技术所吸收，比如React。
React是一个javascript库。如果您想进一步了解库和框架与工具包之间的差异，请查看this great post。
但基本上，React允许您使用已编写的代码来加快创建网页或应用程序所需的时间。它使用声明性编码范例，而不是命令式的。这基本上意味着你告诉它你想看到什么，它决定了实现它的最佳方式。
就你的问题而言，这意味着React内置了AJAX。它知道何时使用它以及何时不使用它。 您不必知道AJAX会从中获益。
React还有很多，但就AJAX而言，这是你需要知道的。然而，关于React最重要的是它可以更容易地编写单页应用程序。单页应用程序是指使用AJAX的程度，用户永远不必离开一页。
考虑Facebook：你可以对其他人发表评论＆＃39;帖子，＆＃34;喜欢＆＃34;，添加表情符号，观看视频，自己发布内容 - 全部来自一个页面。事实上，React由Facebook维护。小胡子和把手进一步促进了这种单页方法......
回想一下祖父时钟：界面 - 钟面 - 将是React的最终产品，所有其他代码都是隐藏在用户之外的齿轮。
Mustache是一个模板系统。这意味着您可以分离网页的内容和结构。例如，这是一个没有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>
结构由HTML定义。 <h1>和<p>是＆＃34;标记＆＃34;告诉浏览器（Chrome或Firefox或IE）内容如何分成几个部分。
假设您要更改电子邮件地址。 您必须在两个地方更改。这很糟糕，因为可能十年过去了，你忘了你把你的电子邮件或其他人工作的所有地方，并且他们不知道它在2个地方，所以他们改变了一个地方但不是另一个，那么您可能会让客户通过电子邮件发送错误的地址。这可能会花钱。
Mustache旨在通过允许您使用变量在HTML中显示内容来解决此问题（以及其他事项）。在小胡子你可以做这样的事情：
<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>
请参阅，您要在脚本中定义内容，与结构分开。因此，如果您想要更改电子邮件，则只需在一个位置更改电子邮件，它就会传播到您希望电子邮件显示的所有位置。
就像AJAX一样，这种做事方式在当时是如此关键，现在它被纳入更现代的js库中。很快你就可以在不了解胡子的情况下完成你的整个职业生涯，但每天都要使用它。
事实上，Angular和Vue使用类似的模板系统，双花括号和所有，但没有提到Mustache - 它刚刚内置，因为它是如此合乎逻辑。对于经验丰富的编码人员来说，它也很熟悉，对于新手来说也很容易学习 - 根据图书馆的不同，你不必学习不同的模板系统。 Angular和Vue将更长时间相关，因为他们将Mustache合并到他们的库中。
回到我们的祖父时钟示例 - 小胡子将成为时钟之手。手从场景中获取馈送给他们的数据的形状。
Handlebars使Mustache更强大。这里有good post了解有关差异的更多信息。在上面的示例中，Handlebars将允许在客户端（您的浏览器）而不是服务器上重新呈现模板（HTML）。因此，如果您的AJAX更改了某些内容，它可能会在HTML中显示。
同样，Handlebars是如此具有革命性，以至于它自动被嵌入到更新的东西中。这就是模式，为什么学习这些东西几乎就像学习历史一样，因为网络应用技术发展如此之快，如此贪婪地蚕食。
在我们的祖父时钟示例中，Handlebars将允许秒针无缝移动，而不是在钟表周围滴答声。如果没有小胡子，服务器会构建你看到的下一个东西，然后将它发送到客户端，然后才能看到它。
例如，如果你退出SO，那么尝试upvote的东西，密切注意向上箭头，一会儿它会变回橙色然后恢复为灰色并要求你登录。这是因为您的计算机上的逻辑会对点击作出反应，并立即指示箭头变为橙色，而不是等待＆＃34;确定＆＃34;从服务器这样做。
正如我们之前看到的，90年代的网页无法无缝更改 - 您必须等待数据发送到服务器，服务器才会发回新的html页。这是一个＆＃34;静态＆＃34;网页。我们的第一个代码示例是静态的，因为内容在没有开发人员干预的情况下无法更改。
然而，第二个示例是动态网页，因为内容是由json变量定义的。是的，json变量是在同一页面上定义的（这意味着它仍然是静态页面），但如果它由ajax函数定义，它可能会随时更改。这就是基本的AJAX函数：
AJAX.get("http://stackoverflow.api.com?upvote", function(response){
json = response.data;
});
你可以看到我们有一个我们正在调用的网址，以及一个说明如何处理响应的函数。
React 会构建上面的AJAX并促进单页应用程序的快速开发，而不是没有它， Mustache 将允许在网页外定义内容，并且<当数据从服务器返回时，strong> Handlebars 会更改客户端（Web浏览器）上的该网页。
将它们捆绑在一起＆＃34;上面的部分，所有需要至少3个javascript库才能完成的东西，Angular自己完成所有工作，代码更少，更容易阅读（虽然它有缺点）。
MVC 代表模型，视图，控制器。它是一种允许Web应用程序避免复杂性的编码模式（请参阅＆＃34; spaghetti code＆＃34;）。如果您曾经在纯粹的jquery中编写应用程序，那么您就会知道事情可能会很快失控。 React，小胡子和把手一起设置了这种范例。
输入Angular
Angular允许您使用一个框架完成所有这些操作。在上面的示例中，您可以更改您的电子邮件，并在网页上查看它。这使得Angular成为一个改变游戏规则，简单易学的基础知识，同时也允许很多复杂性。
正如我们之前所见，在发布包含Angular所有优点的另一个框架之前可能只是时间问题，但是它有很多缺点。事实上，Vue结合了Angular和React的流行组件，并且比其中任何一个都更快。截至目前，Vue社区规模很小，但发展迅速。
当飞机停在它的轮子上时，对于AJAX来说是反应 - 轮子是飞机工作所必需的，但是当你想到飞机时，首先想到的就是它 - 所以他们是不太可比。轮子是飞机的一部分，AJAX也是反应--AJAX是React的一部分。
我建议您查看在线课程，以了解这些内容。我用udemy来学习Typescript，并认为课程很好。但我也在那里找到了一些真正的指示器，所以一定要阅读评论。我没有得到udemy的支付这么说，但如果他们愿意付钱给我，我会感激不尽。
答案 1 :(得分：13)
Ajax用于刷新网页而不必重新加载它：它向服务器发送请求，但通常响应由javascript处理，javascript在浏览器上动态显示新元素而无需重新加载整个页面
React是一个javascript库，可以动态更新带有派系组件的页面。组件通过javascript交互或通过服务器的ajax请求计算。所以ReactJS也可以使用Ajax请求来更新页面。
Mustache和Handlebars与ReactJS略有不同，主要目标是转换将在页面中显示的组件中的模板。它还可以使用Ajax来获取数据（用于获取模板或json数据）。
答案 2 :(得分：1)
简单来说，React是Facebook构建的JavaScript库。由于它的许多扩展，它通常被视为框架，但官方文档将其标记为用于构建用户界面的库。另一方面，Ajax根本不是库，框架或语言。 Ajax是程序员用来调用Web API而不使代码流完全中断的一种技术。在这一天结束时，您的JavaScript代码逐行同步运行，而Ajax在您的同步代码中异步运行，但这种方式将永远不会暂停您的代码，并让其等待API调用的发送和收到。使用Ajax，发送和接收数据都在后台完成，因此您不必担心获取数据所需的延迟。您实际上可以在React代码中使用Ajax。 Ajax使用一种称为Fetch的东西来实际调用API，并且您可以使用多种方法来处理从API接收的数据，例如.then和.catch或Async / Await。您也完全不需要使用Fetch，还有其他第三方方法可以使用Ajax调用API，例如使用Axios。我建议您观看有关如何使用这些不同工具的视频，因为当您了解它们的全部工作原理时，您会发现React和Ajax可以一起用于构建出色的应用程序。希望能对您有所帮助，请以投票的方式投票。我是这个网站的新手。
答案 3 :(得分：0)
答案 4 :(得分：0)
<强>的Ajax
我们正在使用ajax发送http请求。而且我们不能仅通过使用ajax来重新呈现页面的特定区域（DOM）。在ajax调用响应之后，我们需要jquery重新呈现页面。实际上比较jquery + HTML和React.js远比比较ajax和React.js好得多。
React.js
react.js的作用是将页面（DOM）划分为小和平（组件）。例如： - 个人资料图片区域，主要导航，侧边栏，文本字段，按钮。从大和平到小和平。最重要的是，我们可以将功能绑定到这些组件中。例如： - 假设用户需要弹出窗口才能通过点击上面的＆＃34;个人资料图片区域＆＃34;来上传个人资料图片。我们可以写一个函数来打开一个弹出窗口。我们还可以编写另一个函数来将配置文件映像上传到数据库。通过这种方式，我们可以在React.js中使用ajax
请按照tutorial进行操作。