- 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> )
效果图:
1.3 模块与组件,模块化与组件化的理解 1.3.1 模块- 理解:向外提供特定功能的js程序, 一般就是一个js文件
- 为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂。
- 作用:复用js, 简化js的编写, 提高js运行效率
- 理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
- 为什么要用组件: 一个界面的功能更复杂
- 作用:复用编码, 简化项目编码, 提高运行效率
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
1.3.4 组件化当应用是以多组件的方式实现, 这个应用就是一个组件化的应用