React 简介
# React是什么
React用于构建用户界面的JS库。是一个将数据渲染为HTML视图的开源JS库。
- 发送请求获取数据
- 处理数据（过滤、整理格式）
- 操作DOM呈现页面
# 为什么学？
- 原生JS操作DOM繁琐，效率低
- 使用JS直接操作DOM,浏览器会进行大量的重绘重排
- 原生JS没有组件化编码方案，代码复用低
# React的特点
声明式编码
组件化编码
React Native 编写原生应用
高效（优秀的Diffing算法）
# React的基本使用
# 相关js库
react.js：React核心库。react-dom.js：提供操作DOM的react扩展库。babel.min.js：解析JSX语法代码转为JS代码的库。
# 虚拟DOM与真实DOM
React提供了一些API来创建一种 “特别” 的一般js对象
const VDOM = React.createElement('xx',{id:'xx'},'xx') // 上面创建的就是一个简单的虚拟DOM对象1
2虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。
# React JSX
# JSX
JavaScript XML
react定义的 一种类似于XML的JS扩展语法: JS + XML本质是
React.createElement(component, props, ...children)方法的语法糖作用: 用来简化创建虚拟DOM
- 写法：
var ele = <h1>Hello JSX!</h1> - 注意
- 它不是字符串, 也不是HTML/XML标签
- 它最终产生的就是一个JS对象
- 标签名任意: HTML标签或其它标签
- 标签属性任意: HTML标签属性或其它
- 写法：
jsx语法规则：
定义虚拟DOM时，不要写引号。
标签中要写入JS表达式时要用
{}。样式的类名要用className。
内联样式，要用
style={{key:value}}的形式去写。
只有一个根标签
标签必须闭合
标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
babel.js的作用
- 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
- 只要用了JSX，都要加上
type="text/babel", 声明需要babel来处理
# 渲染虚拟DOM元素
语法:
ReactDOM.render(virtualDOM, containerDOM)作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明
参数一: 纯js或jsx创建的虚拟dom对象
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
<script type="text/babel" >
const myId = 'aTgUiGu'
const myData = 'HeLlo,rEaCt'
//1.创建虚拟DOM
const VDOM = (
<div>
<h2 className="title" id={myId.toLowerCase()}>
<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
</h2>
<h2 className="title" id={myId.toUpperCase()}>
<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
</h2>
<input type="text"/>
</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# JSX练习
<!-- 准备好一个“容器” -->
<div id="test"></div>
//模拟一些数据
const data = ['Angular','React','Vue']
//1.创建虚拟DOM
const VDOM = (
<div>
<h1>前端js框架列表</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 模块与组件、模块化与组件化的理解
# 模块
1.理解：向外提供特定功能的js程序, 一般就是一个js文件
2.为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
3.作用：复用js, 简化js的编写, 提高js运行效率
# 组件
1.理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
2.为什么要用组件： 一个界面的功能更复杂
3.作用：复用编码, 简化项目编码, 提高运行效率
# 模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
# 组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用