- React简介与入门
-
- Ⅰ.React简介
-
- 1.1 什么是React全家桶？
- 1.2 React是什么？
- 1.3 谁开发的？
- 1.4 为什么要学？
- 1.5 React的特点
- 1.6 学习React之前要掌握的JavaScript基础知识
- Ⅱ. React入门
-
- 1.1 React的基本使用
-
- 1.1.1 相关库
- 1.1.2 创建虚拟DOM的两种方式
- 1.1.3 虚拟DOM与真实DOM
- 1.2 React JSX
-
- 1.2.1 jsx定义及作用
- 1.2.2 jsx语法规则
- 1.3 模块与组件,模块化与组件化的理解
-
- 1.3.1 模块
- 1.3.2 组件
- 1.3.3 模块化
- 1.3.4 组件化
React基础
React-Router(路由的库)
PubSub(消息管理的库)
Redux(集中式状态管理的库)
Ant-Design(精美的UI组件库)
…
1.2 React是什么？用于构建用户界面的JavaScript库
React的核心是一个将数据渲染为HTML视图的开源JavaScript库。
eg: 在页面上想要展示一些学生的信息，分为以下三步：
-
发送请求获取数据
-
处理数据（数据遍历，过滤，整理格式等）
-
操作DOM呈现页面
React只处理最后一步，React操作DOM呈现页面
1.3 谁开发的？由Facebook开发，且开源。
1.4 为什么要学？- 原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI）。
document.getElementById(‘app’)
document.querySelector(‘#app’)
document.getElementByTagName(‘spa’)
- 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
- 原生JavaScript没有组件化编码方案，代码复用率低。
js的模块化：将庞大的js按照功能点拆分成一个一个小的js
构成一个页面：html+css+js
js的组件化：将html+css+js都拆分
1.5 React的特点-
采用组件化模式，声明式编码，提高开发效率及组件复用率。
命令式编码：通过命令方式将你想要的结果的每一个过程描述出来
声明式编码：通过一些特殊的语法表达一下你想要的结果，然后react帮助你操作DOM了。
-
在React Native中可以使用React语法进行移动端开发。
-
使用虚拟DOM+优秀Diffing算法，尽量减少与真实DOM的交互。
实现过程：React将原来的两个虚拟DOM保存下来了，进行虚拟DOM的比较，react发现之前的001和加入数据之后的001是一样的，就不再生成新的DOM了，直接用之前的真实DOM了，新生成的DOM是加入的这个数据的DOM。
1.6 学习React之前要掌握的JavaScript基础知识判断this的指向
class（类）
ES6语法规范
npm包管理器
原型，原型链
数组常用方法
模块化
Ⅱ. React入门 1.1 React的基本使用 1.1.1 相关库1） react.js：React核心库。
2） react-dom.js：提供操作DOM的react扩展库。
3） babel.min.js：解析JSX语法代码转为JS代码的库。（ES6==>ES5）
1.1.2 创建虚拟DOM的两种方式- 纯JS方式（一般不用）
<script type="text/javascript"> // 1.创建虚拟DOM React.createElement:帮助你创建虚拟DOM的 document.createElement:创建真实DOM的 const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'Hello,React')) // 2.渲染虚拟DOM到页面 标签名 标签属性 标签内容 ReactDOM.render(VDOM, document.getElementById('test')) </script>
- JSX方式：
<script type="text/babel"> /* 此处一定要写babel */ // babel 表示这里面的内容是jsx而不是js,并且翻译内容 const VDOM = ( /* 此处一定不要写单引号，因为不是字符串 */ <h1 id="title"> <span>Hello,React</span> </h1> )
JSX 实际上是原生 JS 的一种语法糖，由 babel 将 JSX 转译为 JS
JSX的优势是：JSX能够解决JS频繁地创建虚拟DOM
1.1.3 虚拟DOM与真实DOM-
React提供了一些API来创建一种 “特别” 的一般js对象
- const VDOM = React.createElement(‘xx’ , { id: ‘xx’} , ‘xx’ )
- 上面创建的就是一个简单的虚拟DOM对象。
-
虚拟DOM对象最终都会被React转换为真实的DOM
关于虚拟DOM：
-
本质是Object类型的对象（一般对象）
-
虚拟DOM比较“轻”（属性少），真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
-
虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
-
全称：JavaScript XML
-
react定义的一种类似于XML的JS扩展语法：JS+XML
XML早期用于存储和传输数据
eg: <student> <name>Tom</name> <age>19</age> </student>
JS里面有一个内置的JSON对象
"{"name":"Tom","age","19"}"JSON有两个方法:
- parse:用于快速地把JSON字符串转化为JS里对应的数组和对象
- stringfy:用于快速地把JS里的数组和对象转化成JSON字符串
-
本质是React.createElement(component,props,…children)方法的语法糖
-
作用：用来简化创建虚拟DOM
-
写法：var ele = < < <h1> Hello JSX ! < < </h1>
-
注意1： 它不是字符串，也不是HTML/XML标签
-
注意2： 它最终产生的就是一个JS对象
-
-
babel.js的作用
- 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
- 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理
具体代码实现：
<style> .title { background-color: green; width: 200px; } </style> <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"> const myId = "DeMo" const myData = "HeLLo_ReAct" // 1.创建虚拟DOM const VDOM = ( //toLocaleLowerCase() 方法用于把字符串转换为小写 <div> <h1 className="title" id={myId.toLocaleLowerCase()}> <span style={{ color: 'white', fontSize: '30px' }}>{myData.toLocaleLowerCase()}</span> </h1> <h1 className="title" id={myId.toLocaleUpperCase()}> <span style={{ color: 'white', fontSize: '30px' }}>{myData.toLocaleLowerCase()}</span> </h1> <input type="text" /> </div> ) // 2.渲染虚拟DOM到页面 ReactDOM.render(VDOM, document.getElementById("test")) <script/> <body/>
jsx语法规则：
- 定义虚拟DOM时，不要引号。( eg: const VDOM = ())
- 标签中混入JS表达式时要用{}。( eg:id={myId.toLocaleLowerCase()})
一定注意区分：【js语句（代码）】与【js表达式】
A. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
- (1) a
- (2) a+b
- (3) demo(1) 函数调用表达式
- (4) arr.map()
- (5) function test() {}
B.语句(代码):
下面这些都是语句(代码)：
- if(){}
- for(){}
- switch(){case:xxxx}
- 样式的类名指定不要用class，要用className。
- 内联样式。要用style={{ key:value }}的形式去写，属性要用小驼峰的形式，如fontSize。
- 虚拟DOM必须只有一个根标签。
- 标签必须闭合（eg:）
- 标签首字母
- (1) 若小写字母开头，则将该标签转为html中同名元素，若html中没有该标签对应的同名元素，则报错。（eg:123）
- (2)若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。（eg: < < <Good>123 < < </Good>）
// 模拟一些数据 const data = ['Angular', 'React', 'Vue'] // 1.创建虚拟DOM const VDOM = ( <div> <h1>前端js框架列表</h1> <ul> { //map()函数:将function应用于iterable的每一个元素，结果以列表的形式返回 data.map((item, index) => { return <li key={index}>{item}</li> }) } </ul> </div> )
效果图:
- 理解：向外提供特定功能的js程序, 一般就是一个js文件
- 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
- 作用：复用js, 简化js的编写, 提高js运行效率
- 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
- 为什么要用组件： 一个界面的功能更复杂
- 作用：复用编码, 简化项目编码, 提高运行效率
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
1.3.4 组件化当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
