doc/前端/react/1.react简介.md

1.是什么

用于构建用户界面的jsp库

2.为什么学习

1. 原生jsp操作DOM繁琐，效率低
2. jsp直接操作DOM，浏览器会进行大量重绘重排
3. jsp没有组件化方案

3.react的特点

1. 组件化模式
2. 移动端开发
3. 虚拟DOM+优秀Diffing算法

4.虚拟DOM与真实DOM

1. React提供了一些API来创建一种 “特别” 的一般js对象
2. 虚拟DOM对象最终都会被React转换为真实的DOM
3. 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

5.JSX

1. 全称: JavaScript XML
2. react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
3. 作用: 用来简化创建虚拟DOM 1) 写法：var ele =

   Hello JSX!

   2) 注意1：它不是字符串, 也不是HTML/XML标签 3) 注意2：它最终产生的就是一个JS对象
4. 标签名任意: HTML标签或其它标签
5. 标签属性任意: HTML标签属性或其它
6. 基本语法规则 1) 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析 2) 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
7. babel.js的作用 1) 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行 2) 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

6. 渲染虚拟DOM(元素)

1. 语法: ReactDOM.render(virtualDOM, containerDOM)
2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3. 参数说明 1) 参数一: 纯js或jsx创建的虚拟dom对象 2) 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

7.模块与组件

1.模块

1. 理解：向外提供特定功能的js程序, 一般就是一个js文件
2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
3. 作用：复用js, 简化js的编写, 提高js运行效率

2.组件

1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
2. 为什么要用组件： 一个界面的功能更复杂
3. 作用：复用编码, 简化项目编码, 提高运行效率