文章目录
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、组件化
当应用是以多组件的方式实现，这个应用就是一个组件化的应用