做网站学的什么专业家庭优化大师免费下载
React 简介、基础入门
- 一、React 简介
- 1、是什么？
- 2、谁开发的？
- 3、为什么要学？
- 4、React 的特点
- 5、学习 React 之前你要掌握的 Javascript 基础知识
- 二、React 入门
- 1、相关 js 库
- 2、Hello React 入门小例子---React16.8.0 版本
- 3、为什么不用 js ，而需要使用 jsx
- 3.1 使用 jsx 创建虚拟 DOM
- 3.2 使用 js 创建虚拟 DOM
- 3.3 通过对比发现
- 4、虚拟 DOM 与真实 DOM
- 4.1 关于虚拟 DOM
- 5、JSX 语法规则
- 5.1 例子
- 5.2 语法规则
- 5.3 JSX 小练习
- 5.3.1 区分：【js 语句（代码）】与【js 表达式】
- 5.4 模块与组件、模块化与组件化的理解
- 5.4.1 模块
- 5.4.2 组件
- 5.4.3 模块化
- 5.4.4 组件化
一、React 简介
1、是什么？
用于构建用户界面的 JavaScript 库
界面–》 视图
只关注视图层
例子：使用原有的知识去展示数据的步骤
1）发送请求获取数据
2）处理数据（过滤、整理格式等）
3）操作 DOM 呈现页面 （React 只关注这一步骤）
React 是一个将数据渲染为 HTML 视图的开源 Javascript 库
2、谁开发的？
由 Facebook 开发的，且开源
时间线：
1）起初由 Facebook 的软件工程师 Jordan Walke 创建
2）于 2011 年部署于 Facebook 的 newsfeed
3）随后在 2012 年部署于 Instagram（INS）
4）2013 年 5 月宣布开源
…
近十年 “陈酿”React 正在被腾讯、阿里等一线大厂广泛使用
3、为什么要学？
1）原生 Javascript 操作 DOM 繁琐、效率低（DOM-API 操作 UI）
document.getElementById('app')
document.querySelector('#app')
document.getElementsByTagName('span')
2）使用 Javascript 直接操作 DOM， 浏览器会进行大量的重绘重排
3）原生 Javascript 没有组件化编码方案，代码复用率低
js 的模块化：将非常庞大的 js 按照功能点拆分成一个个小的 js，这就要做模块化
组件化：将结构和 js 都拆分成小的部分
以上是原生 JavaScript 的痛点。
4、React 的特点
1）采用 组件化 模式、声明式编码，提高开发效率及组件复用率。
命令式编程：缺少任何一个步骤都没法得到结果
声明式编程：只需要说出想要的结果，过程可以省略
2）在 React Native 中可以使用 React 语法进行 移动端开发。
3）使用 虚拟 DOM + 优秀的 Diffing 算法， 尽量减少与真实 DOM 的交互
5、学习 React 之前你要掌握的 Javascript 基础知识
1）判断 this 的指向
2）class（类）
3）ES6 语法规范，模板字符串等
4）npm 包管理器
5）原型、原型链
6）数组常用方法，筛选最值、条件求和等
7）模块化
二、React 入门
文档： https://react.docschina.org/
1、相关 js 库
1） react.js: React 核心库
jsx
在 js 的基础上增加一些语法和规范， 使用 babel 来转换
2）react-dom.js 提供操作 DOM 的 react 扩展库
3）babel.min.js 解析 JSX 语法代码转为 JS 代码的库
2、Hello React 入门小例子—React16.8.0 版本
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="test"></div><!-- 引入 react 核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入 react-dom，用于支持 react 操作DOM --><scripttype="text/javascript"src="../js/react-dom.development.js"></script><!-- 引入babel， 用于将 jsx 转为 js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 此处一定要写babel --><script type="text/babel">// 1、创建虚拟 DOM. 此处一定不要写引号，因为不是字符串const vDom = <h1>Hello, React</h1>// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM，容器)ReactDOM.render(vDom, document.getElementById('test'))</script></body>
</html>
3、为什么不用 js ，而需要使用 jsx
3.1 使用 jsx 创建虚拟 DOM
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="test"></div><!-- 引入 react 核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入 react-dom，用于支持 react 操作DOM --><scripttype="text/javascript"src="../js/react-dom.development.js"></script><!-- 引入babel， 用于将 jsx 转为 js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 此处一定要写babel --><script type="text/babel">// 1、创建虚拟 DOM. 此处一定不要写引号，因为不是字符串const vDom = <h1>Hello, React</h1>// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM，容器)ReactDOM.render(vDom, document.getElementById('test'))</script></body>
</html>
3.2 使用 js 创建虚拟 DOM
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="test"></div><!-- 引入 react 核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入 react-dom，用于支持 react 操作DOM --><scripttype="text/javascript"src="../js/react-dom.development.js"></script><script type="text/javascript">// 1、创建虚拟 DOM React.createElement(标签名， 标签属性， 标签内容)const vDom = React.createElement('h1', { id: 'title' }, 'Hello, React')// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM，容器)ReactDOM.render(vDom, document.getElementById('test'))</script></body>
</html>
3.3 通过对比发现
当标签内容都是 ‘Hello, React’ 的时候差别不大。
但是当标签 h1 需要嵌套一个 span 标签再显示 ‘Hello, React’ 的时候，
js 创建就需要这么写
React.createElement('h1',{ id: 'title' },React.createElement('span', {}, 'Hello, React'),
)
jsx 就这么写
const vDom = (<h1><span>Hello, React</span></h1>
)
jsx 创建虚拟 DOM 就是原生 js 写语法糖
4、虚拟 DOM 与真实 DOM
4.1 关于虚拟 DOM
（1）本质是 Object 类型的对象（一般对象）
（2）虚拟 DOM 比较“轻”，属性比较少，真实 DOM 比较“重”。因为虚拟 DOM 是 React 内部在用，无需真实 DOM 上那么多的属性。
（3）虚拟 DOM 最终会被 React 转化为真实 DOM，呈现在页面上。
5、JSX 语法规则
5.1 例子
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>JSX 语法规则</title><style>.title {background-color: aquamarine;}</style></head><body><div id="test"></div><!-- 引入 react 核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入 react-dom，用于支持 react 操作DOM --><scripttype="text/javascript"src="../js/react-dom.development.js"></script><!-- 引入babel， 用于将 jsx 转为 js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 此处一定要写babel --><script type="text/babel">let MyId = 'TestIn'// 1、创建虚拟 DOM. 此处一定不要写引号，因为不是字符串const vDom = (<div><h1 className="title" id={MyId.toLowerCase()}><span style={{ color: 'red', fontSize: '120px' }}>Hello, React</span></h1><h1 className="title" id={MyId.toUpperCase()}><span style={{ color: 'red', fontSize: '80px' }}>Hello, React</span></h1><input type="text"></input><Good></Good></div>)// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM，容器)ReactDOM.render(vDom, document.getElementById('test'))</script></body>
</html>
5.2 语法规则
（1）全称 Javascript XML
（2）react 定义的一种类似于 XML 的 JS 扩展语法：JS+XML
a. XML 早期用于存储和传输数据
<student><name>Tom</name><age>19</age>
</student>
使用 json 进行存储： “{“name”: “Tom”, “age”: 19}”
（3）定义虚拟 DOM 时，不要写引号
（4）标签中混入 JS 表达式时 要用花括号 {}
（5）样式的类名指定不要用 class，需要使用 className
a. class 是 es6 中的关键字，react 在设计的时候避开了这个，所以用 className
（6）内联样式，要用 style={{key: value}} 的形式去写
（7）虚拟 DOM 必须只有一个根标签
（8）标签必须闭合
（9）标签首字母
a. 若小写字母开头，则将该标签转为 html 中同名元素， 若 html 中无该标签对应的同名元素，则报错
b. 若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错
5.3 JSX 小练习
在页面上动态展示 前端 js 框架列表
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>jsx小练习</title></head><body><div id="test"></div><!-- 引入 react 核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入 react-dom，用于支持 react 操作DOM --><scripttype="text/javascript"src="../js/react-dom.development.js"></script><!-- 引入babel， 用于将 jsx 转为 js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 此处一定要写babel --><script type="text/babel">/*一定注意区分：【js 语句（代码）】与【js表达式】1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方下面这些都是表达式:(1) a(2) a+b(3) demo(1)(4) arr.map()(5) function test(){}2.js语句（代码）：控制代码走向的下面这些都是语句（代码）:(1) if(){}(2) for(){}(3) switch(){case: xxx}*/let data = ['Angluar', 'React', 'Vue']// 1、创建虚拟 DOM.const vDom = (<div><h1>前端 js 框架列表</h1><ul>{data.map((el, inx) => {return <li key={inx}>{el}</li>})}</ul></div>)// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM，容器)ReactDOM.render(vDom, document.getElementById('test'))</script></body>
</html>
5.3.1 区分：【js 语句（代码）】与【js 表达式】
1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式:
(1) a
(2) a+b
(3) demo(1)
(4) arr.map()
(5) function test(){}
2.js 语句（代码）：控制代码走向的
下面这些都是语句（代码）:
(1) if(){}
(2) for(){}
(3) switch(){case: xxx}
5.4 模块与组件、模块化与组件化的理解
5.4.1 模块
1）理解：向外提供特定功能的 js 程序，一般就是一个 js 文件
2）为什么要拆分成模块：随着业务逻辑增加，代码越来越多且复杂
3）作用：复用 js ，简化 js 的编写，提高 js 运行效率
5.4.2 组件
1）理解：用来实现局部功能效果的代码和资源的集合（html、css、js、image 等）
2）为什么：一个界面的功能更复杂
3）作用：复用编码，简化项目编码、，提供运行效率
5.4.3 模块化
当应用的 js 都以模块来编写，这个应用就是一个模块化的应用
5.4.4 组件化
当应用是以多组件的方式实现，这个应用就是一个组件化的应用