React是什么
react是用于构建用户界面的JavaScript库。是一个将数据渲染为HTML视图的开源JavaScript库。
原生JS的缺点
- 原生JS直接操作DOM繁琐,效率低,浏览器会进行大量的重绘重排。
- 原生JS没有组件化的编码方式,代码复用率低。
react的特点
- 采用组件化模式,声明式编码
- 在React Native中可以直接使用React语法进行移动端开发
- 使用虚拟DOM和优秀的Diffing算法
- 使用jsx语法进行开发
React基本使用
<!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>
<!-- REACT ,react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- ReactDOM ,支持react操作dom-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 将jsx转换成js文件 -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!--text/babel表明是jsx -->
<script type="text/babel">
// 1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1>
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("test"))
</script>
</body>
</html>
效果:
虚拟DOM的两种创建方式
使用jsx创建虚拟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>1.使用jsx创建虚机DOM</title>
</head>
<body>
<!-- 容器 -->
<div id="test"></div>
<!-- REACT ,react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- REACTDOM ,支持react操作dom-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 将jsx转换成js文件 -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!--text/babel表明是jsx -->
<script type="text/babel">
// 1.创建虚拟DOM
const VDOM = <h1 id="title">Hello,React</h1>
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById("test"))
</script>
</body>
</html>
使用js创建虚拟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>2.使用js创建虚拟DOM.html</title>
</head>
<body>
<!-- 容器 -->
<div id="test"></div>
<!-- REACT ,react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- REACTDOM ,支持react操作dom-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script>
// 1.创建虚拟DOM createElement(标签名,标签属性,标签内容)
const VDOM = React.createElement('h1',{
id:'title'},'Hello,React')
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById("test"))
</script>
</body>
</html>
两者区别
jsx创建虚拟DOM更方便一些。
需求:实现<h1><span>Hello,React</span></h1>
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>1.使用jsx创建虚机DOM</title>
</head>
<body>
<!-- 容器 -->
<div id="test"></div>
<!-- REACT ,react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- REACTDOM ,支持react操作dom-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 将jsx转换成js文件 -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!--text/babel表明是jsx -->
<script type="text/babel">
// 1.创建虚拟DOM
const VDOM = <h1 id="title"><span>Hello,React</span></h1>
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById("test"))
</script>
</body>
</html>
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>2.使用js创建虚拟DOM.html</title>
</head>
<body>
<!-- 容器 -->
<div id="test"></div>
<!-- REACT ,react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- REACTDOM ,支持react操作dom-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script>
// 1.创建虚拟DOM createElement(标签名,标签属性,标签内容)
const VDOM = React.createElement('h1',{
id:'title'},React.createElement('span',{
},'Hello,React'))
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById("test"))
</script>
</body>
</html>
jsx创建虚拟DOM还可以写成更舒适的形式
// 1.创建虚拟DOM
// const VDOM = <h1 id="title"><span>Hello,React</span></h1>
const VDOM = (
<h1 id="title">
<span>Hello,React</span>
</h1>
)
可以看出jsx是为了简化js创建dom节点的过程,实际上浏览器运送的时候还是会将jsx语法转换为js语法。
虚拟DOM与真实DOM的区别
- 虚拟DOM本质上就是一个object类型的对象
- 虚拟DOM比较轻(身上的属性比较少), 因为虚拟DOM只是React内部在使用
- 虚拟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">hello</div>
<!-- REACT ,react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- REACTDOM ,支持react操作dom-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 将jsx转换成js文件 -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!--text/babel表明是jsx -->
<script type="text/babel">
// 1.创建虚拟DOM
const VDOM = <h1 id="title"><span>Hello,React</span></h1>
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById("test"))
console.log('虚拟DOM',VDOM);
console.log('虚拟DOM类型',typeof VDOM);//object
const TDOM = document.getElementById("demo");
console.log('真实DOM', TDOM);
// debugger;
</script>
</body>
</html>
输出: