什么是React以及它实际上是如何工作的？

ReactJS是用于移动和Web应用程序开发的最流行的JavaScript库之一。React由Facebook创建，包含一组可重用的JavaScript代码片段，用于构建称为组件的用户界面 (UI)。

重要的是要注意ReactJS不是JavaScript框架。那是因为它只负责渲染应用程序视图层的组件。React是Angular和Vue等框架的替代品，它们都允许创建复杂的函数。

本文将探索React的功能，解释它的工作原理，并介绍它对前端开发人员的好处。我们还将介绍ReactJS和React Native在Web和移动应用程序开发行业中的角色差异。

• React特性
• 为什么要使用React？
• React是如何工作的？
• React Native怎么样？

React特性

React有一些核心特性使其从其他JavaScript库中脱颖而出。以下部分将向您介绍这些功能，并解释它们如何为移动和 Web 应用程序开发做出贡献。

JSX

JSX是用于React元素创建的JavaScript语法扩展。开发人员使用它在JavaScript对象中嵌入HTML代码。由于JSX接受有效的JavaScript表达式和函数嵌入，它可以简化复杂的代码结构。

让我们看一个代码块，它展示了如何在JSX中嵌入表达式：

const name = 'John Smith;
const element = h1>Hello, {name}/h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

在第二行中，我们通过将它放在花括号内来调用React元素内的name变量。

同时，ReactDOM.render()函数在文档对象模型 (DOM) 树上渲染React元素，描述UI。

JSX还有助于对抗跨站点脚本(XSS) 攻击。默认情况下，React DOM在渲染之前将JSX中嵌入的值转换为字符串。因此，除非在应用程序中明确写入，否则第三方无法通过用户输入注入额外代码。

在本文后面，我们将更详细地讨论JSX在React组件创建中的作用。

虚拟DOM

文档对象模型 (DOM) 以数据树结构呈现网页。ReactJS将虚拟DOM树存储在内存中。通过这样做，React可以将更新应用到数据树的特定部分，这比重新渲染整个DOM树要快。

每当数据发生变化时，ReactJS都会生成一个新的Virtual DOM树，并将其与之前的树进行比较，以找到在真实DOM中实现变化的最快方法。这个过程被称为diffing。

通过确保UI操作只影响真实DOM树的特定部分，渲染更新版本需要更少的时间和更少的资源。这种做法极大地有利于具有强烈用户交互的大型项目。

组件和道具

ReactJS将UI划分为独立的可重用代码片段，称为组件。React组件的工作方式类似于JavaScript函数，因为它们接受称为属性或道具的任意输入。

返回的React元素决定了UI在客户端的外观。这是一个返回React元素的函数组件的示例：

function Welcome(props) {
  return h1>Hello, {props.name}/h1>;
}

可以根据需要拥有尽可能多的组件，而不会弄乱您的代码。

状态管理

状态是表示组件一部分的JavaScript对象。每当用户与应用程序交互时，它都会发生变化，呈现新的UI以反映修改。

状态管理是指管理React应用程序状态的实践。它包括将数据存储在第三方状态管理库中，并在每次数据更改时触发重新渲染过程。

状态管理库有助于React组件之间的通信和数据共享。目前有几个第三方状态管理库可用，但Redux和Recoil是最受欢迎的两个。

Redux

Redux状态管理库有一个集中式存储，它使应用程序的状态树保持可预测性。该库还通过防止两个组件同时更新应用程序的状态来减少数据不一致。

Redux的架构支持错误日志以便于调试，并且具有严格的代码组织方式，简化了维护。此外，它还具有大量插件，并与所有UI层兼容。

也就是说，Redux相当复杂，因此对于具有单个数据源的小型应用程序来说不是最理想的。

Recoil

Recoil是Facebook发布的JavaScript状态管理库。它使用称为选择器的纯函数来计算来自称为原子的可更新状态单元的数据。多个组件可以订阅同一个原子，从而共享一个状态。

原子和选择器的使用可以防止冗余状态，简化代码，并消除对React和任何子组件的过度重新渲染。Recoil比Redux更适合初学者，因为它的核心概念更容易掌握。

程序化导航

程序化导航是指代码行创建重定向用户的操作的实例。例如，登录和注册操作以编程方式将用户导航到新页面。

React Router是React的路由标准库，提供了多种在组件之间进行安全编程导航的方式，而无需用户单击链接。

使用重定向组件是编程导航的主要方法，history.push()是另一种方法。

简而言之，React Router包将UI与URL同步，让您无需依赖链接即可控制React应用程序的外观。

为什么要使用React？

全球数百家大公司，例如Netflix、Airbnb和American Express，都使用React来构建他们的Web应用程序。在接下来的部分中，我们将讨论为什么如此多的开发人员选择ReactJS而不是其竞争对手的原因。

1. 易于使用

