纯 JavaScript与React 之类的库来设计和开发 Web 应用程序之间的区别

本文主要是介绍纯 JavaScript与React 之类的库来设计和开发 Web 应用程序之间的区别，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Web 应用程序变得越来越复杂和动态。作为回应，已经创建了像 React 这样的新工具和库来加速这个过程。

但是，使用 React 开发 Web 应用程序与使用纯 JavaScript 开发应用程序有何不同？

什么是“纯”JavaScript？

需要指出的是，React 本身是用 JavaScript 编写的，这可能会让人认为编写 React只是编写 JavaScript 代码。

为了设置一些界限，让我们首先定义“普通”JavaScript（也称为“香草”JavaScript）的含义。

React 是一个定义应用程序编写方式的库。它通过设置非常明确的规则来实现这一点，即数据如何在应用程序中流动，以及 UI 如何根据数据的变化进行调整。还有其他设置类似边界的库，例如 Angular 和 Vue。

另一方面，纯 JavaScript 代码（即没有库编写的 JavaScript）可以被认为是一种脚本语言，它不设置任何关于如何定义数据或如何更改 UI 的规则。这使得在没有这些库的情况下编写的应用程序更加自由和可定制。但走这条路也可能导致问题。

我们可以包含在“纯 JavaScript”保护伞下的一个库是 jQuery。jQuery 是一个方便的包装器，它绕过现有的 JavaScript 功能，使其在浏览器中的使用变得容易且一致。不过，它并没有像 React 这样的库设置相同的边界——因此 jQuery 应用程序可能会落入与用普通 JS 编写的应用程序相同的陷阱。

主要区别

由于编写 vanilla JS 的方法有很多，因此很难确定适用于 100% 应用程序的差异列表。但是在这里，我们将定义一些适用于许多没有框架编写的普通 JS 应用程序的关键差异。

1. 这些区别是：
2. 首次创建用户界面的方式
3. 如何在应用程序中拆分功能
4. 数据如何存储在浏览器上
5. 用户界面如何更新

让我们分解其中的每一个差异，并了解应用程序在使用和不使用 React 的情况下如何工作。

首次创建用户界面的方式

在纯 JS 中，初始用户界面通常在服务器上以 HTML 格式创建。意思是，HTML 是在服务器上动态创建的，可能看起来像这样：

<div> <h1>Grocery List</h1> <ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> </ul> </div> 复制

它会被发送到网络浏览器并显示出来——现在还不需要 JavaScript！

相比之下，React 应用程序将从一个固定的 HTML 文件开始，如下所示：

<div id="root"></div> 复制

...这是空白的！那么 UI 是如何创建的呢？

不是在服务器上定义初始 UI，而是在浏览器上定义 UI。所以应用程序从一个空白容器（div在本例中为 a）开始，然后 UI 被加载到该容器中。

UI 由返回的组件定义JSX。JSX 看起来像 HTML，但实际上是 JavaScript - 并且可能看起来像这样：

function GroceryList(props) { return ( <div> <h1>Grocery List</h1> <ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> </ul> </div> ) }; 复制

并且使用名为的库将新GroceryList组件安装（或“渲染”）到div容器中ReactDOM：

<GroceryList />, <GroceryList />, <GroceryList />, document.getElementById("root") ) 复制

这导致与上面的纯 JS 示例相同的初始 UI，除了发生在浏览器上，而不是事先在服务器上。

如何在应用程序中拆分功能

对于普通的 JS 应用程序，对于如何在应用程序中拆分功能或 UI 组件没有任何要求。

例如，我们的初始购物清单可以在主index.html文件中定义：

<div> <h1>Grocery List</h1> <ul id="grocery-list"> <li>Milk</li> <li>Bread</li> <li>Eggs</li> </ul> </div> 复制

更新列表的代码可能深藏在一个单独的 javascript 文件中：

