ReactJS ReduxJS 是怎么回事？

Question

我是一名资深的 Web 开发人员，我习惯于 html、css、js (jquery) 并使用 Java、Cold fusion 或 PHP 等服务器端语言。

现在对于我的生活，我找不到一个好的解释或如何开始。这只是没有意义，我在过去的 3 天里一直在看教程和阅读书籍。这不是抱怨，而是请求帮助。有人请向我解释这个架构是如何设置的。过去，您将拥有一个 html 文件并注入一些占位符，这些占位符将由您的服务器端语言填充。

现在的结构是什么？我已经创建了一个 Ubuntu 服务器，我已经安装了 NodeJS 及其关联，我创建了一个反向代理并安装了 nginx 作为我的服务器。 PM2 是我的 NodeJS 应用程序的流程管理器。到目前为止我在正确的轨道上吗？

如果有，reactjs，reduxjs，babeljs，什么是npm的webpack？我的下一步是什么，我很困惑，我不知道所有这些事情是什么。特别是 reactjs、redsuxjs 和 bablejs 和其他任何东西有什么区别，这些都是前端库还是？什么是 npm webpack。然后是 redux 和 react-redux，什么？感谢您的澄清。

我的目标

我想学习如何制作单页应用程序并尽可能多地利用引导程序。我认为反应将是要走的路，但我真的很感激一些澄清，而不仅仅是从他们的网站描述中复制粘贴。谢谢你们。

Answer 1

首先，您的问题没有简短的答案。每个主题都可以深入研究数天、数周或数月，以了解和掌握。我将尝试对您问题中的所有相关主题使用隐喻。

问：什么是 Babel，我为什么需要它？

JavaScript 在过去几年中不断发展。很多！。今天的 JavaScript 有很多新的单词和句子结构，旧的浏览器在没有翻译器的情况下根本无法理解。 Babel 就是那个翻译器。今天的现代浏览器（Chrome、Firefox、Edge、Safari）可以原生地理解大部分现代版本的 JavaScript，或者像酷孩子一样称之为 ECMAScript2015、ES2015 或 ES6 等。

即便如此，ES(JavaScript) 仍在不断发展。新功能正在分阶段添加，babel 正在跟上这些阶段功能，将所有这些新功能逐字转换为所有浏览器（无论年龄大小）都能理解的普通旧 JavaScript。你可以在这里玩 babel 看看它做了什么：https://babeljs.io/repl/

问：什么是 React？

React 只是众多现代前端框架之一，可帮助您以有效的方式显示数据。

如果宜家为开发人员生产乐高积木，它会被称为 React。 React 让您创建乐高积木（称为组件）并将它们组合在一起以创建应用程序。 React 组件可以是纯粹的呈现（或“哑”），这意味着它们将简单地返回一些 HTML，或者它们可以是“智能的”。智能组件可以具有称为状态的东西。

如果我们回到 LEGO 类比，state 将是 LEGO Technics 集合中的引擎。如果一个组件是一辆普通的旧乐高汽车，它需要一些外部帮助才能让它前进。你用手推动汽车，它就会向前移动。借助智能组件或 LEGO technics 引擎，您的 LEGO Technics 汽车可以在引擎启动时将其状态从静止变为自行移动，从而从内部推动汽车向前行驶。因此，每当状态发生变化时，您的汽车REACTS 就会发生变化。组件也是如此。 React 将监视组件状态的变化，并且只要有变化（通常由用户事件触发），组件就会更新。 React 组件可以用普通的旧 javascript 编写，但鼓励使用 ES6，这使您作为 React 开发人员的生活更加轻松。因此，您将需要一个翻译器，例如 Babel，以使您的 React 应用程序在浏览器中易于理解。

问：Redux？

好的，我将在这里简单地打断你并告诉你，此时你不需要 Redux 来创建 React 应用程序。 Redux 是一个可以与任何框架结合使用或单独与 vanilla JavaScript 一起使用的库。 Redux 所做的是让您能够将应用程序 model 或数据抽象到 Redux 称为 store 的东西中。一个 store 可以是任何东西，一个数组，一个对象，实际上任何东西。 Redux 的工作是在收到和操作的任何时候更新该存储。