具有JavaScript知识的开发人员可以立即学习如何使用React，因为它依赖于纯JavaScript和基于组件的方法。经过几天的学习，就可以开始使用React开发基于Web的应用程序。

即使您不熟悉JavaScript，也有大量网站免费提供编码课程。一旦您了解了JavaScript的基础知识，请阅读ReactJS以简化前端开发过程。

2.支持可重用的Java组件

React允许您重用已开发到其他应用程序中的组件。由于ReactJS是开源的，因此可以预先构建组件，从而减少复杂Web应用程序的开发时间。

更重要的是，React允许在其他组件之间嵌套组件以创建复杂的功能，而不会使代码臃肿。由于每个组件都有自己的控件，因此很容易维护它们。

3. 更容易的组件编写

由于JSX集成，编写React组件更容易——用户可以创建结合HTML排版和标签的JavaScript对象。JSX还简化了多函数渲染，在不降低应用程序功能的情况下保持代码精简。

尽管JSX不是最流行的语法扩展，但它在特殊组件和动态应用程序开发中被证明是有效的。

React的官方命令行界面工具（CLI）称为Create React App进一步简化了单页应用程序的开发。它具有带有预配置工具的现代构建设置过程，非常适合学习ReactJS。

4. 高性能

如前所述，Virtual DOM允许ReactJS以最有效的方式更新DOM树。通过将Virtual DOM存储在内存中，React消除了可能会损害性能的过度重新渲染。

此外，React在元素之间的单向数据绑定简化了调试过程。对子组件所做的任何修改都不会影响父结构，从而降低了出错的风险。

5. SEO友好

ReactJS可以通过提高性能来改进Web应用程序的搜索引擎优化(SEO)。虚拟DOM实现是影响更快页面速度的因素之一。

此外，React通过执行服务器端渲染帮助搜索引擎导航 Web应用程序。这解决了使用JavaScript的网站遇到的最重要的问题之一，因为搜索引擎通常会发现它们具有挑战性且抓取时间很长。

React是如何工作的？

使用React的最大优势之一是您可以将JavaScript注入HTML代码。

用户可以通过在React中声明Element函数来创建DOM节点的表示。下面的代码包含HTML和JavaScript的组合：

React.createElement("div", { className: "red" }, "Children Text");
React.createElement(MyCounter, { count: 3 + 5 });

您可能已经注意到，上述HTML代码的语法与XML相似。也就是说，React没有使用传统的DOM类，而是使用了className。

JSX标签有名称、子标签和属性。数值和表达式必须写在大括号内。JSX属性中的引号代表字符串，类似于JavaScript。

在大多数情况下，React是使用JSX而不是标准JavaScript编写的，以简化组件并保持代码简洁。

下面是一个使用JSX编写的React代码示例：

MyCounter count={3 + 5} />;
var GameScores = {player1: 2,player2: 5};
DashboardUnit data-index="2">
h1>Scores/h1>Scoreboard className="results" scores={GameScores} />
/DashboardUnit>;

以下是上述HTML标记的细分：

• MyCounter > 表示一个名为count的变量，它的值是一个数值表达式。
• GameScores是一个具有两个prop-value对的对象字面量。
• DashboardUnit > 是在页面上呈现的XML块。
• score={GameScores}是分数属性。它从前面定义的GameScores对象字面量中获取其值。

React应用程序通常有一个根DOM节点。将元素渲染到DOM将改变页面的用户界面。

例如，以下代码通过将元素渲染到名为root的DOM节点中来在页面上显示“Hello World” 。

<div id="root">/div>
const element = h1>Hello, world/h1>;
ReactDOM.render(element, document.getElementById('root'));

每当React组件返回一个元素时，虚拟DOM都会更新真实DOM以匹配。

React Native怎么样？

React Native是一个基于React库的开源JavaScript框架。开发人员使用它为iOS和Android创建跨平台的React应用程序。

React Native使用原生应用程序编程接口 (API) 在Objective-C (iOS)或Java (Android) 中呈现移动UI组件。因此，开发人员可以创建特定于平台的组件并跨多个平台共享源代码。

尽管有相似之处，但React Native与ReactJS不同。这是React Native和ReactJS的快速比较：

 

小结

ReactJS是一个强大的JavaScript库，用于动态Web应用程序开发。它使JavaScript编码更加简单，并提高了应用程序的性能和SEO，以及其他好处。

ReactJS通过参与单向数据绑定来帮助简化调试过程并降低错误风险。

以下是您可能想要使用React的原因的回顾：

• 它易于使用和学习，在线提供大量编码课程。
• 它支持可重用的组件，减少了开发时间。
• JSX使编码和渲染元素变得更加容易。
• Virtual DOM消除了过多的重新渲染，确保了应用程序的高性能。
• React可帮助搜索引擎抓取您的 Web 应用程序，从而提高其SEO。