【React】- 1、React介紹
阿新 • • 發佈：2017-07-04
log htm css代碼 大型 har html 高內聚低耦合 目的 耦合
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介紹