react|青训营

69 阅读2分钟

1.React概述

  • 是JavaScript的库,可以简化可视化界面的开发。
  • 是基于JSX语法(JavaScript Xml),JSX是React的核心组成部分,它使用xml标记的方式去直接声明界面,和html、js混写。
  • 核心是组件,将数据和逻辑进行封装。提高了代码复用率,降低了代码维护的难度。

2.React虚拟DOM

React框架的核心优势之一, 就是支持创建虚拟DOM来提高页面性能。那么,什么是虚拟DOM呢?其实, 虚拟DOM这个概念很早就被提出来了, 是相对于实际DOM而言的。

设计人员在设计传统HTML网页的UI时, 都会在页面中定义若干的DOM元素, 这些DOM元素是所谓的实际DOM。通常, 页面中的实际DOM负责承载着外观表现和数据变化,任何外观形式的改变或数据信息的更新都要反馈到UI上, 都是需要通过操作实际DOM来实现的。

于是, 问题也就自然出现了。对于复杂的页面UI而言, 往往会定义大量的实际DOM。频繁地操作大量实际DOM, 往往会带来访问性能的严重下降, 用户体验也会随之变差, 这些都是设计人员所不希望看到的。因此, React框架专门针对这个现象引入了虚拟DOM机制,以避免频繁的DOM操作带来的性能下降问题。

React DOM类似于一种将相关的实际DOM组合在一起的集合, 是React的虚拟DOM对象,内置对象,将其理解为DOM组件应该更为贴切。因此,React框架将ReactDOM称为虚拟DOM。

3.React优势 声明式设计:React 采用声明范式,可以轻松描述应用。 高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。 灵活:React可以与已知的库或框架很好地配合。 使用JSX语法:JSX是JavaScript语法的扩展,可以极大地提高JS运行效率。 组件复用:通过React构建组件使得代码易于复用,可在大型项目应用开发中发挥优势。 单向响应的数据流:React实现了单向响应的数据流,减少了重复代码,比传统数据绑定方式更简单。