前端|1、React介绍 javascript|ui|react.js

1、介绍
React中文官网：https://react.docschina.org。
【前端|1、React介绍】React是用于构建用户界面的JS库，起源于Facebook的内部项目，该公司对市场上所有JS MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站，于2013年5月开源。
React主要用于构建UI，只关注视图层。
2、为什么使用React
优点
声明式设计：React采用声明范式（语法十分接近HTML），可以轻松描述应用。
组件化：为程序编写独立的模块化UI组件，然后组合构成复杂的UI，这样当某个组件出现问题时，可以方便地进行隔离排查。
速度快：在UI渲染过程中，React不总是直接操作页面真实DOM，而是通过在虚拟DOM中的微操作，来实现对实际DOM的局部更新（优秀的Diffing算法）。
灵活：React可以与已知的库或框架很好地配合。
缺点
React并不是一个完整的框架，本身只是View，如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。
3、安装引入React

react.js：React核心库。
react-dom.js：React操作DOM的拓展库。
babel.js：提供JSX=>JS、ES6=>ES5的工具包库。

方式一：通过标签引入（版本17）
源码版（开发环境）

crossorigin src="http://img.readke.com/220911/1P0151J9-0.jpg"> crossorigin src="http://img.readke.com/220911/1P0154J1-1.jpg"> src="http://img.readke.com/220911/1P01560D-2.jpg">

压缩版（生产环境）

crossorigin src="http://img.readke.com/220911/1P0152O7-3.jpg"> crossorigin src="http://img.readke.com/220911/1P0154400-4.jpg"> src="https://unpkg.com/babel-standalone@6/babel.min.js">

方式二：通过npm安装引入（版本17）

npm install react@17 react-dom@17 babel@6

4、入门使用案例
这里演示React创建虚拟DOM，并将虚拟DOM渲染到页面真实DOM。
方式一：使用JS方式（一般不用）

使用js创建虚拟DOMcrossorigin src="http://img.readke.com/220911/1P0151J9-0.jpg"> crossorigin src="http://img.readke.com/220911/1P0154J1-1.jpg"> src="http://img.readke.com/220911/1P01560D-2.jpg">type="text/javascript" > /** * 1.创建虚拟DOM *参数1：标签名 *参数2：标签属性（这里为h1标签添加title属性） *参数3：标签内容 */ const VDOM = React.createElement('h1',{"title":"articleTitle"},"h1标签内容") /** * 2.渲染虚拟DOM到页面 *参数1：需要被渲染的虚拟DOM *参数2：虚拟DOM被渲染到的目标标签 */ ReactDOM.render(VDOM,document.getElementById('container'))

方式二：使用JSX方式（最常用，但其实最终babel还是会将JSX转换成JS的方式创建虚拟DOM）

使用jsx创建虚拟DOMcrossorigin src="http://img.readke.com/220911/1P0151J9-0.jpg"> crossorigin src="http://img.readke.com/220911/1P0154J1-1.jpg"> src="http://img.readke.com/220911/1P01560D-2.jpg">type="text/babel" > //1.创建虚拟DOM const VDOM = (/* 此处一定不要写引号，因为不是字符串，此处是JSX语法 */h1标签内容) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('container'))

5、虚拟DOM
什么是虚拟DOM
虚拟DOM本质上是一个JS对象（object类型），对象内部封装了一些属性。在指定的时刻，React将虚拟DOM渲染到页面的实际DOM，本质还是通过js操作页面DOM实现的。
虚拟DOM好处
虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
通过在虚拟DOM中的微操作，实现对实际DOM的局部更新，避免每次直接操作页面真实DOM，减少真实DOM操作次数，提高效率。