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

r囧r小猫 2023-03-02 05:15 3阅读 0赞

# 一、jsx理解和基本使用 #

**虚拟dom：**

1.  第一种写法，react提供了‘特殊的’API创建对象，
2.  首先在<script type="text/javascript">（Javascript中创建），先声明变量
3.  创建虚拟dom，语法：var element = React.createElement('h1', \{id:'myTitle'\},'hello')
4.  渲染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：**

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

**建虚拟DOM的2种方式 ：**

1.  纯JS(一般不用)

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

1.  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>

![20200728155417301.png][]

![20200728155458604.png][]

## 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>

![2020072816524767.png][]

# 二、模块与组件，模块化与组件化： #

模块：一般为js文件，内部有数据以及对数据的操作，有一些变量，以及一些函数对数据进行操作。

模块化：用来使用项目，以及项目的编码方式，就是你的项目是否是模块化项目，其实就是模块的集合

组件：编写特定的功能

组件化：是由组件的集合，由多个组件组成。

[20200728155417301.png]: /images/20230208/1a1f4668562848cc9c1928e9e5ae6ddf.png
[20200728155458604.png]: /images/20230208/b0581a5b561c4736b4b2bee66e6f9e8e.png
[2020072816524767.png]: /images/20230208/261b344fd8d24e5288aab7e969b3b40f.png