当前位置: 首页 > news >正文

React是什么?


theme: condensed-night-purple
highlight: atelier-cave-light

React是什么?

官方的解释是:A JavaScript library for building user interfaces用于构建用户界面的 JavaScript 库

那为什么要选择用React呢?

原生的HTML、CSS、JavaScrip的方式存在

  1. 大规模应用难以维护:原生的开发方式通常会使代码变得非常复杂,特别是在大规模应用中,这可能导致代码难以维护。
  2. 页面渲染效率低:在原生方式中,页面渲染通常需要进行大量的DOM操作,这会导致页面渲染效率低下,尤其是在处理大量数据或复杂交互时。
  3. 缺乏组件化:原生方式通常缺乏组件化的支持,这会使代码的可复用性和可维护性变得非常低。
  4. 开发效率低:在原生方式中,需要自己手动管理页面状态和事件处理,这会使开发效率变得非常低下。

React的优点

  1. 可以很好的跨浏览器兼容,同时兼容多端
  2. 虚拟 DOM:React 通过使用虚拟 DOM 技术,可以将对 DOM 的操作最小化,从而提高性能和响应速度。当数据变化时,React 会先将新的数据与旧的数据进行比较,然后只更新有变化的部分,而不是重新渲染整个页面。
  3. 组件化开发:React 的核心思想是将 UI 拆分为独立的组件,每个组件都有自己的状态和行为,并且可以嵌套使用。这种组件化开发方式可以使得代码更加模块化、可重用,也更易于维护和测试。
  4. 单向数据流:React 的数据流是单向的,即自上而下的单向数据流。这种数据流可以使得应用程序的数据变化更加可预测和稳定,也更容易排查和解决 bug。
  5. 生态系统和社区支持:React 已经成为了现代 Web 开发的主流技术之一,拥有庞大的社区和生态系统支持。React 生态系统中有许多优秀的库和工具可以帮助开发人员更加高效地开发和管理 Web 应用程序。

React开发依赖

开发React必须依赖三个库:

  • react:包含react所必须的核心代码
  • react-dom:react渲染在不同平台所需要的核心代码
  • babel:将jsx转换成React代码的工具

这三个库都是是各司其职的,每一个库实现的功能都是不同的。

但其实在React的0.14版本之前是没有react-dom这个概念的,所有功能都包含在react里。那为什么要进行拆分呢?

原因就是react-native。react包中包含了react和react-native所共同拥有的核心代码。但是react-dom针对web和native所完成的事情不同:

  • web端:react-dom会讲jsx最终渲染成真实的DOM,显示在浏览器中
  • native端:react-dom会讲jsx最终渲染成原生的控件(比如Android中的Button,iOS中的UIButton)。

引入React依赖

我们在编写React代码时,这三个依赖都是必不可少的。那么,如何添加这三个依赖呢?

  • 方式一:直接CDN引入
  • 方式二:下载后,添加本地依赖
  • 方式三:通过npm管理(通过脚手架创建项目后再使用)

CDN方式

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
http://www.lryc.cn/news/377076.html

相关文章:

  • 创新入门 | 病毒循环Viral Loop是什么?为何能实现指数增长
  • 鸿蒙HarmonyOS实战:渲染控制、路由案例
  • 【Linux】进程控制2——进程等待(waitwaitpid)
  • SpringBoot 统计接口调用耗时的多种方式
  • Linux系统安装Ruby语言
  • 网络安全练气篇——OWASP TOP 10
  • python实现进度条的方法和实现代码
  • 被拷打已老实!面试官问我 #{} 和 ${} 的区别是什么?
  • C# —— while循环语句
  • 力扣第205题“同构字符串”
  • 探索RESTful API开发,构建可扩展的Web服务
  • 苹果安卓网页的H5封装成App的应用和原生开发的应用有什么不一样?
  • IO流2.
  • 详解MySQL中的PERCENT_RANK函数
  • 宏任务与微任务
  • 昇思大模型学习·第一天
  • python调用chatgpt
  • YOLOV8 目标检测:训练自定义数据集
  • 动态更新自建的Redis连接池连接数量
  • 浅谈设计师的设计地位
  • C/C++ string模拟实现
  • 微信小程序学习(八):behaviors代码复用
  • 【The design pattern of Attribute-Based Dynamic Routing Pattern (ADRP)】
  • 2713. 矩阵中严格递增的单元格数
  • git创建子模块
  • 把Deepin塞进U盘,即插即用!Deepin To Go来袭
  • ​​给【AI硬件】创业者的论文、开源项目和产品整理
  • 模拟面试题卷二
  • 22种常用设计模式示例代码
  • Java面试题:对比ArrayList和LinkedList的内部实现,以及它们在不同场景下的适用性