React的基本认识
Facebook开源的一个js库,结合生态库构成一个MV*框架,一个用来动态构建用户界面的js库
React生态:React+React-Router+Redux+Axios+Babel+Webpack
React的特点
- Declarative(声明式编码)
- Component-Based(组件化编码)
- Learn Once, Write Anywhere(支持客户端与服务器渲染)
- 高效(高效的DOM Diff算法,最小化页面重绘)
- 单向数据流(父组件只能将数据一层逐步往子组件传递,子组件向父组件也是只能一层层的往传递数据)
声明式编程:只关注做什么, 而不关注怎么做(流程), 类似于填空题,命令式编程:要关注做什么和怎么做(流程), 类似于问答题
React高效的原因
虚拟(virtual)DOM, 不总是直接操作DOM(批量更新, 减少更新的次数)
高效的DOM Diff算法, 最小化页面重绘(减小页面更新的区域)
React的基本使用
需求:在一个div容器内插入一个元素,效果如下:
导入相关js库文件(react.js(核心库), react-dom.js(提供操作DOM的react扩展库), babel.min.js(解析JSX语法代码转为纯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>
具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01_HelloWorld</title>
</head>
<body>
<div id="test"></div>
<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>
<script type="text/babel">/*告诉babel.js解析里面的jsx的代码*/
// 1. 创建虚拟DOM元素对象
var vDom = <h1>Hello React!</h1> // 不是字符串
// 2. 将虚拟DOM渲染到页面真实DOM容器中
ReactDOM.render(vDom, document.getElementById('test'))
</script>
</body>
</html>
安装React Devtools调试工具
直接在Chrome浏览器的应用商店中搜索下载安装即可
虚拟DOM
React提供了一些API来创建一种 `特别` 的一般js对象,纯JS(一般不用)
var element = React.createElement('h1', {id:'myTitle'},'hello')
上面创建的就是一个简单的虚拟DOM对象
虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02_JSX_DEMO</title>
</head>
<body>
<h2>前端JS框架列表</h2>
<div id="test1"></div>
<div id="test2"></div>
<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>
<script type="text/javascript">
// 使用React提供了一些API来创建虚拟DOM,没有使用JSX语法的话,可以直接使用type="text/javascript",不用写成bable
const msg = 'I Like You!'
const myId = 'Atguigu'
// 1.创建虚拟DOM对象
// 第一个参数是标签名,第二个参数是是标签的属性, 第三个参数是标签里的内容
const vDom1 = React.createElement('h1', {id: myId.toLowerCase()}, msg.toUpperCase())
//渲染虚拟DOM
// 第一个参数是虚拟DOM对象, 第二个参数是需要插入的真实DOM元素
ReactDOM.render(vDom1, document.getElementById('test1'))
</script>
</body>
</html>
JSX的理解和使用
全称: JavaScript XML,react定义的一种类似于XML的JS扩展语法: XML+JS,作用:是用来创建react虚拟DOM(元素)对象
标签名任意: HTML标签或其它标签 标签属性任意: HTML标签属性或其它
var ele = <h1>Hello JSX!</h1>
//注意1: 它不是字符串, 也不是HTML/XML标签
// 注意2: 它最终产生的就是一个JS对象
JSX基本语法规则
遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
遇到以 { 开头的代码,以JS语法解析: 标签中的js代码必须用{ }包含
渲染虚拟DOM(元素)
语法: ReactDOM.render(virtualDOM, containerDOM)
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明 参数一: 纯js或jsx创建的虚拟dom对象,参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
babel.js的作用
浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX,都要加上type="text/babel", 声明需要babel来处理
需求是在两个div上插入元素,效果如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02_JSX_DEMO</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<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>
<script type="text/babel">
const msg = 'I Like You!'
const myId = 'Atguigu'
// 1.创建虚拟DOM对象
const vDom1 = <h1 id={myId.toLowerCase()}>{msg.toUpperCase()}</h1>
const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
//渲染虚拟DOM
// 第一个参数是虚拟DOM对象, 第二个参数是需要插入的真实DOM元素
ReactDOM.render(vDom1, document.getElementById('test1'))
ReactDOM.render(vDom2, document.getElementById('test2'))
</script>
</body>
</html>
需求: 动态展示列表数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02_JSX_DEMO</title>
</head>
<body>
<h2>前端JS框架列表</h2>
<div id="example"></div>
<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>
<script type="text/babel">
/*功能: 动态展示列表数据*/
const names = ['jquery', 'zepto', 'angular', 'vue', 'react']
// 1.创建虚拟DOM
const vDom1 = (
<ul>
{
names.map((name, index) => <li key={index}>{name}</li>)
}
</ul>
)
// 2.渲染虚拟DOM
ReactDOM.render(vDom1, document.getElementById('example'))
</script>
</body>
</html>