智慧屏的React.js(介绍和工作)
添加时间:2022-01-10 14:42:28
来源:
智慧屏的ReactJS 简介:让我们通过一个实际的例子来理解这一点。
假设您的一位朋友在 Facebook 上发布了一张照片。现在你去喜欢这张图片,然后你也开始查看评论。现在,当您浏览评论时,您会看到赞数增加了 100,因为您喜欢这张图片,即使没有重新加载页面。这种神奇的计数变化是因为 Reactjs。
React 是一个声明式、高效且灵活的 JavaScript 库,用于构建用户界面。它是MVC中的“V”。ReactJS 是一个开源的、基于组件的前端库,只负责应用的视图层。它由 Facebook 维护。
React 使用声明式范式,可以更轻松地推理您的应用程序,旨在既高效又灵活。它为应用程序中的每个状态设计简单的视图,当数据发生变化时,React 将有效地更新和呈现正确的组件。声明式视图使您的代码更具可预测性且更易于调试。
React 应用程序由多个组件组成,每个组件负责渲染一小段可重用的 HTML。组件可以嵌套在其他组件中,以允许使用简单的构建块构建复杂的应用程序。一个组件也可能维护一个内部状态——例如,一个 TabList 组件可能存储一个与当前打开的选项卡对应的变量。
注意: React 不是框架。它只是 Facebook 开发的一个库,用于解决我们之前面临的一些问题。
先决条件:下载最新版本的 Node 包。
示例: 使用以下命令创建一个新的 React 项目:
npx create-react-app myapp
文件名 App.js:现在使用以下代码更改App.js文件:
import React,{ Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h1>Hello, Learner.Welcome to GeeksforGeeks.</h1>
</div>
);
}
}
export default App;
输出:
它是如何工作的: 在构建客户端应用程序时,一个 Facebook 开发团队意识到 DOM 很慢(文档对象模型(DOM)是 HTML 和 XML 文档的应用程序编程接口(API)。它定义了逻辑结构文档以及访问和操作文档的方式。)。所以,为了让它更快,React 实现了一个虚拟 DOM,它基本上是 JavaScript 中的 DOM 树表示。所以当它需要读取或写入 DOM 时,它会使用它的虚拟表示。然后虚拟 DOM 会尝试寻找最有效的方式来更新浏览器的 DOM。
与浏览器 DOM 元素不同,React 元素是普通对象并且创建成本低。React DOM 负责更新 DOM 以匹配 React 元素。这样做的原因是 JavaScript 速度非常快,值得在其中保留 DOM 树以加快其操作速度。
尽管 React 被设想在浏览器中使用,但由于其设计,它也可以在带有 Node.js 的服务器中使用。
/ CONTACT US
地 址:四川省成都市航空路丰德国际广场
邮政编码:610000
电 话:18215660330
传 真:18215660330
手机:18215660330
邮 箱:179001057@qq.com
投诉邮 箱:179001057@qq.com