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
时间： 2024-12-15 06:52:08