React学习(一)
一.react简介
-
react的特点
(1)采用组件化模式、声明式编码,提高开发效率及组件复用率。
(2)React Native中可以使用React进行移动端开发
(3)采用虚拟DOM+Diffing算法,减少与真实DOM的交互 -
react高效原因
(1)使用虚拟DOM
(2)DOM Diffing算法,最小化页面重绘 -
Hello React 案例
(1)react.development.js:react核心库
(2)babel.min.js:ES6到ES5的转换,jsx转换为js
(3)react-dom.development.js:扩展库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test">
</div>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// 创建
const VDOM = <h1>Hello world</h1>
// 渲染
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
4.创建虚拟DOM的两种方式
(1)纯js
(2)jsx方式 (是js的语法糖)
//纯js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用JS创建虚拟DOM</title>
</head>
<body>
<div id="test">
</div>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/javascript">
// 创建
const VDOM = React.createElement('h1',{id:'tittle'},React.createElement('span',{},'Hello, React'))//标签名,标签属性,标签内容
// 渲染
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
//jsx方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test">
</div>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// 创建
const VDOM = (
<h1>
<span>Hello world</span>
</h1>
)
// 渲染
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
5.虚拟DOM和真实DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test"></div>
<div id = "demo"></div>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// 创建
const VDOM = (
<h1>
<span>Hello world</span>
</h1>
)
// 渲染
ReactDOM.render(VDOM,document.getElementById('test'))
const TDOM = document.getElementById('demo')
console.log('虚拟DOM',VDOM)
console.log('真实DOM',TDOM)
debugger;
// console.log(typeof VDOM)
// console.log(VDOM instanceof Object)
// 1.虚拟DOM本质是Object类型的对象(一般对象)
// 2.虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是react内部在用,无需真实DOM那么多属性
// 3.虚拟DOM最终会被React转化为真实DOM,呈现在页面上
</script>
</body>
</html>