function addItemToList() { // Add item } 复制

传统上这样做是因为拆分 HTML（标记）和 JavaScript（功能）被视为“关注点分离”。

然而，随着 JavaScript 应用程序复杂性的增加，这引起了巨大的头痛。因为更新一段 HTML 的代码可能存在于整个应用程序中的多个不同 JS 文件中，开发人员必须同时打开所有这些文件 - 他们必须同时“牢记”这些交互中的每一个时间。

相比之下，React 强制将您的应用程序拆分为组件，并且这些组件中的每一个都维护显示和更新 UI 所需的所有代码：

function GroceryList(props) { function addItem() { // Add Item } return ( <div> <h1>Grocery List</h1> <ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> </ul> </div> ) }; 复制

这将更新代码保持在显示代码旁边，并使复杂的应用程序更易于理解。

它还允许更多的代码重用，因为可以在应用程序中制作和共享通用组件。

数据如何存储在浏览器上

加载初始 UI 后，用户将能够与您的应用进行交互。对于像在输入框中输入这样的交互，该文本必须先存储在浏览器的某个位置，然后才能稍后使用（例如，提交到后端服务器）。

在普通的 JS 应用程序中，用户数据通常存储在 DOM（文档对象模型）中。

文档对象模型 (DOM) 由浏览器自己创建和维护，代表整个页面上的所有 HTML 节点。这包括存储在这些节点上的任何数据。

例如，一个普通的 JS 应用程序可能会定义一个输入文本框，如下所示：

<input type="text" placeholder="Enter an item" id="item-input" /> 复制

当用户在该文本框中输入内容时，他们输入的内容的值由浏览器存储。

这意味着实际输入 UI 的方式随着用户类型的变化而从开发人员那里抽象出来——这非常方便！但这也意味着当用户提交表单时，开发人员必须先在 DOM 中找到该输入框中的值，然后再提取该值，从而手动从该输入框中提取值：

const input = document.getElementById("item-input"); console.log(input.value); 复制

对于一个输入来说，这似乎没什么大不了的，但对于整个表单来说，它可能会变得乏味。另外，如果id输入的 更改，您必须确保在您访问该 ID 的每个位置都更改它。

相比之下，React 使用一种称为“受控组件”的技术在用户键入时在 JavaScript 对象中设置文本值。

首先，必须定义一些状态来保存输入值：

const [itemInput, setItemInput] = useState(""); 复制

然后每当输入发生变化时都必须设置该集合。这使得输入框代码更加复杂：

<input type="text" placeholder="Enter an item" value={itemInput} onChange={e => setItemInput(e.target.value)} 复制

但这使得在 JavaScript 中知道输入框的当前值变得更加容易，因为它只是从内存中读取值：

console.log(itemInput); 复制

因此，通过不依赖 DOM 来存储当前应用程序状态，React 应用程序在实际使用用户数据时具有优势。随着应用程序的发展，这种优势会随着时间的推移而叠加。

将应用程序的整个当前状态存储在 JS 变量（而不是 DOM）中是 React 应用程序相对于普通 JavaScript 应用程序的主要优势之一，尤其是随着应用程序复杂性的增长。

用户界面如何更新

普通 JS 和 React 应用程序之间的第三个主要区别是每个应用程序如何响应用户交互——例如按下按钮以实际将新项目添加到列表中——然后更新 UI 以反映新的变化。

在一个普通的 JS 应用程序中，我们可以在输入框旁边添加一个按钮id：

<input type="text" placeholder="Enter an item" id="item-input" /> <button id="add-button">Add</button> 复制

然后响应该按钮按下，我们可以首先在 DOM 中找到该按钮（以与我们input之前找到相同的方式）：

const addButton = document.getElementById("add-button"); 复制

然后click在该按钮上设置一个监听器：

addButton.addEventListener("click", function() { // Append item }) 复制

然后在那个点击监听器里面，我们可以先用和之前一样的方法获取输入框的值。然后要将新项目附加到购物清单，我们必须在 DOM 中找到该列表，创建要附加的新项目，然后最后将其附加到列表的末尾：

（有一些库可以让这变得更容易一些 - 但这是你可以用纯 JavaScript 代码做到的方式）

addButton.addEventListener("click", function() { const input = document.getElementById("item-input"); console.log(input.value); const list = document.getElementById("grocery-list"); const listNode = document.createElement("li"); const textNode = document.createTextNode(input.value); listNode.appendChild(textNode); list.appendChild(listNode); }); 复制

相反，React 应用程序将设置为将列表的整个状态保存在 JS 变量中：

const [items, setItems] = useState(["Milk", "Bread", "Eggs"]); 复制

然后通过在每个项目上映射（循环）并为每个项目返回一个列表元素，将其显示在 JSX 中：

<ul> {items.map(item => ( <li key={item}>{item}</li> ))} </ul> 复制

然后，可以在函数中定义实际的按钮按下。这意味着不需要单击侦听器，但onClick可以将属性添加到按钮本身：

<button onClick={addItem}>Add React</button> 复制

该函数所要做的就是使用setItemsupdater 函数将新项目（存储在 JS 内存中）附加到现有的项目数组中：

function addItem() { console.log(itemInput); setItems([...items, itemInput]); } 复制

React 将自动注册列表的更改，并自动更新 UI。

更新函数是 React 的真正魔力。它从普通的 JS 中获取一个函数，如下所示：

addButton.addEventListener("click", function() { const input = document.getElementById("item-input"); const list = document.getElementById("grocery-list"); const listNode = document.createElement("li"); const textNode = document.createTextNode(input.value); listNode.appendChild(textNode); list.appendChild(listNode); }); 复制

...并将其一直压缩为单个指令：

function addItem() { setItems([...items, itemInput]); } 复制

React 应用程序的自动更新特性意味着您不必进入 DOM 来查找附加项目的位置——它会自动为您发生。

React 有何不同

因此，我们已经了解了 React 与普通 JS 不同的三个主要方面。特别是：

1. 普通 JS 应用程序通常以在服务器上创建的初始 UI（如 HTML）开始，而 React 应用程序以空白 HTML 页面开始，并在 JavaScript 中动态创建初始状态。
2. React 要求您将 UI 分解为组件，但普通的 JS 应用程序可以以您认为合适的任何方式构建。
3. 普通 JS 应用程序的数据存储在 DOM 本身中，必须从 DOM 中找到才能使用。React 应用程序将数据存储在常规 JavaScript 变量中
4. 普通 JS 中的 UI 更新必须通过找到要更新的 DOM 节点并手动添加或删除元素来进行。React根据组件内的设置和更改自动state更新 UI 。

React 值得吗？

创建 React 的原因是因为它很容易迷失在使用纯 JavaScript 进行的 DOM 搜索和更新的迷宫中。

我们看到了使用普通 JS 将一个项目简单地附加到列表中会变得多么复杂，而且这只是在真正复杂的应用程序中复合。

此外，React 强制您创建组件的方式改变了您进行软件开发的方式。它可以帮助您以更易于维护的方式创建 Web 应用程序。

所以对于复杂的应用程序，像 React 这样的库绝对值得一开始额外的学习曲线。这意味着您可以编写更易于维护且错误更少的应用程序。

一旦你花时间学习它，编写 React 会更快、更有趣！

这篇关于纯 JavaScript与React 之类的库来设计和开发 Web 应用程序之间的区别的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！