react.js 和 Ajax 之间的区别
Difference between react.js and Ajax
当我用谷歌搜索 React.js 时，我得到的是：React.js 是一个用于创建用户界面的框架。如果网站的特定部分经常更新，这意味着我们可以使用 React。但我很困惑 Ajax 仅用于此目的。我们可以使用 Ajax 更新网站的一部分而无需刷新页面。对于模板，我们将使用车把和小胡子。有人可以向我解释一下 react 与 Ajax 的不同之处以及我们为什么要使用它吗？
Ajax 用于刷新网页而无需重新加载它：它向服务器发送请求，但通常响应由动态显示新元素的 javascript 处理在浏览器上无需重新加载整个页面。
React 是一个 javascript 库，它使用接口组件动态更新页面。这些组件是通过 javascript 交互或通过服务器的 ajax 请求计算的。所以ReactJS也可以使用Ajax请求来更新页面。
Mustache 和 Handlebars 与 ReactJS 有点不同，因为主要目标是转换将在页面中显示的组件中的模板。它还可以使用 Ajax 获取数据（用于获取模板或 json 数据）。
Ajax
我们正在使用 Ajax 发送 http 请求。并且我们无法单独使用 Ajax 重新呈现页面的特定区域 (DOM)。我们需要 jQuery 在 ajax 调用产生响应后重新呈现页面。实际上比较 jQuery + HTML 和 React.js 比比较 ajax 和 React.js.
要好得多
React.js
react.js的作用是将页面(DOM)分成小块(Components)。例如：- 个人资料图像区域、主导航、侧边栏、文本字段、按钮。等等，从大件到小件。最重要的是，我们可以将功能绑定到这些组件中。示例：- 假设用户需要一个弹出窗口来通过单击上方的“个人资料图像区域”来上传个人资料图像。我们可以编写一个函数来打开一个弹出窗口。我们还可以编写另一个函数来将个人资料图像上传到数据库。这样我们就可以在React.js
里面使用ajax
请关注此tutorial。
简而言之，React 使用 AJAX。它们无法按照您要求的方式进行比较。
继续阅读有关 React 是什么、AJAX 是什么以及它们如何用于制作现代 Web 应用程序的粗略内容。
这可能是一个比您正在寻找的更简单的解释，但对于可能感到困惑的任何其他人...
AJAX 和飞机
想想飞机。飞机最重要的部分是它会飞。但是飞机也有轮子。轮子起着非常重要的作用，因为没有它们，飞机将永远无法飞行或降落，尽管飞机在空中可以做很多很棒的事情，但没有轮子也没关系。
这与 React 与 AJAX 的关系相同。 React 是飞机，AJAX 是轮子。但是，你知道，其他东西也有轮子。拖拉机、汽车，甚至一些船都有轮子，它们都很重要，没有轮子就废了。 AJAX 对其他网络技术也是如此，但是当你谈论 飞机 时，它的 轮子 通常是距离最远的东西你的想法。
所以 React 是 AJAX，Airplane 是什么车轮.
但是让我们谈谈AJAX。它是什么？为什么如此重要？今天如何在网站中使用它。然后我将展示 React 是如何使用它的。然后向您展示 React 做了什么，它是如此令人印象深刻，它让您忘记了 AJAX - 就像飞机的轮子。
还记得 90 年代的网站吗？
当您单击任何内容时，必须加载一个新页面以显示您单击的效果 - 即使它什么也没有。 Here's an awesome example。转到该页面并四处点击...看看点击如何将您带到一个完全不同的页面？那是之前的互联网AJAX.
现在，看看这个页面：每个答案旁边都有一个向上箭头...继续并单击其中一个...注意页面没有未重新加载，但您会收到反馈：箭头变为橙色。这看似微不足道，但它代表了网络技术的巨大进步：AJAX.
AJAX 允许这种情况发生！现在这没什么大不了的，它对现在的网络体验来说是如此内在，很难想象没有它的互联网。
AJAX 和钟面
AJAX 的一个很好的类比，它如何改变网络是一个简单的手表，或者一个挂钟......想象一下分针、时针和秒针在时钟的表面上移动以显示时间.现在，假设秒针的每一次移动都会导致整个时钟被摧毁并重建？
所有的努力破坏和重建只是为了显示一个微小的变化。好吧，那将是对资源的极大浪费，那是 90 年代的互联网。值得庆幸的是，我们现在有 AJAX。就像时钟无缝显示时间一样，AJAX 允许网页立即显示数据的变化，而无需刷新页面；您单击向上箭头，它变为橙色。无需重新加载页面！
如今一切都使用 AJAX，作为开发人员，编写应用程序变得越来越容易，甚至不知道 AJAX 是什么。这是因为它已被吸收到我们使用的 JavaScript 技术中，例如 React - 使用 fetch 以及其他命令，使 AJAX 更容易和更易读。
而 AJAX 就像网页一样工作：
- 客户端（Web 浏览器，如 Firefox）从服务器（如 Stack Overflow (SO) 服务器）请求数据。
- 服务器处理请求。
- 服务器向客户端发回响应。
- 网页代码根据响应决定网页的去向 (HTML) 和外观 (CSS)。
所有这些都对用户隐藏，因此网页似乎正在对他们的操作做出反应。
Single-Page 应用程序
由于我们不会在每次点击时重建整个页面，因此您可以将内容存储在浏览器中。这可以在您整个访问和以后访问该站点的过程中使用。
第一次访问 Stack Overflow 时，会加载所有 CSS、JS 和 HTML。这三种语言定义了从服务器来回发送的数据的样式（CSS）、行为（JS）和结构（HTML）。猜猜数据是如何发送的！ AJAX.
现在大多数网络都是这样工作的。 Google、Facebook、亚马逊、Youtube、Reddit，每个使用 WordPress 和 WIX 构建的网站，甚至 Stack Overflow - 他们都使用这种基本范例来有效地向用户提供他们的网站。不同之处在于 Single-page 应用程序的构建和管理方式...
[=143=React.js
React is a javascript library for building and maintaining Single-Page Applications.
但这也没什么大不了的。 React 的重要之处在于它如何允许您构建应用程序...
基本上，您分别构建事物，然后将它们组合在一起：组件组合在一起形成一个应用程序。因此，请查看此页面上所有答案的完全合理但伪造的代码：
answerArray.map(a => <Answer answerData={a}></Answer>)
这一行显示了此页面上的大部分信息。这是一件大事。 Stack Overflow 的开发人员创建了他们自己的组件，称为“Answer”，它的唯一工作就是显示答案。你 运行 在一个循环中，bam，所有答案的所有复杂性都是 抽象的 ，隐藏在答案组件中，完全独立于其他组件。
现在看看这个：
<App>
<Header />
<LeftSidebar />
<Question>
{ answerArray.map(a => <Answer answerData={a} /> )}
</Question>
<RightSidebar />
<Footer/>
</App>
这是整个 Stack Overflow 网站。
每个标签（Header、问题、答案等）都是一个组件。这些组件是完全独立的并且有 self-contained 代码，但在这里它们一起用于构建更复杂的应用程序。
作文
React 的一个重要概念是组合，我们在上面只是定义了它。 “组合允许您通过组合小而集中的功能来构建更复杂的功能”(flaviocopes)。我们的应用程序由较小的组件组成。
同样重要的是要注意每个组件都包含自己的功能。这意味着如果用户单击按钮并出现警告，则按钮和使警告出现的代码位于同一组件中。
函数式编程
惊喜，我们也已经定义了这个。就我们的目的而言，函数式编程意味着 1. objects; 2. 他们的行为；在同一个地方。就像上面的按钮示例。单击一个按钮，得到一个警告。这些都在同一个文件中。
这不同于 pre-React 开发，其中所有按钮都在一个文件中，而按钮的所有效果都在另一个文件中。这不一定是错误的做事方式，但对于 Web 开发，更容易从 self-contained 构建块的角度来思考，而不是广泛分散的本身不起作用的工具。
为什么你不应该关心小胡子和车把
这两项技术已经被 React 蚕食了。与 React 使用 AJAX 的方式类似，但更容易，Mustache 和 Handlebars 已经在 React 中，并且您一直在使用它们，甚至不知道。对我来说，没关系。有相反的论点，知识从来都不是坏事，所以如果你想进一步调查，但这已经足够长了，所以我就说这么多。
相反，我会告诉您 3 种您应该关心的技术。
你应该关心的反而是...
节点
Node.js 的要点是它在浏览器外执行 JavaScript。大呐喊，对吧？好吧，事实证明这是有史以来对 Web 开发人员最具影响力的进步之一。其实很多时候先下载Node再下载React
节点很重要有两个重要原因：
- 它可以让你下载其他东西
- 它允许您在将其发送到浏览器之前处理 JavaScript
我可以写关于 Node 的页面和页面，但你从这里得到的应该是“Node 很重要，我应该寻找更多关于 Node 的知识以及它与 React 和 Web 开发的关系。”
NPM
NPM 不代表“节点包管理器”，但它应该代表，因为这正是它的作用。 React、SASS、Angular、Vue，这里提到的几乎所有内容，您可能会使用 npm 安装并保持更新。
Webpack
Webpack 是一个“模块打包器”。它将你所有的 js 和 css 文件写入一个文件，所以你只需要担心写一个 <script> 标签。
每个 React 组件都会至少关联一个 js 文件。每个组件也应该有自己的文件。跟踪所有这些文件要求很高。 Webpack 为你做，它只是让生活更轻松，所以早点了解它，不要回避它。
这是 React 应用程序固有的东西，大多数时候它会正常工作，你甚至不会知道。例如，create-react-app 会自动安装它，不需要你做任何事情 - 与 Babel 一样...
通天塔
将您的所有代码转换为 ECMA5，以便大多数浏览器和这些浏览器的大多数版本都可以读取它。
同样，这可以通过 npm 安装，或者如果你只是想玩 React 而不想被这样的细节所困扰，你可以 运行 create-react-app，并且这将仅适用于自动设置，并且在您学习时会脱颖而出。
他们让事情变得更容易
NPM、Webpack、Babel 和许多其他 Node 包只是为了让您的生活更轻松。构建 Web 应用程序需要大量维护 - 或者是一些小的 non-programming 通常您甚至不需要考虑的烦恼。
尽量不要被新的软件包吓倒，因为运用它们的力量可能意味着无数的时间投入到更有趣的事情上。
结论
希望这篇 post 能帮助您了解 React、AJAX 和 Web 应用程序开发的持续本质之间的区别。 React 和 AJAX 没有可比性，但 React 使用 AJAX，或者更确切地说，您 - 开发人员 - 在 React 中使用 AJAX 来获取数据而无需重新加载页面。
AJAX 和其他技术对 Web 应用程序的进步具有里程碑意义，但由于它们对应用程序的绝对重要性，它们被吸收到新技术中，以至于您甚至不必了解他们，从中获益。
我的目标是纠正您在学习道路上的一些误解；解释 Web 开发当前状态的“原因”；并介绍你没有提到但应该知道的技术：Node、npm、Babel。
如果您想继续学习，我强烈建议您学习 React 教程。我在 platform.ui.dev/ 做过一些工作，喜欢他们的学习方法和支付结构（我没有得到报酬就这么说）。祝你好运，我希望这对你有所帮助。
简单地说，React 是 Facebook 构建的 JavaScript 库。它通常被视为一个框架，因为它有许多扩展，但官方文档将其标记为用于构建用户界面的库。另一方面，Ajax 根本不是库、框架或语言。 Ajax 是程序员用来调用 web APIs 而不会中断代码流的一种技术。在那一天结束时，您的 JavaScript 代码是逐行同步 运行 并且 Ajax 在您的同步代码中是异步的 运行 但是它永远不会暂停您的代码并让它等待发送和接收 API 调用。使用 Ajax，发送和接收数据都在后台完成，因此您不必担心获取数据所需的延迟。实际上，您可以在 React 代码中使用 Ajax。 Ajax 使用称为 Fetch 的东西来实际调用 API 并且您可以使用多种方法来处理从 API 接收到的数据，例如 .then 和 .catch 或 Async/Await。您也根本不需要使用 Fetch，还有其他第三方方法可以使用 Ajax 调用 API，例如使用 Axios。我建议您观看有关如何使用这些不同工具的视频，因为当您了解它们的工作原理时，您会发现 React 和 Ajax 可以一起使用来构建出色的应用程序。希望这对您有所帮助，请按照您对这个答案的看法进行投票。我是这个网站的新手。
当我用谷歌搜索 React.js 时，我得到的是：React.js 是一个用于创建用户界面的框架。如果网站的特定部分经常更新，这意味着我们可以使用 React。但我很困惑 Ajax 仅用于此目的。我们可以使用 Ajax 更新网站的一部分而无需刷新页面。对于模板，我们将使用车把和小胡子。有人可以向我解释一下 react 与 Ajax 的不同之处以及我们为什么要使用它吗？
Ajax 用于刷新网页而无需重新加载它：它向服务器发送请求，但通常响应由动态显示新元素的 javascript 处理在浏览器上无需重新加载整个页面。
React 是一个 javascript 库，它使用接口组件动态更新页面。这些组件是通过 javascript 交互或通过服务器的 ajax 请求计算的。所以ReactJS也可以使用Ajax请求来更新页面。
Mustache 和 Handlebars 与 ReactJS 有点不同，因为主要目标是转换将在页面中显示的组件中的模板。它还可以使用 Ajax 获取数据（用于获取模板或 json 数据）。
Ajax
我们正在使用 Ajax 发送 http 请求。并且我们无法单独使用 Ajax 重新呈现页面的特定区域 (DOM)。我们需要 jQuery 在 ajax 调用产生响应后重新呈现页面。实际上比较 jQuery + HTML 和 React.js 比比较 ajax 和 React.js.
要好得多React.js
react.js的作用是将页面(DOM)分成小块(Components)。例如：- 个人资料图像区域、主导航、侧边栏、文本字段、按钮。等等，从大件到小件。最重要的是，我们可以将功能绑定到这些组件中。示例：- 假设用户需要一个弹出窗口来通过单击上方的“个人资料图像区域”来上传个人资料图像。我们可以编写一个函数来打开一个弹出窗口。我们还可以编写另一个函数来将个人资料图像上传到数据库。这样我们就可以在React.js
里面使用ajax请关注此tutorial。
简而言之，React 使用 AJAX。它们无法按照您要求的方式进行比较。
继续阅读有关 React 是什么、AJAX 是什么以及它们如何用于制作现代 Web 应用程序的粗略内容。
这可能是一个比您正在寻找的更简单的解释，但对于可能感到困惑的任何其他人...
AJAX 和飞机
想想飞机。飞机最重要的部分是它会飞。但是飞机也有轮子。轮子起着非常重要的作用，因为没有它们，飞机将永远无法飞行或降落，尽管飞机在空中可以做很多很棒的事情，但没有轮子也没关系。
这与 React 与 AJAX 的关系相同。 React 是飞机，AJAX 是轮子。但是，你知道，其他东西也有轮子。拖拉机、汽车，甚至一些船都有轮子，它们都很重要，没有轮子就废了。 AJAX 对其他网络技术也是如此，但是当你谈论 飞机 时，它的 轮子 通常是距离最远的东西你的想法。
所以 React 是 AJAX，Airplane 是什么车轮.
但是让我们谈谈AJAX。它是什么？为什么如此重要？今天如何在网站中使用它。然后我将展示 React 是如何使用它的。然后向您展示 React 做了什么，它是如此令人印象深刻，它让您忘记了 AJAX - 就像飞机的轮子。
还记得 90 年代的网站吗？
当您单击任何内容时，必须加载一个新页面以显示您单击的效果 - 即使它什么也没有。 Here's an awesome example。转到该页面并四处点击...看看点击如何将您带到一个完全不同的页面？那是之前的互联网AJAX.
现在，看看这个页面：每个答案旁边都有一个向上箭头...继续并单击其中一个...注意页面没有未重新加载，但您会收到反馈：箭头变为橙色。这看似微不足道，但它代表了网络技术的巨大进步：AJAX.
AJAX 允许这种情况发生！现在这没什么大不了的，它对现在的网络体验来说是如此内在，很难想象没有它的互联网。
AJAX 和钟面
AJAX 的一个很好的类比，它如何改变网络是一个简单的手表，或者一个挂钟......想象一下分针、时针和秒针在时钟的表面上移动以显示时间.现在，假设秒针的每一次移动都会导致整个时钟被摧毁并重建？
所有的努力破坏和重建只是为了显示一个微小的变化。好吧，那将是对资源的极大浪费，那是 90 年代的互联网。值得庆幸的是，我们现在有 AJAX。就像时钟无缝显示时间一样，AJAX 允许网页立即显示数据的变化，而无需刷新页面；您单击向上箭头，它变为橙色。无需重新加载页面！
如今一切都使用 AJAX，作为开发人员，编写应用程序变得越来越容易，甚至不知道 AJAX 是什么。这是因为它已被吸收到我们使用的 JavaScript 技术中，例如 React - 使用 fetch 以及其他命令，使 AJAX 更容易和更易读。
而 AJAX 就像网页一样工作：
- 客户端（Web 浏览器，如 Firefox）从服务器（如 Stack Overflow (SO) 服务器）请求数据。
- 服务器处理请求。
- 服务器向客户端发回响应。
- 网页代码根据响应决定网页的去向 (HTML) 和外观 (CSS)。
所有这些都对用户隐藏，因此网页似乎正在对他们的操作做出反应。
Single-Page 应用程序
由于我们不会在每次点击时重建整个页面，因此您可以将内容存储在浏览器中。这可以在您整个访问和以后访问该站点的过程中使用。
第一次访问 Stack Overflow 时，会加载所有 CSS、JS 和 HTML。这三种语言定义了从服务器来回发送的数据的样式（CSS）、行为（JS）和结构（HTML）。猜猜数据是如何发送的！ AJAX.
现在大多数网络都是这样工作的。 Google、Facebook、亚马逊、Youtube、Reddit，每个使用 WordPress 和 WIX 构建的网站，甚至 Stack Overflow - 他们都使用这种基本范例来有效地向用户提供他们的网站。不同之处在于 Single-page 应用程序的构建和管理方式...
[=143=React.js
React is a javascript library for building and maintaining Single-Page Applications.
但这也没什么大不了的。 React 的重要之处在于它如何允许您构建应用程序...
基本上，您分别构建事物，然后将它们组合在一起：组件组合在一起形成一个应用程序。因此，请查看此页面上所有答案的完全合理但伪造的代码：
answerArray.map(a => <Answer answerData={a}></Answer>)
这一行显示了此页面上的大部分信息。这是一件大事。 Stack Overflow 的开发人员创建了他们自己的组件，称为“Answer”，它的唯一工作就是显示答案。你 运行 在一个循环中，bam，所有答案的所有复杂性都是 抽象的 ，隐藏在答案组件中，完全独立于其他组件。
现在看看这个：
<App>
<Header />
<LeftSidebar />
<Question>
{ answerArray.map(a => <Answer answerData={a} /> )}
</Question>
<RightSidebar />
<Footer/>
</App>
这是整个 Stack Overflow 网站。
每个标签（Header、问题、答案等）都是一个组件。这些组件是完全独立的并且有 self-contained 代码，但在这里它们一起用于构建更复杂的应用程序。
作文
React 的一个重要概念是组合，我们在上面只是定义了它。 “组合允许您通过组合小而集中的功能来构建更复杂的功能”(flaviocopes)。我们的应用程序由较小的组件组成。
同样重要的是要注意每个组件都包含自己的功能。这意味着如果用户单击按钮并出现警告，则按钮和使警告出现的代码位于同一组件中。
函数式编程
惊喜，我们也已经定义了这个。就我们的目的而言，函数式编程意味着 1. objects; 2. 他们的行为；在同一个地方。就像上面的按钮示例。单击一个按钮，得到一个警告。这些都在同一个文件中。
这不同于 pre-React 开发，其中所有按钮都在一个文件中，而按钮的所有效果都在另一个文件中。这不一定是错误的做事方式，但对于 Web 开发，更容易从 self-contained 构建块的角度来思考，而不是广泛分散的本身不起作用的工具。
为什么你不应该关心小胡子和车把
这两项技术已经被 React 蚕食了。与 React 使用 AJAX 的方式类似，但更容易，Mustache 和 Handlebars 已经在 React 中，并且您一直在使用它们，甚至不知道。对我来说，没关系。有相反的论点，知识从来都不是坏事，所以如果你想进一步调查，但这已经足够长了，所以我就说这么多。
相反，我会告诉您 3 种您应该关心的技术。
你应该关心的反而是...
节点
Node.js 的要点是它在浏览器外执行 JavaScript。大呐喊，对吧？好吧，事实证明这是有史以来对 Web 开发人员最具影响力的进步之一。其实很多时候先下载Node再下载React
节点很重要有两个重要原因：
- 它可以让你下载其他东西
- 它允许您在将其发送到浏览器之前处理 JavaScript
我可以写关于 Node 的页面和页面，但你从这里得到的应该是“Node 很重要，我应该寻找更多关于 Node 的知识以及它与 React 和 Web 开发的关系。”
NPM
NPM 不代表“节点包管理器”，但它应该代表，因为这正是它的作用。 React、SASS、Angular、Vue，这里提到的几乎所有内容，您可能会使用 npm 安装并保持更新。
Webpack
Webpack 是一个“模块打包器”。它将你所有的 js 和 css 文件写入一个文件，所以你只需要担心写一个 <script> 标签。
每个 React 组件都会至少关联一个 js 文件。每个组件也应该有自己的文件。跟踪所有这些文件要求很高。 Webpack 为你做，它只是让生活更轻松，所以早点了解它，不要回避它。
这是 React 应用程序固有的东西，大多数时候它会正常工作，你甚至不会知道。例如，create-react-app 会自动安装它，不需要你做任何事情 - 与 Babel 一样...
通天塔
将您的所有代码转换为 ECMA5，以便大多数浏览器和这些浏览器的大多数版本都可以读取它。
同样，这可以通过 npm 安装，或者如果你只是想玩 React 而不想被这样的细节所困扰，你可以 运行 create-react-app，并且这将仅适用于自动设置，并且在您学习时会脱颖而出。
他们让事情变得更容易
NPM、Webpack、Babel 和许多其他 Node 包只是为了让您的生活更轻松。构建 Web 应用程序需要大量维护 - 或者是一些小的 non-programming 通常您甚至不需要考虑的烦恼。
尽量不要被新的软件包吓倒，因为运用它们的力量可能意味着无数的时间投入到更有趣的事情上。
结论
希望这篇 post 能帮助您了解 React、AJAX 和 Web 应用程序开发的持续本质之间的区别。 React 和 AJAX 没有可比性，但 React 使用 AJAX，或者更确切地说，您 - 开发人员 - 在 React 中使用 AJAX 来获取数据而无需重新加载页面。
AJAX 和其他技术对 Web 应用程序的进步具有里程碑意义，但由于它们对应用程序的绝对重要性，它们被吸收到新技术中，以至于您甚至不必了解他们，从中获益。
我的目标是纠正您在学习道路上的一些误解；解释 Web 开发当前状态的“原因”；并介绍你没有提到但应该知道的技术：Node、npm、Babel。
如果您想继续学习，我强烈建议您学习 React 教程。我在 platform.ui.dev/ 做过一些工作，喜欢他们的学习方法和支付结构（我没有得到报酬就这么说）。祝你好运，我希望这对你有所帮助。
简单地说，React 是 Facebook 构建的 JavaScript 库。它通常被视为一个框架，因为它有许多扩展，但官方文档将其标记为用于构建用户界面的库。另一方面，Ajax 根本不是库、框架或语言。 Ajax 是程序员用来调用 web APIs 而不会中断代码流的一种技术。在那一天结束时，您的 JavaScript 代码是逐行同步 运行 并且 Ajax 在您的同步代码中是异步的 运行 但是它永远不会暂停您的代码并让它等待发送和接收 API 调用。使用 Ajax，发送和接收数据都在后台完成，因此您不必担心获取数据所需的延迟。实际上，您可以在 React 代码中使用 Ajax。 Ajax 使用称为 Fetch 的东西来实际调用 API 并且您可以使用多种方法来处理从 API 接收到的数据，例如 .then 和 .catch 或 Async/Await。您也根本不需要使用 Fetch，还有其他第三方方法可以使用 Ajax 调用 API，例如使用 Axios。我建议您观看有关如何使用这些不同工具的视频，因为当您了解它们的工作原理时，您会发现 React 和 Ajax 可以一起使用来构建出色的应用程序。希望这对您有所帮助，请按照您对这个答案的看法进行投票。我是这个网站的新手。