SlideShare a Scribd company logo
ReactJs
大綱
• 簡介
• 概念
• 元件
• JSX
• 實務
簡介
• ReactJs是一款針對View的函式庫(library)
• 處理畫面更新方面有著優異的表現
• 它並不是一套完整的框架(Framework),對於撰寫大型Js程式是相對
不適合的
• 需要有其有它框架的配合
• ReactJs能夠與其它框架有著很好的配合
範例1
概念-運作方式
1. App啟動後會建構一個虛擬模型
2. 當有任何異動都會先異動虛擬模型
ReactJs端:
1. 收集使用者互動時所產生的事件
2. 遞送事件給虛擬模型
DOM端:
虛擬模型:
1. ReactJs會改變其模型資料、資料結構
2. DOM會遞送模型所期待的事件
3. 紀錄上一個模型的版本,每當有變動時計算與上個版本的差異,
再操作DOM API
元件-狀態(State)
• 每個ReactJs元件可以自行管理自己的狀態
• 狀態都是私有的,外部元件不該直接存取到某個元件的狀態值
狀態
範例2
元件-屬性(Props)
• 元件可以藉由屬性去接收外部傳入的物件
• Js是Functional Programming,就連Function也是可傳入的參數之一
屬性
範例3
概念-元件導向
元件
元件
元件
• ReactJs就是不斷的在撰寫元件
• 每個元件會彼此相互溝通
• 元件可以被組織
範例4
元件-參考(refs)
• 類似錨點的概念:
<textarea ref=“content”></textarea>
如此一來就可以透過this.refs取得該DOM元素實體的值:
this.refs.content.getDOMNode().value
範例5
元件-Life Cycle 1 2 3
4
5
1. 設定屬性預設值的地方
2. 宣告狀態的地方
3. 套用套件的地方
4. 控制效能的地方
5. 資源回收的地方
範例6
元件-事件
https://facebook.github.io/react/docs/events.html
元件-Mixin
• 通常用於跨功能處理之用(Cross-Function)
• 在元件事件中會依照註冊的順序執行動作
範例7
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>
JSX的規則
• 僅能有一個根節點
• 某些已在HTML中使用的屬性要換名稱:
• class => className
• for => htmlFor
• 若無法成功進行編譯,會直接轉型(Cast)成字串輸出
• JSX中動態的內容要以{}將其包覆
• 若要呈現特殊字元,需以unicode轉換:
String.fromCharCode(183) => ‧
實務 – 解構
• 將畫面看成是元件組合後的結果
• 元件允許重複使用;看看有那些是
重複的
範例8
實務-從編譯到實際運行
實務-Re-Render的時機
• ReactJs進行Re-Render的判斷:
=> 元件的狀態值被指派值(assign)
• 例: var name = “a”;
name = “b”; //re-render
name = “a”; //re-render
name = “a”; //re-render
實務-提升效能
• ReactJs每Re-Render一次就會耗費資源
=> 減少Re-Render次數
• 預設的ReactJs判斷沒有試圖阻止重覆指派相同值卻Re-Render的狀
況
=> 這也是因為Js的動態型別很難真正判斷兩個物件是否相同
找到如何準確判斷相同值的方法就是效能提升的關鍵!
實務-Immutable.js
• 來看個例子:
同樣都是修改foo為’baz’
靈異事件 正常
混搭Immutable.js確保物件判斷是正確的,藉此提高效能
範例9
實務-UI套件
• 要套用其它套件(例: jQuery UI),需注意:
• 需在元件的事件: componentDidMount中,設定套件的套用邏輯
• 在元件的事件: componentWillUnmount中,清除套件所帶來的多餘物件
範例10
特別篇-AngularJs + ReactJs
• AngularJs本身是一個Js框架,而ReactJs是針對呈現(View)的函式庫。
• 單以ReactJs無法建構出大型Js App,需要框架的配合;ReactJs可以很
輕鬆的與各種Js框架結合
範例11
特別篇 – 重構到ES6
• Step1. 將React.createClass改成class並繼承React.component
• Step2. 將狀態的初始化放在建構子中
• Step3. 將屬性的初始化以static標記宣告
• Step4. 將函數的自繫結,寫在建構子中
練習
解答
Ad

Recommended

Vue
Vue
國昭 張
 
ASP.Net MVC Framework
ASP.Net MVC Framework
國昭 張
 
Redux+react js
Redux+react js
國昭 張
 
