建议预备知识：HTML+CSS+JS基础、webpack、ajax、Promise、axios知识
React系统学习笔记
PartⅠ：React入门
1 React简介
- 用于动态构建用户界面的JavaScript(只关注视图)
- 由Facebook开源
1.1 React的特点
- 声明式编程
- 组件化编程
- React Native编写原生应用
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物
- 高效 (优秀的Diffing算法)
1.2 React高效的原因
- 使用虚拟(virtual)DOM，不总是直接操作页面真实DON
- DOM Diffing算法，最小化页面重绘
注意：React并不会提高渲染速度，反而可能会增加渲染时间，真正高效的原因是它能有效
减少渲染次数
2 react基本使用
2.1 效果
2.2 相关库
- react.js：React核心库
- react-dom.js：提供操作DOM的react扩展库
- babel.min.js：解析JSX语法代码转为JS代码的库
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> /* 第一个注意点：此处一定要写babel */
//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
//2.渲染虚拟DOM到页面，参数1是虚拟DOM，参数2是容器
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
几个注意点：
- 记得准备好容器
- 核心库必须在扩展库之前引入
type="text/babel"记得写babel浏览器才知道你写jsx- 注意创建虚拟dom的时候不写单引号
- 创建的多个虚拟节点同时往一个容器里面放，会发生覆盖，也就是说以最后放的一个为主
3 创建虚拟DOM的两种方式
3.1 js创建虚拟DOM(不推荐)
用js不需要引入babel文件了，其他的两个照常
//1.创建虚拟DOM，创建嵌套格式的doms--繁琐
const VDOM=React.createElement('h1',{
id:'title'},React.createElement('span',{
},'hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,docoment.getElementById('test'))
3.2 jsx创建虚拟DOM
//1.创建虚拟DOM
const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */
<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2.渲染虚拟DOM到页面，参数1是虚拟DOM，参数2是容器
ReactDOM.render(VDOM,document.getElementById('test'))
当出现多重嵌套时，js创建方法写起来相当麻烦：
const VDOM=React.createElement('h1',{id:'title'},React.createElement('span',{},'hello,React'))
JSX的意义：创建虚拟DOm更加方便
JSX创建虚拟DOM是JS的语法糖，当我们写完JSX代码后，最终我们的代码也会被编译成JS的书写方式
3.3 关于虚拟DOM
- 本质时Object类型的对象(一般对象)
- 虚拟DOM比较’轻’，真实DOM比较’重’，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性(只有React需要的属性)
- 虚拟DOM最终会被React转化为真实DOM，呈现在页面上
4 jsx语法规则
JSX是一种JavaScript的语法扩展、是一种嵌入式的类似XML的语法,常应用于React架构中，但也不仅限于此
应该说JSX因React框架而流行，但也存在其他的实现。只要你够厉害，甚至能在单片机上实现(当然你要自己写出它的实现方式)
4.1 规则
- 定义虚拟DOM时，不要写引号
- 标签中混入JS表达式时要用{}，注意是表达式（也就是值）
- 样式的类名指定不要用class，要用className
- 内联样式，要用style={ {key:‘value’}}的形式去写，第一个{}代表你要写JS表达式了，第一个{}表示你写的是一个对象，多个单词类似fontSize的写小驼峰形式
- 只有一个跟标签(整个虚拟DOM在外层有且仅有一个容器包裹)
- 标签必须闭合
- 标签首字母
若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
若大写字母开头，react就去渲染对应组件，若组件没有定义，则报错
<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>
4.2 区分【js语句（代码）】与【js表达式】
表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
- a
- a+b
- demo(1)
- arr.map()
- function test(){}
语句：不能放在创建虚拟dom语句中
-
if(){}
-
for(){}
-
switch(){}
5 组件与模块理解
5.1 模块与模块化
模块
- 理解：向外提供特定功能的js程序，一般就是一个js文件
- 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
- 作用：复用js，简化js的编写，提高js运行效率
模块化
当应用的js都以模块来编写，这个应用就是一个模块化的应用
5.2 组件与组件化
组件
-
理解：用来实现局部功能效果的代码和资源的集合(html/css/js/img等等)
-
为什么要用组件：一个界面的功能复杂
-
作用：复用编码，简化项目编码，提高运行效率
组件化
当应用是以多组件的方式实现,这个应用就是组件化的应用