首页 > 代码库 > 【React】- 1、React介绍

【React】- 1、React介绍

2024-10-16 20:36:40   219人阅读

React的开发背景

构建数据不断变化的大型应用

　　　　　　　　大量DOM操作  　　　　<----   自动DOM操作

数据变化

　　　　　　　　逻辑及其复杂　　　　   <----   状态对应内容（自动变化）

 

特点：

　　- 简单　　　　上手容易，代码简单

　　- 声明式　　　

React 的核心是组件，组件的设计目的是 提高代码复用率、降低测试难度和代码复杂度

 

提高代码复用率：组件将 数据和逻辑封装，类似面向对象中的类

降低测试难度：组件 高内聚低耦合，很容易对单个组件进行测试

降低代码复杂度：直观的语法 可以极大提高可读性

 

下载Facebook官方的基础代码

Emmet语法介绍

子代： >　　　　div>ul>li

<div>
	<ul>
		<li></li>
	</ul>
</div>

 

兄弟：+

父代：^　　　　div+div>p>span+em^bq　　

<div></div>
<div>
	<p><span></span><em></em></p>
	<blockquote></blockquote>
</div>

 

重复：*　　　　　　ul>li*5

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

 

成组：（）　　　　（div>dl>(dt+dd)*3)+footer>p

<div>
	<dl>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
	</dl>
</div>
<footer>
	<p></p>
</footer>

 ID：#

class：.　　　　div#header+div.page+div#footer.class1.class2.class3

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

 

属性: []　　　　td[title="Hello world!" colspan=3]　　　　

<td title="Hello world!" colspan="3"></td>

 

例子：　　　　(div+p#test>span.test2.test3)*5+p[name="hello"]>div.test4^a*5

<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<p name="hello">
	<div class="test4"></div>
</p>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>

html:5

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

 

React 程序结构介绍

本质上就是一个HTML页面，在HTML页面中可以编写JS代码（JSX代码）和CSS代码

也可以把JS代码和CSS代码分别存储到JS文件中和CSS文件中，最后引入到HTML页面中

 

1

1

 

【React】- 1、React介绍


联系
我们