第一章：React入门

第一章：React入门

1.1. React

1.1.1. 官网

1. 英文官网: https://reactjs.org/

2. 中文官网: https://doc.react-china.org/

1.1.2. 介绍描述

1. 用于构建用户界面的 JavaScript 库(只关注于 View)

2. 由 Facebook 开源

1.1.3. React 的特点

1. Declarative(声明式编码)

2. Component-Based(组件化编码)

3. Learn Once, Write Anywhere(支持客户端与服务器渲染)

4. 高效

5. 单向数据流

1.1.4. React 高效的原因

1. 虚拟(virtual)DOM, 不总是直接操作 DOM

2. DOM Diff 算法, 最小化页面重绘

1.2. React 的基本使用

注意: 此时只是测试语法使用, 并不是真实项目开发使用

1.2.1. 效果

1.2.2. 相关 js 库

1. react.js: React 的核心库

2. react-dom.js: 提供操作 DOM 的 react 扩展库

3. babel.min.js: 解析 JSX 语法代码转为纯 JS 语法代码的库

1.2.3. 在页面中导入 js

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

1.2.4. 编码

<script type="text/babel"> // 必须声明 babel
    // 创建虚拟 DOM 元素
    const vDom = <h1>Hello React</h1> // 千万不要加引号
    // 渲染虚拟 DOM 到页面真实 DOM 容器中
    ReactDOM.render(vDom, document.getElementById('test'))
</script>

1.2.5. 使用 React 开发者工具调试

谷歌商店搜索 react，第一个就是了

1.3. React JSX

1.3.1. 效果

1.3.2. 虚拟 DOM

1. React 提供了一些 API 来创建一种 特别 的一般 js 对象

a. var element = React.createElement(‘h1’, {id:‘myTitle’},‘hello’)

b. 上面创建的就是一个简单的虚拟 DOM 对象

2. 虚拟 DOM 对象最终都会被 React 转换为真实的 DOM

3. 我们编码时基本只需要操作 react 的虚拟 DOM 相关数据, react 会转换为真实 DOM 变化而更新界面

1.3.3. JSX

1. 全称: JavaScript XML

2. react 定义的一种类似于 XML 的 JS 扩展语法: XML+JS

3. 作用: 用来创建 react 虚拟 DOM(元素)对象

a. var ele = <h1>Hello JSX!</h1>

b. 注意 1: 它不是字符串, 也不是 HTML/XML 标签

c. 注意 2: 它最终产生的就是一个 JS 对象

4. 标签名任意: HTML 标签或其它标签

5. 标签属性任意: HTML 标签属性或其它

6. 基本语法规则

a. 遇到 <开头的代码, 以标签的语法解析: html 同名标签转换为 html 同名元素, 其它标签需要特别解析

b. 遇到以 { 开头的代码，以 JS 语法解析: 标签中的 js 代码必须用{ }包含

7. babel.js 的作用

a. 浏览器不能直接解析 JSX 代码, 需要 babel 转译为纯 JS 的代码才能运行

b. 只要用了 JSX，都要加上 type=“text/babel”, 声明需要 babel 来处理

1.3.4. 渲染虚拟 DOM( 元素)

1. 语法: ReactDOM.render(virtualDOM, containerDOM)

2. 作用: 将虚拟 DOM 元素渲染到页面中的真实容器 DOM 中显示

3. 参数说明

a. 参数一: 纯 js 或 jsx 创建的虚拟 dom 对象

b. 参数二: 用来包含虚拟 DOM 元素的真实 dom 元素对象(一般是一个 div)

1.3.5. 建虚拟 DOM 的 2 种方式

1. 纯 JS(一般不用)

React.createElement('h1', {id:'myTitle'}, title)

2. JSX:

<h1 id='myTitle'>{title}</h1>

1.3.6. JSX 练习

需求: 动态展示列表数据

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

1.4.1. 模块

1. 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件

2. 为什么: js 代码更多更复杂

3. 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率

1.4.2. 组件

1. 理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)

2. 为什么: 一个界面的功能更复杂

3. 作用: 复用编码, 简化项目编码, 提高运行效率

1.4.3. 模块化

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

1.4.4. 组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

码集合(html/css/js)

2. 为什么: 一个界面的功能更复杂

3. 作用: 复用编码, 简化项目编码, 提高运行效率

1.4.3. 模块化

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

1.4.4. 组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用