让我们想象一下 Redux 是一个叫 John 的活生生的人。约翰得到一个空杯子（商店）。每次约翰被告知“倒水”时，约翰都会拿起杯子往里面倒一些水。 “倒水”命令是我们的行动。 John 可以监听其他动作，例如“空杯子”。每个动作都经过一个处理单元——约翰的大脑（动作的减速器）。如果约翰没有脑子，他将无法执行任何动作。当约翰收到“空杯子”命令时，他将水扔掉。你可以教给 John 任何你想要的动作，并且你可以给 John 一个不同的 store 来执行这些动作。这里重要的一点是，John 有一个 store（杯子），一个 reducer（大脑），并且有一些动作要执行。所以这个动作，通过reducer，根据reducer的决定，更新store。所以在 JavaScript 术语中，reducer 是一个函数，它接受一个动作并返回一个 store。该操作是一个普通的 javascript 对象，它有一个类型属性（'pour'），它也可以有一些负载（'water'）。所以基本上你可以告诉 John，'pour water' in the cup，其中 pour 是动作类型，payload 是 water。

问：React-Redux？

把 react-redux 想象成一个透明胶带，它可以让你将 react 和 redux 融合在一起，这样每个组件都可以向 reducer 发送一个操作，每个组件都可以访问 store。

问：Webpack？

所以在上面的例子中，我们已经有了几个库。 Babel、React、Redux、React-Redux，谁知道你的项目中需要多少其他库、资产、文件以及你不需要的东西。您可能习惯于使用脚本、图像、链接标签将它们中的每一个导入到 index.html 中。好吧，过于简化了，webpack 为你做到了！每当您的应用程序中的某个模块依赖于另一个模块、资产或其他任何东西时，webpack 将递归查找所有依赖项并将它们放在一个文件中。您只需在 index.html 中导入该文件即可忘记它。 Webpack 可以为你做很多其他事情，但这就是它的要点，因此它被称为模块捆绑器。

哇，就是这样。如果你能走到这一步，你就是一个真正的英雄，我很佩服你的耐心。

附言

一篇非常棒（也很有趣）的文章可以帮助您了解所有这些库和框架的最新信息： https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

Answer 2

正如您提到的，您曾研究过 HTML、CSS、JQuery 和 JAVA。如果您了解 Reactjs 和 Redux 的需求，这将不难。如果您使用的是纯 javascript 或 jquery。随着应用程序大小的增加，您将难以维护代码。借助 react js 代码将很容易在客户端维护。

例子：

反应 假设您正在创建一个电子商务应用程序，其中包括产品、选定的产品描述、购物车、产品的库存可用性。如果您的应用程序是单页的。页面不会刷新。您可以使用 react 来实现这个电子商务应用程序。您可以创建像 ProductDetailComponent、ProductDescriptionComponent、ShoppingCartComponent、StockAvailabilityComponent 这样的组件。您将在主组件中注入所有组件。这样，您的代码将在客户端更加模块化。假设 ShoppingCartComponent 需要 PriceComponent、BasketComponent。您可以在 ShoppingCartComponent 中使用这些组件。这样，您就可以在其他组件中拥有组件。如果您需要在其他页面中使用 ShoppingCartComponent。您只需在该页面中导入该组件。通过这种方式，您可以重用现有组件。

所有组件都将保留自己的数据，这样组件不会紧密耦合，并且可以在我们应用程序的多个位置使用

Redux Redux 与 React 无关。您也可以将 redux 与 angular 一起使用。使用 redux 的好处是您希望跨组件共享一些上下文数据，例如您可以使用 redux 的用户信息，以便跨组件使用用户信息。无需进行额外的服务器调用来获取该数据。所以 redux 提供了客户端缓存。 使用 redux 作为 store 的另一个好处是我们可以维护单个数据副本。如果任何组件更改数据，所有组件都将收到数据已更改的通知。在我们的购物车示例中，用户选择的产品可以在 redux 中维护，可供所有组件使用。

父子组件之间的数据共享 您可以在 props 的帮助下将数据从父组件传递到子组件，因为在 ShoppingKartComponent 的情况下，您需要将一些数据传递给 Price 组件，您可以使用 props。您还可以将函数作为道具传递给子组件，子组件可以调用该函数来通知父组件更新数据。