ReactJs完整的介紹

1. ReactJs

2. 大綱
• 簡介
• 概念
• 元件
• JSX
• 實務

3. 簡介
• ReactJs是一款針對View的函式庫(library)
• 處理畫面更新方面有著優異的表現
• 它並不是一套完整的框架(Framework),對於撰寫大型Js程式是相對
不適合的
• 需要有其有它框架的配合
• ReactJs能夠與其它框架有著很好的配合
範例1

4. 概念-運作方式
1. App啟動後會建構一個虛擬模型
2. 當有任何異動都會先異動虛擬模型
ReactJs端:
1. 收集使用者互動時所產生的事件
2. 遞送事件給虛擬模型
DOM端:
虛擬模型:
1. ReactJs會改變其模型資料、資料結構
2. DOM會遞送模型所期待的事件
3. 紀錄上一個模型的版本,每當有變動時計算與上個版本的差異,
再操作DOM API

5. 元件-狀態(State)
• 每個ReactJs元件可以自行管理自己的狀態
• 狀態都是私有的,外部元件不該直接存取到某個元件的狀態值
狀態
範例2

6. 元件-屬性(Props)
• 元件可以藉由屬性去接收外部傳入的物件
• Js是Functional Programming,就連Function也是可傳入的參數之一
屬性
範例3

7. 概念-元件導向
元件
元件
元件
• ReactJs就是不斷的在撰寫元件
• 每個元件會彼此相互溝通
• 元件可以被組織
範例4

8. 元件-參考(refs)
• 類似錨點的概念:
<textarea ref=“content”></textarea>
如此一來就可以透過this.refs取得該DOM元素實體的值:
this.refs.content.getDOMNode().value
範例5

9. 元件-Life Cycle 1 2 3
4
5
1. 設定屬性預設值的地方
2. 宣告狀態的地方
3. 套用套件的地方
4. 控制效能的地方
5. 資源回收的地方
範例6

10. 元件-事件
https://facebook.github.io/react/docs/events.html

11. 元件-Mixin
• 通常用於跨功能處理之用(Cross-Function)
• 在元件事件中會依照註冊的順序執行動作
範例7

12. JSX
• 一種類XML的標記式語言
• 其目的在於處理巢狀關係時,能夠以高階的方式描述關係:
(一般程式語言)
List lsObj = new List();
lsObj.Add(new Child(“1”));
lsObj.Add(new Child(“2”));
(JSX)
<List>
<Child name=“1” />
<Child name=“2” />
</List>

13. JSX的規則
• 僅能有一個根節點
• 某些已在HTML中使用的屬性要換名稱:
• class => className
• for => htmlFor
• 若無法成功進行編譯,會直接轉型(Cast)成字串輸出
• JSX中動態的內容要以{}將其包覆
• 若要呈現特殊字元,需以unicode轉換:
String.fromCharCode(183) => ‧

14. 實務 – 解構
• 將畫面看成是元件組合後的結果
• 元件允許重複使用;看看有那些是
重複的
範例8

15. 實務-從編譯到實際運行

16. 實務-Re-Render的時機
• ReactJs進行Re-Render的判斷:
=> 元件的狀態值被指派值(assign)
• 例: var name = “a”;
name = “b”; //re-render
name = “a”; //re-render
name = “a”; //re-render

17. 實務-提升效能
• ReactJs每Re-Render一次就會耗費資源
=> 減少Re-Render次數
• 預設的ReactJs判斷沒有試圖阻止重覆指派相同值卻Re-Render的狀
況
=> 這也是因為Js的動態型別很難真正判斷兩個物件是否相同
找到如何準確判斷相同值的方法就是效能提升的關鍵!

18. 實務-Immutable.js
• 來看個例子:
同樣都是修改foo為’baz’
靈異事件 正常
混搭Immutable.js確保物件判斷是正確的,藉此提高效能
範例9

19. 實務-UI套件
• 要套用其它套件(例: jQuery UI),需注意:
• 需在元件的事件: componentDidMount中,設定套件的套用邏輯
• 在元件的事件: componentWillUnmount中,清除套件所帶來的多餘物件
範例10

20. 特別篇-AngularJs + ReactJs
• AngularJs本身是一個Js框架,而ReactJs是針對呈現(View)的函式庫。
• 單以ReactJs無法建構出大型Js App,需要框架的配合;ReactJs可以很
輕鬆的與各種Js框架結合
範例11

21. 特別篇 – 重構到ES6
• Step1. 將React.createClass改成class並繼承React.component
• Step2. 將狀態的初始化放在建構子中
• Step3. 將屬性的初始化以static標記宣告
• Step4. 將函數的自繫結,寫在建構子中
練習
解答