react框架

1 React简介

1.1 React概述

是JavaScript的库，可以简化可视化界面的开发

是基于JSX语法（JavaScript Xml），JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写

核心是组件，将数据和逻辑进行封装。提高了代码复用率，降低了代码维护的难度。

1.2 React开发环境搭建

1、基本应用（传统应用）：在页面文件中导入React的核心库（.js文件），可以引入官网上的地址，也可以自己下载之后本地引入。

（1）核心库：react.development.js

<!-- 官网地址 -->

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>

<!-- 本地引入 -->

<script src="../react的js库/react.development.js"></script>

(2)与DOM相关的库：react-dom.development.js

<!-- 官网地址 -->

<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

<!-- 本地引入 -->

<script src="../react的js库/react-dom.development.js"></script>

（3）babel编译器库：将ES6转换成ES5

<!-- 官网地址 -->

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- 本地引入 -->

<script src="../react的js库/babel.min.js"></script>

2、脚手架开发：搭建React项目，根据不同的需求开发组件

（1）create-react-app：属于FacdBook，快速的、不做任何配置的构建React开发环境

npm install -g create-react-app

1

（2）create-react-app构建的react开发环境是基于webpack+ES6

1.3 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。

1.4 React的渲染机制

React框架之所以大受欢迎， 其特有的渲染机制是非常重要的因素之一。既然提到React 渲染机制， 那么就说一说Diff算法， 该算法是支撑React渲染机制的核心技术之一。

Diff算法的核心就是扫描DOM树，通过扫描找到DOM树前后的差异。若DOM树的状态或属性发生改变，React会构建新的DOM树，将新的DOM树和原来的DOM树进行比较，找到树中变化的部分进行修改。好处是避免重复的频繁的操作DOM，提高页面的访问性能。

1.5 React优势

声明式设计：React 采用声明范式，可以轻松描述应用。

高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

灵活：React可以与已知的库或框架很好地配合。

使用JSX语法：JSX是JavaScript语法的扩展，可以极大地提高JS运行效率。

组件复用：通过React构建组件使得代码易于复用，可在大型项目应用开发中发挥优势。

单向响应的数据流：React实现了单向响应的数据流，减少了重复代码，比传统数据绑定方式更简单。

1.6 框架对比：AVM框架

AVM（Application-View-Model）框架是千语创想推出的一个跨端高性能 JavaScript框架，更趋近于原生的编程体验，它提供简洁的模型来分离应用的用户界面、业务逻辑和数据模型，适合高度定制化的项目，一次编码，可以同时开发安卓、iOS和小程序等多端应用。

AVM是千语创想基于标准H5子集设计的DSL中间语言编程框架，其可具备如下能力：

Virtual DOM：通过虚拟DOM，渲染到不同终端，充分尊重系统特性，为不同终端执行差异处理，实现高效渲染；

组件化：高可重用性、可组合性、可维护性的架构设计，隐藏了复杂的DOM结构和行为，让开发者专注于应用的功能和外观；

数据绑定：轻松将数据源绑定到应用用户界面，降低逻辑复杂性和开发难度；

状态管理和路由：有效分离用户界面和数据处理，实现项目的工程化管理；

类Vue语法和兼容React JSX，兼具Vue的轻巧和React的灵活性。

千语创想 DSL最终可编译为标准JS，通过DeepEngine渲染到app端和Web端，或者编译为微信小程序代码，用于微信小程序平台发布。