文章目录
1、React简介
2、基本使用
3、React JSX
4、模块与组件、模块化与组件化的理解
一、React简介
1、定义
官网定义:
一个声明式,高效且灵活的用于构建用户操作界面的JavaScript库
实际就是:操作DOM呈现页面,一个将数据渲染为HTML视图的开源JavaScript库
Facebook开发(2013年5月宣布开源)
2、特点
先谈论下原生JavaScript的痛点:
- 原生JavaScript操作DOM繁琐,效率低(DOM-API操作UI)
- 使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排
- 原生JavaScript没有组件化编码的方案,代码复用率低
react的特点:
- 采用组件化模式,声明式编码,提高开发效率和组件复用率
- 在React Native可以使用React语法进行移动端开发
- 使用虚拟DOM+优秀的diffing算法,尽量减少与真实DOM的交互
高效原因:
- 使用虚拟DOM,不直接操作页面真实dom
- DOM Dffing算法,最小化页面重绘
二、基本使用
1、相关js库
- react.js:核心库
- react-dom.js:提供操作dom的react拓展库
- babel.min.js:解析JSX语法代码转换为JS代码的库
2、创建虚拟DOM
虚拟DOM对象都会被React转换为真实的DOM。编码只需操作react的虚拟DOM相关数据,react会转换为真实DOM变化而更新界面。
// 使用jsx创建
const vDOM = <h1 id="title">Hello</h1>
RactDOM.render(vDOM, document.getElementById('root'));
// 使用js创建
const vDOM1 = React.createElement('h1', {id: 'title'}, 'Hello');
RactDOM.render(vDOM1, document.getElementById('root'));
3、渲染虚拟DOM
- 将虚拟DOM元素渲染到页面的真实容器DOM展示。
- 语法:RactDOM.render(virtualDOM, containerDOM);
- 参数1:纯js/jsx创建的虚拟dom对象
- 参数2:用来包含虚拟dom元素的真实dom元素对象
三、React JSX
1、全称: javaScript XML
2、react定义的一种类似于XML的JS扩展语法:JS + XML 本质是React.createElement(component, props, …childeren)方法的语法糖
3、作用:用来简化创建虚拟dom
const ele = <h1>Hello</h1>
// 它不是字符串,也不是HTML/XML标签
// 它最终产生的是一个JS对象
4、标签名和标签属性任意:HTML标签/属性 或 其他
5、语法规则:遇到以<开头的代码,以标签的语法解析;遇到{开头的代码,以JS的语法解析
6、babel的作用
- 浏览器不能直接解析JSX代码,需要babel转译为纯JS的代码才能运行
- 只要用了JSX,都要加上type=“text/babel”,声明需要babel来处理
四、模块与组件、模块化与组件化的理解
1、模块
- 理解:向外提供特定功能的js程序,一般就是一个js文件
- 原因:随着业务逻辑的增加,代码越来越多且复杂
- 作用:复用js,简化js的编写。提高js的运行效率
2、组件
- 理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
- 原因:一个界面的功能更复杂
- 作用:复用编码,简化项目编码,提高运行效率
3、模块化
当应用的js都以模块来编写的,这个应用就是一个模块化的应用
4、组件化
当应用是以多组件的方式实现,这个应用就是一个组件化的应用