当我搜索React.js时，我得到的是：React.js是一个用于创建用户界面的框架。如果网站的某个特定部分经常更新，则意味着我们可以使用反应。但我很困惑，Ajax仅用于此。我们可以使用Ajax更新站点的一部分而无需刷新页面。对于模板，我们将使用把手和小胡子。有人可以用什么方式解释我与Ajax不同的反应以及为什么我们应该使用它。
Ajax用于刷新网页而不必重新加载它：它向服务器发送请求，但通常响应由javascript处理，javascript在浏览器上动态显示新元素而无需重新加载整个页面。
React是一个javascript库，可以动态更新带有派系组件的页面。组件通过javascript交互或通过服务器的ajax请求计算。因此ReactJS也可以使用Ajax请求来更新页面。
Mustache和Handlebars与ReactJS略有不同，因为主要目标是转换将在页面中显示的组件中的模板。它还可以使用Ajax来获取数据（用于获取模板或json数据）。
这可能是一个比你正在寻找的更简单的解释，但对于其他可能感到困惑的人......
要了解React，您需要了解AJAX如何改变一切：
还记得上世纪90年代的互联网吗？
当您点击任何内容时，页面必须重新加载以显示您的点击发生了什么 - 即使它什么也没有。
Here's an awesome example。转到该页面并单击...查看点击率如何将您带到一个完全不同的页面？那是AJAX之前的互联网：处理需要加载新页面的动作 - 即使它是同一页面。
该网站是在AJAX之前建造的。
现在，看一下这个页面：每个答案旁边都是向上箭头。继续，然后单击其中一个。请注意，页面不会重新加载，但会给出反馈：箭头变为橙色。这似乎微不足道，但它代表了网络技术的重大进步。
一个很好的类比是模拟手表。它的脸上有数字和指针，侧面有一个旋钮。旋钮可以旋转以改变时间。想象一下，每次旋转手表时，数字和指针都会被摧毁并重建以显示新的时间。这是AJAX之前的互联网。
AJAX代表异步Javascript和XML。但最重要的一个词是Asynchronous，意思是“在不同的时间”，结果是用户交互是在用户的视图之外处理的。
以下是单击Stack Overflow上的向上箭头时发生的情况：
JSON是一个相对较新的东西。在JSON之前，这个响应将是XML格式的：
<xml>
<action>upvote</action>
<success>true</success>
</xml>
React会理解这个响应并使箭头变为橙色而不重新加载整个页面。
现在一切都使用AJAX。很难想象没有它的网络，作为开发人员，在不知道AJAX是什么的情况下编写Web应用程序变得越来越容易。这是因为它已经被我们使用的javaScript技术所吸收，比如React。
React是一个用于构建用户界面的JavaScript库。
（如果您想更多地了解库，框架和工具包之间的差异，请查看this great post。）
基本上，React已经预先编写了代码，可以更轻松，更清晰地创建现代化的交互式Web应用程序。
React，Vue和Angular都允许您创建“单页应用程序”。这是一个只使用一页的应用程序！考虑比尔盖茨的网页。每次点击只会更改屏幕上的HTML / CSS ...如果是单页应用程序，您将永远不需要转到另一个页面。
React还有很多功能，但就AJAX而言，React会接收响应并更新“视图”（用户看到的内容）以显示更改。
或者，更确切地说，开发人员告诉React“当用户点击它时，我需要一个变为橙色的箭头，并且AJAX响应具有”动作“并且它是”upvote“并且”成功“是真的，”并且React处理其余部分。在这种情况下，箭头将是“组件”。组件是React的主要构建块，它接收选项并生成输出。通常，输出是HTML以显示在网页上。
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 [email protected]</p>
<footer>Contact me at [email protected]</footer>
结构由HTML定义。 <h1>和<p>是告诉浏览器（Chrome或Firefox或IE）如何将内容划分为多个部分的“标签”。
假设您想要更改电子邮件地址。你必须在两个地方改变它。这很糟糕，因为可能十年过去了，你忘记了你把电子邮件或其他人工作的所有地方，而且他们不知道它在两个地方，所以他们改变一个地方而不是另一个地方，然后您可能有客户通过电子邮件发送错误的地址。这可能会花费你的钱。
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: "[email protected]"
}
</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再次具有革命性，它可以自动构建到更新的东西中。这就是模式，为什么学习这些东西几乎就像学习历史一样，因为Web应用程序技术正在快速移动并如此贪婪地蚕食。
在我们的祖父时钟示例中，Handlebars将允许秒针无缝移动，而不是在钟表周围滴答作响。如果没有小胡子，服务器会构建你看到的下一个东西，然后将它发送到客户端，然后才能看到它。
例如，如果你退出SO，那么尝试upvote东西，密切关注向上箭头，暂时它会变回橙色然后恢复为灰色并要求你登录。这是因为您的计算机上的逻辑会对单击作出反应并立即指示箭头为橙色，而不是等待服务器“ok”执行此操作。
正如我们之前看到的，90年代的网页无法无缝更改 - 您必须等待数据发送到服务器，服务器将发回新的html页面。这是一个“静态”网页。我们的第一个代码示例是静态的，因为没有开发人员干预，内容无法更改
然而，第二个例子是动态网页，因为内容是由json变量定义的。是的，json变量是在同一页面上定义的（这意味着它仍然是一个静态页面），但如果它由ajax函数定义，它可能会随时更改。这是一个基本的AJAX函数：
AJAX.get("http://stackoverflow.api.com?upvote", function(response){
json = response.data;
});
你可以看到我们有一个我们正在调用的URL，以及一个说明如何处理响应的函数。
React将构建上面的AJAX并促进单页应用程序的快速开发，而不是没有它，Mustache将允许在网页外部定义内容，并且当数据返回时Handlebars将在客户端（Web浏览器）上更改该网页从服务器。
在上面的“将它们捆绑在一起”部分中，所有需要至少3个javascript库才能完成的东西，Angular本身就可以完成，代码更少，更容易阅读（虽然它有缺点）。
MVC代表模型，视图，控制器。它是一种允许Web应用程序避免复杂性的编码模式（请参阅“spaghetti code”）。如果您曾经在纯jquery中编写过应用程序，那么您知道事情可能会很快失控。 React，胡子和把手一起设置了这种范例。
输入Angular
Angular允许您使用一个框架完成所有这些操作。在上面的示例中，您可以更改您的电子邮件，并在网页上查看它。这使得Angular成为一个改变游戏规则，简单易学的基础知识，同时也允许很多复杂性。
正如我们之前看到的那样，在发布包含Angular所有优点的另一个框架之前，这可能只是时间问题，但是它有很多缺点。实际上，Vue结合了Angular和React的流行组件，并且工作速度比任何一种都快。截至目前，Vue社区规模较小，但发展迅速。
反应是指AJAX，因为飞机是它的轮子 - 轮子是飞机工作所必需的，但是当你想到飞机时，这不是你想到的第一件事 - 所以它们并不是真正可比的。轮子是飞机的一部分，AJAX也是反应--AJAX是React的一部分。
我建议您查看在线课程，以便快速了解这些内容。我用udemy来学习Typescript，并认为课程很好。但我也在那里找到了一些真正的指示器，所以一定要阅读评论。我没有得到udemy的支付这么说，但是如果他们想要付钱给我，我会很感激。
简而言之，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可以一起用来构建一个很棒的应用程序。希望这有所帮助，请投票，不过你对这个答案感觉如何。我对这个网站很新。
阿贾克斯
我们使用ajax发送http请求。而且我们不能仅使用ajax重新呈现页面的特定区域（DOM）。在ajax调用响应之后，我们需要jquery重新呈现页面。实际上比较jquery + HTML和React.js远比比较ajax和React.js好得多。
React.js
react.js的作用是将页面（DOM）划分为小的和平（组件）。例如： - 个人资料图片区域，主要导航，侧边栏，文本字段，按钮。从大和平到小和平。最重要的是，我们可以将功能绑定到这些组件中。例如： - 假设用户需要弹出窗口才能通过单击“个人资料图像区域”上方来上传个人资料图像。我们可以写一个函数来打开一个弹出窗口。我们还可以编写另一个函数来将配置文件映像上传到数据库。通过这种方式，我们可以在React.js中使用ajax
请关注这个tutorial。