Javascript template & react js 初探

1. Javascript template 介紹
與 React JS 初探
Wan-Ting Jheng
2015/3/3

2. Javascript template
將 資料 與 頁面外觀 分開
透過樣版引擎處理
產生最終頁面

3. Why javascript template
網頁中有許多元素是重覆的，例如文章列表
使用樣版可減少程式碼
以往用 javascript 操作 DOM 的作法
讓程式碼變的冗長且難以閱讀
這種作法將 邏輯 與 頁面外觀 混在一起
透過樣版，寫出頁面內容，將會變動的欄位挖空
關注點分離，讓資料、畫面、邏輯各自獨立
讓樣版引擎處理產生頁面

4. React JS
源自於 Facebook 的開源專案
作為一個 JavaScript-based UI rendering engine
它提供建立使用者介面的 javascript 函式庫
特色
virtual DOM : 讓執行速度加快的關鍵
component : 提高重用性

5. Demo: Easy-Blog
使用react js 實作簡易blog系統，具有以下功能
● 四種文章類別選項
● 簡易貼文
● 短留言
使用 React.js,
Firebase, Bootstrap, jQuery
github page http://wantingj.github.io/easy_blog/
github repo. https://github.com/wantingj/easy_blog

6. Easy-Blog Component List
Page
PageNav
CategoryItem *n
PageHeader
OnePost *n
OneReply *n
ReplyForm
PostForm

7. 由於操作 DOM 是個昂貴的動作
React 會將頁面結構透過 virtual DOM 紀錄起來
資料變動時，將 virtual DOM 與 實際的 DOM 比對
只更動需要異動的部份，以加快呈現速度
Virtual DOM
<p>p1</p>
<p>p2</p>
<p>p2</p>
<p>p1</p>
<p>p2</p>
<p>p2</p>
<p>p2</p>

8. JSX
JSX 是在 javascript 程式碼當中，看起來類似 XML 的語法
用來描述頁面結構 (注意: 並不是真正的DOM物件)
不一定要使用，但它撰寫方便，增加程式可讀性
需使用 JSXTransformer 轉換為 javascript 語法
<a href='http://facebook.github.io/react'>React</a>
var link = React.DOM.a({href: 'http://facebook.github.io/react'}, 'React');

9. JSX transformer
● In-browser JSX transformer
不建議在產品上使用
需要以下語法
<script src="js/lib/JSXTransformer.js"></script>
<script type="text/jsx">/* 帶有 jsx 的程式 */</script>
● Online JSX Compiler -- JSX to js
http://facebook.github.io/react/jsx-compiler.html
● 離線轉換JSX
透過 npm 安裝 react-tools

10. JSX 注意事項
由於 JSX 語法存在於 javascript 中
因此 attribute 必須避開 javascript 關鍵字
class => className
for => htmlFor
JSX 撰寫要符合xml標準
開放標籤要記得結尾，例如 <br />
JSX array 要有 key 屬性並且在array之中唯一
否則會有以下警告訊息
Each child in an array should have a unique "key" prop

11. 元件
元件定義
透過 render() 繪製，將元件實例化

12. props
通常用在靜態資料上
讓父元件傳遞資訊給子元件
父元件透過 attritube 指定給子元件
<Page postLimit={10} nowCategory={-1}/>
在子元件 Page 的內部，可以用 props 取得
this.props.postLimit

13. state
存放元件內部時常變動的資料
例如 Easy-Blog 的文章列表、回應
//初始化
getInitialState: function(){
return {data: []};
}
//修改
this.setState({data: [1,2,3]})
一旦 state 有變動，就會觸發 React 重新繪製頁面

14. refs
有像錨點的概念
定義結構時，埋入 ref 屬性
<textarea ref="content"></textarea>
透過 this.refs 取得該元件
this.refs.content.getDOMNode().value

15. 生命周期
元件的生命週期有三個主要的部分
● Mounting：元件正準備要被寫入 DOM
● Updating：元件偵測到狀態的改變準備重新繪製
● Unmounting：元件正要被從 DOM 中移除
React 根據以上情境提供對應的事件
● Will：情境發生之前
● Did：情境完成之後

16. Mounting
● getInitialState()
● componentWillMount()
● componentDidMount(DOMElement rootNode)
此時已經生成 DOM 物件，有需要操作DOM的話可以在這裡執行
after Mounting
● getDOMNode() 取得 DOM 物件
● forceUpdate() 強制更新
Updating
● componentWillReceiveProps(nextProps)
● shouldComponentUpdate(nextProps, nextState)
回傳 boolean，代表是否要更新畫面。通常 React 反應速度很快不太需要用到
若是執行許多資料操作，希望資料都就定位後才更新畫面，可以透過這個控制
● componentWillUpdate()
● componentDidUpdate(prevProps, prevState, rootNode)
Unmounting
● componentWillUnmount()

17. Reference
React JS 官網
http://facebook.github.io/react/index.html
iThome - Reactjs 30 天系列
http://ithelp.ithome.com.tw/profile/share?id=20059915&page=2
[译]深入解析react
http://www.ifeenan.com/javascript/2014-09-10-[%E8%AF%91]%E6%B7%B1%
E5%85%A5%E8%A7%A3%E6%9E%90React/
使用各種 javascript framework 實作 Todo App
http://todomvc.com/