第一节:React认识和JSX语法的了解

1.React 是什么

是用于构建用户界面的JavaScript库

如何理解:

1. React核心本身就是一个JS的第三方库，从宏观角度看其实和其他JS库没什么区别
2. 用于构建用户界面，意思就是这个库的目的主要负责处理用户界面-帮助渲染HTML视图的。

2.React的特点

1. 声明式: 声明式相对于以前命令式简单高效
2. 组件化: 创建各种状态各异的组件，由组件来组成复杂的UI
3. JSX : 使用独特JSX语法（后面会说）来创建组件，使用函数式编程思想来进行UI更新
4. 虚拟DOM: 基于内部虚拟DOM和Diff算法来有选择性的进行视图更新
5. 单向数据流: 子组件本身不会改变接受到的数据，只会监听数据变化，根据新值重新渲染

2.1 单项数据流

单项数据流的理解:

1. 单向数据流是指数据的流向只能由父组件通过props将数据传递给子组件，
2. 不能由子组件向父组件传递数据，
3. 要想实现数据的双向绑定，只能由子组件接收父组件props传过来的方法去改变父组件的数据而不是直接将子组件的数据传递给父组件。

3. 虚拟DOM的理解

3.1 什么是虚拟DOM

虚拟DOM本身就是JS对象, 使用JS对象模拟DOM树的结构

虚拟DOM在最后会转换位真实的DOM渲染到页面上

因此在React开发中还需要操作虚拟DOM, 已经相关的数据, React会自动的将虚拟DOM转为真实的DOM

虚拟DOM示例:

var vDOM = React.creatElement("h2",{id:"title"}, "hello")

虚拟DOM的理解

1. 虚拟DOM是模拟真实的DOM, 真实的DOM会有标签,属性,标签嵌套的值
2. 示例中第一个参数h2字符串转为真实的DOM就是h2标签
3. 示例中第二个参数对象转为真实的DOM, 属性为标签的属性, 值为标签属性值
4. 示例中第三个参数是标签嵌套的内容,

3.2 React中如何创建虚拟DOM

在React中创建虚拟DOM的方式有两种,

1. 纯JS的方式创建虚拟DOM
2. JSX语法创建虚拟DOM

3.2.1 纯JS的方式创建虚拟DOM

使用纯JS方式创建虚拟DOM说明:

1. React提供了一个createElement用来当创建虚拟DOM
2. 用点类似于document.createElement,创建真实在虚拟DOM
3. 虚拟DOM相较于真实的DOM会非常轻, 轻就是属性会比较少,只有一些核心的属性

示例如下:

// 虚拟DOM
let vDOM = React.createElement("h2",{id:"title"},"Hello World")

// 真实的DOM
let h3 = document.createElement("h3")

// 打印虚拟DOM和真实的DOM对比就理解轻重的概念
console.log(vDOM);
console.dir(h3);

// 将虚拟DOM渲染到页面上
ReactDOM.render((vDOM), document.getElementById("app"))

3.2.2 JSX语法创建虚拟DOM

说明

1. 所谓JSX语法就是在JS中可以像HTML中一样创建标签
2. JSX语法创建虚拟DOM相对于纯JS语法比较简单
3. JSX语法最终还是会被React转为JS方式的虚拟DOM
4. 开发过程中一般会选择JSX语法创建虚拟DOM

示例代码:

// JSX语法创建虚拟DOM
let vDOM = <h2 id="title">Hello World</h2>

// 将虚拟DOM渲染到页面上
ReactDOM.render((vDOM), document.getElementById("app"))

3.3 虚拟DOM的优点

3.3.1 虚拟DOM的优势

虚拟DOM的本质就是内存中的JavaScript对象

1. 虚拟(virtual)DOM, 不总是直接操作DOM(最小化重绘DOM次数)
2. DOM Diff 算法 最小化页面重绘(最小化重绘区域)

3.3.2 传统操作DOM的理解

1. 浏览器的渲染机制首先会解析HTML构建DOM树
2. 浏览器解析CSS构建CSS规则树
3. 将DOM树和CSS规则树合并形成Render渲染树
4. 对Reader渲染树的各个节点进行布局计算
5. 根据计算的结果将内容绘制在屏幕上

3.3.3 操作虚拟DOM理解

1. 传统的直接操作DOM,每一次的改变都会出发重构或重绘，每次的重构重绘都是从根节点开始分析处理
2. 操作虚拟DOM，只会更新虚拟DOM，每一次的变化都会和上一次虚拟DOM进行对比， 找到变化的部分，
3. 最终React会将包含所有变化的虚拟DOM和真实DOM进行对比, 找到变化的部分一次渲染, 提升渲染速度和性能

image

4. JSX语法

4.1 JSX语法的理解

1. 语法全称 JavaScript XML
2. React 定义的 一种类似于XML 的JS 扩展语法 XML + JS
3. 作用: 就是用来创建react虚拟DOM(元素)对象

4.2 JSX示例

var vDOM = <div>wuwei</div>

示例理解:

1. 处理中是有通过JSX语法创建的虚拟DOM
2. 值不是字符串 ,也不是一个HTML 或者XML,就是一个虚拟DOM,
3. 它最终会被转行为一个JS对象(虚拟DOM)
4. 标签名可以是任意合法的HTML标签名或自定义标签名,
5. 属性也可以是合法的标签属性,也可以是自定义属性

4.3 JSX语法解析规则

JSX语法解析有一个基本的规则:

1. 碰到<开头的代码,以标签的语法解析:

   合法的标签名会被当做正常标签解析,如果碰到不合法的标签名,会当成自定义标签, 通常是组件

2. 碰到{开头的代码, {} 里面会以js语法解析, 被当成js表达式

示例代码:

// JS中普通的变量
let content = "你好 React"

// 虚拟DOM
let vDOM = <h2 id="title">{ content }</h2>

// 将虚拟DOM渲染到页面上
ReactDOM.render((vDOM), document.getElementById("app"))

示例说明:

1. 示例中JSX语法中嵌套的{}外会被当做HTML解析
2. {}里面会被作为JS表达式解析, 因此content会被解析为变量
3. 故而{content}的值为"你好 React"

4.4 渲染虚拟DOM语法

将虚拟DOM渲染到页面上的语法

语法方式: ReactDOM.render(virtualDOM, containerDOM)

作用: 就是将虚拟DOM的元素渲染到真实的DOM容器中

参数说明

1. 参数一: 纯JS 或者 JSX 创建的虚拟DOM对象
2. 参数二: 用来包含虚拟DOM的真实DOM元素对象(一般用div)

5. 模块与组件和模块化与组件化的理解

5.1 模块

1. 理解: 模块就是向外提供特定功能的JS程序,一般就是一个JS文件
2. 为什么: 因为所有的js代码写在一起,就会太多太复杂了
3. 作用: 复用js,简化js的编写,提高js运行效率

5.2 组件

1. 理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)
2. 为什么: 一个界面的功能太复杂了,
3. 作用: 复用编码,简化项目编码,提高运行效率

5.3 模块化

当应用的js都是以模块来编写的时候,这个应用就是一个模块化的应用

5.4 组件化

当应用都是以组件的方式来实现的时候,这个应用就是一个组件化的应用