React
-
是什么？
用于构建用户界面的JavaScript库
- 发送请求获取数据 - 处理数据 - 操作DOM呈现页面（react自行处理）是一个将数据渲染为HTML视图的开源JavaScript库
-
谁开发的？
由Facebook开发，且开源。
Instagram???
-
为什么要学？
-
原生JavaScript操作DOM繁琐、效率低(DOM-API操作UI)
document.getElementById('app'); document.querySelect('#app'); document.getElementsByTagName('span'); -
使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
-
原生JavaScript没有组件化编码方案，代码复用率低。
-
-
React的特点
- 采用组件化模式、声明式编码，提高开发效率及组件复用率。
- 在React Native中可以使用React语法进行移动端开发。
- 使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。
- 虚拟DOM：运行先放在内存中 ？？？
-
JavaScript基础知识
- this、class
- npm包管理器
- 原型、原型链
- 数组
- 模块化
1 React入门
1.1 React简介
-
官网
-
介绍描述
用于构建用户界面的JavaScript库（只关注于视图操作）
-
特点：
- 声明式编程
- 组件化编程
- React Native 编写原生应用
- 高效（优秀的Diffing算法）
-
React 高效的原因
- DOM Diffing算法，最小化页面重绘
1.2 React基本使用
-
效果
<!-- 准备好一个容器 --> <div id="test"></div> <!-- 引入react核心库 --> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <!-- 引入react-dom 用于支持react操作DOM --> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <!-- 引入babel 用于将jsx转为js --> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> <script type="text/babel"> /* 此处一定为babel*/ // 1. 创建虚拟DOM const VDOM = <h1>Hello, React</h1>; // 2. 渲染虚拟DOM到页面 // ReactDOM.render(虚拟DOM, 容器) ReactDOM.render(VDOM, document.getElementById('test')); </script> -
相关js库
- babel.min.js : [ES6 ==> ES5] JSX ==> JS
- react.development.js : react核心库
- react-dom.development.js : react扩展库
-
创建虚拟DOM的两种创建方式
-
JSX
<script type="text/babel"> /* 此处一定为babel*/ // 1. 创建虚拟DOM const VDOM = ( <h1> <span>Hello, React</span> </h1> ); // 2. 渲染虚拟DOM到页面 // ReactDOM.render(虚拟DOM, 容器) ReactDOM.render(VDOM, document.getElementById('test')); </script> -
JavaScript
<script type="text/javascript"> // 1. 创建虚拟DOM // const VDOM = React.createElement(标签名，标签属性，标签内容) const VDOM = React.createElement('h1', { id:'title'}, 'Hello React') // 2. 渲染虚拟DOM到页面 // ReactDOM.render(虚拟DOM, 容器) ReactDOM.render(VDOM, document.getElementById('test')); </script>
-
-
虚拟DOM与真实DOM
// 1. 创建虚拟DOM
const VDOM = (
<h1 id="title">
<span>Hello, React</span>
</h1>
);
// 2. 渲染虚拟DOM到页面
// ReactDOM.render(虚拟DOM, 容器)
ReactDOM.render(VDOM, document.getElementById('test'));
console.log('虚拟DOM', VDOM);
console.log(typeof(VDOM));
console.log(VDOM instanceof Object);
const TDOM = document.getElementById('demo');
console.log('真实DOM', TDOM);
debugger;
关于虚拟DOM:
- 本质是Object类型的对象
- 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部再用，无需真实DOM那么多属性
- 虚拟DOM最终会被React转化为真实DOM，呈现在页面上
1.3 JSX
-
全称 JavaScript XML.
-
react定义的一种类似于XML的JS扩展语法
-
本质是
React.createElement(component, props, ...children)方法的语法糖 -
作用：用来简化创建虚拟DOM
-
标签名任意：HTML标签或其它标签
<script type="text/babel"> /* 此处一定为babel*/ const myId = 'atguigu'; const myData = 'Hello, reaCt'; // 1. 创建虚拟DOM // 变量 const VDOM = ( <h2 className="title" id={ myId.toLowerCase()}> <span style={ { color:'red'}}>{ myData.toLowerCase()}</span> <span style={ { color:'red'}}>{ myData.toLowerCase()}</span> <input type="text"></input> </h2> ); // 2. 渲染虚拟DOM到页面 // ReactDOM.render(虚拟DOM, 容器) ReactDOM.render(VDOM, document.getElementById('test')); </script>JSX语法规则：
- 定义虚拟DOM时，不要写引号
- 标签中混入js表达式时，要用{}
- 样式的类名指定不能用class，要用className
- 内联样式，要用style={ {key:value}}的形式去写
- 只有一个根标签
- 标签必须闭合 （JSX标签）
- 标签首字母
-
练习
动态展示列表
const data = ['Angular', 'Vue', 'React'];
const VDOM = (
<div id="container">
<h2>展示前端框架</h2>
<ul>
{
data.map((item, index) => {
return <li key={
index}>{
item}</li>
})
}
</ul>
</div>
)
ReactDOM.render(VDOM, document.getElementById('root'));
一定注意区分：js语句（代码）与js表达式
- 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
1.3_补充
XML早期用来存储和传输数据
<student>
<name>Tom</name>
<age>19</age>
</student>
{
'name' : 'TOM',
'age' : 19
}
JSON.stringfy
JSON.parse : 将字符串解析为json
1.4 模块与组件、模块化与组件化的理解
- 模块
- 向外提供特定功能的js程序,一般就是一个Js文件
- 作用:复用编码,简化项目编码,提高运行效率
- 组件
- 用来实现局部功能效果的代码和资源的集合