Asp.net core v1.0
Asp.net core v1.0
chang kuo-chao
 
深入淺出Node.JS
深入淺出Node.JS
國昭 張
 
前端自動化工具
前端自動化工具
國昭 張
 
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
Jeff Chu
 
Team Foundation Server
Team Foundation Server
國昭 張
 
Angular js twmvc#17
Angular js twmvc#17
twMVC
 
DDD系統分析
DDD系統分析
國昭 張
 
Entity Framework實戰
Entity Framework實戰
國昭 張
 
ASP.Net WebAPI經驗分享
ASP.Net WebAPI經驗分享
國昭 張
 
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
 
Ch13 整合 Spring MVC/Security
Ch13 整合 Spring MVC/Security
Justin Lin
 
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
 
微軟實戰課程日:玩轉雲端 技術與架構
微軟實戰課程日:玩轉雲端 技術與架構
Jeff Chu
 
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Jeff Chu
 
Full stack-development with node js
Full stack-development with node js
Xuefeng Zhang
 
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
Jeff Chu
 
SQL Server效能調校
SQL Server效能調校
國昭 張
 
Asp.net mvc 概觀介紹
Asp.net mvc 概觀介紹
Alan Tsai
 
Entity framework + Linq 介紹
Entity framework + Linq 介紹
Alan Tsai
 
Blazor 與 Radzen 同行
Blazor 與 Radzen 同行
Jimmy Ho
 
Ch13 整合Spring MVC
Ch13 整合Spring MVC
Justin Lin
 
Ch09 整合資料庫
Ch09 整合資料庫
Justin Lin
 
W3CTech美团react专场-Thinking in React
W3CTech美团react专场-Thinking in React
美团点评技术团队
 
Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)
Will Huang
 
Nuget介紹- 如何使用和建立自己的package
Nuget介紹- 如何使用和建立自己的package
Alan Tsai
 
前端測試
前端測試
國昭 張
 
React js入門
React js入門
昶宇 賴
 

More Related Content

What's hot (20)

Angular js twmvc#17
Angular js twmvc#17
twMVC
 
DDD系統分析
DDD系統分析
國昭 張
 
Entity Framework實戰
Entity Framework實戰
國昭 張
 
ASP.Net WebAPI經驗分享
ASP.Net WebAPI經驗分享
國昭 張
 
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
 
Ch13 整合 Spring MVC/Security
Ch13 整合 Spring MVC/Security
Justin Lin
 
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
 
微軟實戰課程日:玩轉雲端 技術與架構
微軟實戰課程日:玩轉雲端 技術與架構
Jeff Chu
 
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Jeff Chu
 
Full stack-development with node js
Full stack-development with node js
Xuefeng Zhang
 
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
Jeff Chu
 
SQL Server效能調校
SQL Server效能調校
國昭 張
 
Asp.net mvc 概觀介紹
Asp.net mvc 概觀介紹
Alan Tsai
 
Entity framework + Linq 介紹
Entity framework + Linq 介紹
Alan Tsai
 
Blazor 與 Radzen 同行
Blazor 與 Radzen 同行
Jimmy Ho
 
Ch13 整合Spring MVC
Ch13 整合Spring MVC
Justin Lin
 
Ch09 整合資料庫
Ch09 整合資料庫
Justin Lin
 
W3CTech美团react专场-Thinking in React
W3CTech美团react专场-Thinking in React
美团点评技术团队
 
Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)
Will Huang
 
Nuget介紹- 如何使用和建立自己的package
Nuget介紹- 如何使用和建立自己的package
Alan Tsai
 
Angular js twmvc#17
Angular js twmvc#17
twMVC
 
DDD系統分析
DDD系統分析
國昭 張
 
Entity Framework實戰
Entity Framework實戰
國昭 張
 
ASP.Net WebAPI經驗分享
ASP.Net WebAPI經驗分享
國昭 張
 
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
 
Ch13 整合 Spring MVC/Security
Ch13 整合 Spring MVC/Security
Justin Lin
 
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
 
微軟實戰課程日:玩轉雲端 技術與架構
微軟實戰課程日:玩轉雲端 技術與架構
Jeff Chu
 
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Jeff Chu
 
Full stack-development with node js
Full stack-development with node js
Xuefeng Zhang
 
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
Jeff Chu
 
SQL Server效能調校
SQL Server效能調校
國昭 張
 
Asp.net mvc 概觀介紹
Asp.net mvc 概觀介紹
Alan Tsai
 
