前端|1、React介绍

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创建虚拟DOM - 锐客网
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">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创建虚拟DOM - 锐客网
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">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操作次数,提高效率。
前端|1、React介绍
文章图片

    推荐阅读