react--学习笔记2（jsx理解使用练习、模块与组件，模块化与组件化）

最新推荐文章于 2022-05-20 21:58:19 发布

ABU_MOlI_ITUI

最新推荐文章于 2022-05-20 21:58:19 发布

阅读量5.1k

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/ABU_MOlI_ITUI/article/details/107622912

版权

react 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一、jsx理解和基本使用

虚拟dom：

第一种写法，react提供了‘特殊的’API创建对象，
首先在<script type="text/javascript">（Javascript中创建），先声明变量
创建虚拟dom，语法：var element = React.createElement('h1', {id:'myTitle'},'hello')
渲染dom：ReactDOM.render(vDom1,document.getElementById('test1'));

虚拟dom最终会被react转化为真实的dom。我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面。

JSX(JAVAScript XML):

第二种写法：创建react虚拟DOM(元素)对象
在<script type="text/babel"> 语法：var ele = <h1>Hello JSX!</h1>
它最终产生的就是一个JS对象
基本语法规则：遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析。遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含
babel.js的作用：浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行。只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

渲染dom：

语法：ReactDOM.render(virtualDOM, containerDOM)
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明
1. 参数一: 纯js或jsx创建的虚拟dom对象
2. 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

建虚拟DOM的2种方式：

纯JS(一般不用)

React.createElement('h1', {id:'myTitle'}, title)

JSX:

<h1 id='myTitle'>{title}</h1>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jsx理解</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/javascript">
			const msg ='I Like You!';
			const myId = 'Atguigu';
			
			//创建虚拟dom
			//a.var element = React.createElement('h1', {id:'myTitle'},'hello')
			const vDom1 = React.createElement('h2',{id:myId.toLowerCase()},msg.toUpperCase());
			//渲染虚拟dom
			ReactDOM.render(vDom1,document.getElementById('test1'));
		</script>
		
		<script type="text/babel">
			//创建虚拟dom
			const vDom2 = <h3 id={myId.toUpperCase()}> {msg.toLowerCase()}</h3>
			//渲染虚拟dom
			ReactDOM.render(vDom2,document.getElementById('test2'));
	    </script>
	</body>
</html>

jsx练习：

map将数组数据转化为标签数组

当数据为为嵌套标签时，最好使用（）括起来。eg：const ul =(<ul>{name}</ul>);

mao()方法：创建一个新的数组，意思是map将每一个元素都执行一遍新的函数，之后组成一个新的数组的结果。

官网解释：map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JSX练习</title>
	</head>
	<body>
		<h2>前端框架列表</h2>
		<div id="test1"></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">
			//创建虚拟dom
		 const names =['css', 'html', 'react', 'javascript', 'vue'];
		 const ul =(
		 	<ul>
		 	{names.map((name,index)=>
		 		<li key={index}>{name}</li>
		 	)}
		 	</ul>
		 )
			//渲染虚拟dom
        ReactDOM.render(ul,document.getElementById('test1'))
	    </script>
	</body>
</html>