Entity framework + Linq 介紹
Entity framework + Linq 介紹
Alan Tsai
 
Blazor 與 Radzen 同行
Blazor 與 Radzen 同行
Jimmy Ho
 
Ch13 整合Spring MVC
Ch13 整合Spring MVC
Justin Lin
 
Ch09 整合資料庫
Ch09 整合資料庫
Justin Lin
 
W3CTech美团react专场-Thinking in React
W3CTech美团react专场-Thinking in React
美团点评技术团队
 
Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)
Will Huang
 
Nuget介紹- 如何使用和建立自己的package
Nuget介紹- 如何使用和建立自己的package
Alan Tsai
 

Viewers also liked (10)

前端測試
前端測試
國昭 張
 
React js入門
React js入門
昶宇 賴
 
透過範例學習React (react tutorial 2)
透過範例學習React (react tutorial 2)
Justin Wu
 
React基礎教學
React基礎教學
昇倫 蔡
 
Javascript template & react js 初探
Javascript template & react js 初探
wantingj
 
前端網頁自動測試
前端網頁自動測試
政億 林
 
React js入門教學
React js入門教學
TaiShunHuang
 
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
wantingj
 
React JS and why it's awesome
React JS and why it's awesome
Andrew Hull
 
Git 經驗分享
Git 經驗分享
Mu Chun Wang
 
React js入門
React js入門
昶宇 賴
 
透過範例學習React (react tutorial 2)
透過範例學習React (react tutorial 2)
Justin Wu
 
React基礎教學
React基礎教學
昇倫 蔡
 
Javascript template & react js 初探
Javascript template & react js 初探
wantingj
 
前端網頁自動測試
前端網頁自動測試
政億 林
 
React js入門教學
React js入門教學
TaiShunHuang
 
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
wantingj
 
React JS and why it's awesome
React JS and why it's awesome
Andrew Hull
 
Ad

More from 國昭 張 (19)

8th ddd taiwan study group bounded context integration
8th ddd taiwan study group bounded context integration
國昭 張
 
Ddd(meetup 2) ddd with clean architecture
Ddd(meetup 2) ddd with clean architecture
國昭 張
 
20190126 ddd-meetup1
20190126 ddd-meetup1
國昭 張
 
事件風暴-設計衝刺
事件風暴-設計衝刺
國昭 張
 
事件風暴-領域建模
事件風暴-領域建模
國昭 張
 
單元測試
單元測試
國昭 張
 
Docker實務
Docker實務
國昭 張
 
Scrum essential
Scrum essential
國昭 張
 
Docker進階探討
Docker進階探討
國昭 張
 
Docker基礎
Docker基礎
國昭 張
 
DDD架構設計
DDD架構設計
國昭 張
 
DDD引導
DDD引導
國昭 張
 
Asp.net core v1.0
Asp.net core v1.0
國昭 張
 
架構設計-資料存取的選擇
架構設計-資料存取的選擇
國昭 張
 
例外處理與單元測試
例外處理與單元測試
國昭 張
 
NoSQL-MongoDB介紹
NoSQL-MongoDB介紹
國昭 張
 
Linq初階
Linq初階
國昭 張
 
Linq實戰
Linq實戰
國昭 張
 
C#版本3~5的新特性
C#版本3~5的新特性
國昭 張
 
8th ddd taiwan study group bounded context integration
8th ddd taiwan study group bounded context integration
國昭 張
 
Ddd(meetup 2) ddd with clean architecture
Ddd(meetup 2) ddd with clean architecture
國昭 張
 
20190126 ddd-meetup1
20190126 ddd-meetup1
國昭 張
 
事件風暴-設計衝刺
事件風暴-設計衝刺
國昭 張
 
事件風暴-領域建模
事件風暴-領域建模
國昭 張
 
Scrum essential
Scrum essential
國昭 張
 
Docker進階探討
Docker進階探討
國昭 張
 
DDD架構設計
DDD架構設計
國昭 張
 
Asp.net core v1.0
Asp.net core v1.0
國昭 張
 
架構設計-資料存取的選擇
架構設計-資料存取的選擇
國昭 張
 
例外處理與單元測試
例外處理與單元測試
國昭 張
 
NoSQL-MongoDB介紹
NoSQL-MongoDB介紹
國昭 張
 
C#版本3~5的新特性
C#版本3~5的新特性
國昭 張
 
Ad

React js