什么是ReactJS，它可以用来做什么？
时间：2023-03-13 23:58:05
科技观察
如果你想为你的网络应用程序创建快速、动态的用户界面，那么你需要学习如何使用ReactJS。React是一个客户端JavaScript库，这意味着它在浏览器中的客户端/用户机器上运行，而不是在服务器上运行。它由科技巨头Facebook于2011年创建。React库用于构建动态用户界面，它通过将用户界面的各个方面分离为所谓的“组件”来实现。在本教程文章中，您将了解有关React及其组件的所有知识。什么是ReactJS？React（也称为ReactJS）是一个开源JavaScript库，经常被错误地称为框架。这是因为React是AngularJS和VueJS等顶级JavaScript框架的直接竞争对手。React是一个库，因为它在其他特定于框架的功能中没有路由机制。但是，可以安装一些工具（例如react-router）并与此库一起使用以实现框架功能。与jQuery等语言中的其他库相比，React与Angular/Vue等框架的关系更为密切。使用ReactJS有什么好处？许多开发人员出于各种不同的原因使用React。有些人使用它是因为它的速度和性能，而另一些人则仅仅因为它的流行而使用它。但是，所有开发人员都可以欣赏到使用该框架的三个主要好处。它允许您使用具有状态和数据的所谓“可重用组件”来构建您的界面。它使用允许用户编写动态HTML的JavaScript语法扩展(JSX)。它使用虚拟文档对象模型(VDOM)，允许开发人员更新网页的特定部分而无需重新加载页面。什么是ReactJS组件？React将用户界面的每个部分都视为一个组件。组件具有状态、方法和功能。它们允许开发人员将用户界面划分为特定的部分，这些部分可以轻松组合以创建复杂的用户界面。因此，如果您正在创建客户经理，则UI的一个组件可以专门用于添加新客户，而同一UI的另一个组件可以专门用于显示客户列表。在最简单的形式中，组件是JavaScript类或函数。它们接受称为“props”的输入值，并以React元素的形式返回用户界面的特定方面。对于某些开发人员来说，将组件定义为函数比定义为类更简单；然而，使用任何一种方法都可以在React中实现相同的输出。使用函数示例创建一个组件email.com
Balance:$0.00 );}exportdefaultCustomer;使用类示例创建组件importReactfrom'react';classCustomerextendsReact.Component{render(){return(
PaulWilson
- Phone:222-222-2222
- 电子邮箱：Wilsonp@email.com
- 余额：0.00
);}}导出默认客户；从上面的例子可以看出，当你创建一个带有类的组件时，会发生更多的事情。首先要注意的是，在创建类组件时必须使用render()函数。如您所知，您不能直接从课堂返回；因此，render()函数对此有所帮助。开发人员可能选择使用类而不是函数的主要原因是类具有状态，但由于引入了钩子，React函数现在也可以具有状态。什么是JavaScript语法扩展？JavaScript语法扩展(JSX)是组件返回的React元素。它描述了特定部分/组件在用户界面中的外观。它看起来像HTML，但实际上是JavaScript。JSX示例
PaulWilson
- 电话：222-222-2222
- 电子邮件：Wilsonp@email.com
- 余额：$0.00
上面的JSX示例是从客户端组件中提取的。代码看起来像HTML，但它是JSX。虽然从上面的示例中不能立即看出两者之间的区别，但还是有一些明显的区别。例如，在HTML中，您使用class属性对相似元素进行分组，但在JSX中，您使用className属性。什么是虚拟DOM？虚拟文档对象模块(VDOM)是真实DOM的副本。通常，当对真实DOM进行更新时，需要刷新更改后的UI以显示更改。但是，使用虚拟DOM，用户界面的更改是即时的。虚拟DOM的状态然后用于在称为“协调”的过程中更新真实DOM。探索React项目文件当创建一个新的React项目时，会自动生成几个不同的文件和文件夹。其中一个文件夹被标记为公开。public文件夹包含React样板文件中唯一的HTML文件，名为index.html。index.html文件有一个带有根id的
标签，这很重要，因为这是渲染主要React组件的地方（这是将React组件转换为浏览器中可显示的DOM节点的过程的名称).但是，渲染过程发生在另一个文件index.js中，其中渲染了React应用程序根文件（即App.js文件），然后传递给index.html文件。从index.html文件中，您可以更改Web应用程序的标题；然而，对React应用程序的所有其他调整，包括创建新组件，都是在另一个文件夹中进行的，即src文件夹。src文件夹包含index.js和App.js文件。App.js文件是根React组件，负责在第一个React应用程序启动时最初显示在Web浏览器中的内容。App.js文件包含一个名为App的函数，该函数返回JSX。在此处了解有关ReactBoilerplate以及如何安装React应用程序的更多信息。创建组件创建组件时，您需要了解两件事。首先，新创建的组件永远不会显示在您的UI中，除非它被导入并在App组件（App.js文件）中使用。第二件事是每个组件文件名都以大写字母开头是常见的做法。如上所述，可以使用函数或类来创建组件。然而，React正在远离类组件，现在主要使用函数。创建一个新的组件示例functionCustomer(){return(
PaulWilson
- Phone:222-222-2222
- Email:Wilsonp@email.com
- 余额：$0.00
);}exportdefaultCustomer;上面的代码新建了一个customer组件并导出了函数，这样customer组件就可以被AppComponentimport使用了。使用App组件示例importCustomerfrom'./components/Customer';functionApp(){return(
CustomerManager
);}exportdefaultApp;如您在上面的示例中所见，应用程序组件导入客户组件并按照它应该出现在用户界面中的顺序排列它（在本例中是在客户经理标签之后）。App组件然后由index.js文件导出和导入，以在DOM中渲染和显示。关于App组件，需要记住的一件重要事情是它只能有一个父元素（上例中的
标签）。因此，此父元素之外的任何元素都不会显示在UI中。RenderApp组件示例importReactfrom'react';importReactDOMfrom'react-dom';importAppfrom'./App';ReactDOM.render(
,document.getElementById('root'));上面的代码显示了index.js文件的内容，它使用上面代码中的document.getElementById('root')方法的渲染函数将App组件渲染到DOM。这是通过使用index.html文件使用的根ID在浏览器中显示以下输出来实现的：用户界面。使用React，您的UI不仅会表现良好并且看起来完全符合您的要求，而且它们也易于维护（多亏了组件）。现在您可以使用React库来创建专业的用户界面。但是没有必要停留在React上。还有一系列其他工具可用于补充您的前端开发过程。
