react小白起步(总结版)
在<script type="text/babel">
标签中,react分三个部分,数据声明、创建虚拟Dom对象,渲染虚拟Dom对象
数据声明
var a=1;
这里的数据可以是var、let、const,数据类型可以是js中的任意数据类型
创建虚拟Dom
var vDom=<h1>hello React</h1>
等于的后面可以使用纯html语句,在 type="text/babel"的script标签中是可以的,但是在默认的script标签中就不可以了
调用数据
使用{a}
,这里的{}外不可以有引号,引号表示字符串,这里的大括号表示中间的字符串为一个数据
渲染虚拟Dom
这一步是把虚拟Dom渲染到真实的dom中进行重绘(重排)
ReactDom.render(vDom,document.querySelector('#test'))
ReactDom.render(虚拟Dom对象,document.querySelector(‘挂载位置’))
Get Start:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- react原生库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 操作Dom的扩展库 -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/babel">
// 1、创建虚拟Dom元素对象
var vDom=<h1>Hello React!</h1>
// 2、将虚拟Dom渲染到页面真实Dom的容器中
ReactDOM.render(vDom,document.querySelector('#test'))
</script>
</body>
</html>
jsx语法本质:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02_JSX</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- react原生库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 操作Dom的扩展库 -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 原生js -->
<script type="text/javascript">
const msg='I like you '
const myId='qiaomu'
// 1、创建虚拟Dom
const vDom1=React.createElement('h2',{id:myId},msg)
// 2、渲染虚拟Dom
ReactDOM.render(vDom1,document.querySelector('#test1'))
</script>
<!-- jsx -->
<script type="text/babel">
// 1、创建虚拟Dom
var vDom2=<h2 id={myId}>{msg}</h2>
// 2、渲染虚拟Dom
ReactDOM.render(vDom2,document.querySelector('#test2'))
</script>
</body>
</html>
虚拟dom的优势
真实的dom东西很多,但是虚拟dom比较轻便,更新虚拟dom的时候真实的dom不会更新,这样可以批量更新dom,提高速度
渲染列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02_JSX_DEMO</title>
</head>
<body>
<h2>乔木木最喜欢的明星top2</h2>
<div id="example1"></div>
<h2>乔木木的墙头top3</h2>
<div id="example2"></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=['吴青峰','天海佑希']
const qiangtous=['齐思钧','羽生结弦','新垣结衣']
// 创建两个虚拟dom
// 用map函数,去出数组中的每个元素,把它变成一个li标签包裹的虚拟dom
const ul1=(
<ul>
{names.map((name,index)=>
<li key={index}>{name}</li>
)}
</ul>
)
const ul2=(
<ul>
{qiangtous.map((qiangtou,index)=><li key={index}>{qiangtou}</li>)}
</ul>
)
ReactDOM.render(ul1,document.querySelector('#example1'))
ReactDOM.render(ul2,document.querySelector('#example2'))
</script>
</body>
</html>