react起步

最新推荐文章于 2021-10-09 09:19:30 发布

乔木木木木

最新推荐文章于 2021-10-09 09:19:30 发布

阅读量134

点赞数

分类专栏： #react 文章标签： javascript reactjs

本文链接：https://blog.csdn.net/qq_43005779/article/details/107399348

版权

#react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

乔木木木木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react起步

react小白起步（总结版）在<script type="text/babel">标签中，react分三个部分，数据声明、创建虚拟Dom对象，渲染虚拟Dom对象数据声明var a=1;这里的数据可以是var、let、const，数据类型可以是js中的任意数据类型创建虚拟Domvar vDom=<h1>hello React</h1>等于的后面可以使用纯html语句，在 type="text/babel"的script标签中是可以的，但是在默认的scrip
复制链接

扫一扫