React學習筆記1

標籤：

React設計出來就是單向資料流（從伺服器流向用戶端），不存在頁面資料和服務端資料進行綁定 通過組件化（component）去管理不同的資料流，用React開發、建立任何一個應用都是一個組件 前端組件定義：HTML+CSS+JS+IMG的組合體 在實際開發中，可以根據頁面的布局，對頁面進行拆分和組件化 特點和優勢：

1.虛擬DOM（開發時不需要在頁面中寫任何DOM元素）

架構底層的一套DOM實現

2.JSX文法（使用JavaScript XML格式的文法）

是用於編寫HTML內容的一個文法

3.組件化開發（React最核心的思想，是將頁面中任何一個地區或者元素都看成一個組件 component）

提高複用性

4.單向資料流（組件和後端之間的資料是單向的，從後端流動到react組件中）

不會從組件流向後端

5.組件聲明周期（任何一個組件在DOM中都具有一個完整的聲明周期，組件初始化的時候開始，組件被移除的時候消失，從而保證效能的優越）

完善的記憶體回收機制

 React使用 1.搭建架構環境

核心JS，定義虛擬DOM模型，資料更新，支援組件化演算法，都在這個JS中

<script src="../build/react.min.js"></script>

操作DOM的API

<script src="../build/react-dom.js"></script>

JSX的編譯器

<script src="../build/browser.min.js"></script>

 2.遵循架構標準和規範

規範1：在JS檔案中寫React組件時，需要將這個JS檔案的type指定成text/babel

<script type="text/babel"></script>

規範2：聲明組件時，組件的名稱首字母要大寫

規範3：React.createClass({})建立組件，裡面放的是一個對象， 實現對象裡的render子方法，在render子方法中通過return()返回jsx文法作為頁面中要顯示的HTML內容

規範4：JSX（JavaScript XML），XML資料存放區格式 JSX文法規範，只有一個開前端節點和結束節點

規範5：聲明一個組件後，通過ReactDOM.render()把組件渲染到頁面中

1. ReactDOM.render(param1,param2);
3. param1 <組件名稱/>||<組件名稱>< /組件名稱>
5. param2 組件被渲染的位置

 Tip:

1.JSX中的注釋：{/** 注釋內容 **/} 
2.React中的HTML元素的class要寫成className，for要寫成htmlFor

 建立樣式的兩種方式

方式1：外部CSS控制建立的元素

方式2：inner css是以object形式存在，並且object css屬性要和原生JS屬性一致

將樣式掛載到組件的原型鏈上，在render函數中用this.CSS取出對象//CSS是原型鏈上的自訂名稱

 卸載組件

ReactDOM.unmountComponentAtNode(父元素); 
要卸載的組件前提是被ReactDOM渲染過,所以要卸載必須先渲染

 總結

1.react特點 虛擬DOM，JSX文法（開始和結束只有一個節點），組件化，組件聲明周期，單向的資料流 文法：

1 React.createClass({2 render:function(){3 return:(4 //返回的HTML內容5 )6 }7 })

 

2.inner css,inner js

inner css遵循原生js文法

3.事件機制

onClick，onTouchStart... 
參考官方文檔

4.組件卸載

ReactDOM.unmountComponentAtNod(父元素);

組件必須被渲染過才能卸載

React學習筆記1