![state
存放元件內部時常變動的資料
例如 Easy-Blog 的文章列表、回應
//初始化
getInitialState: function(){
return {data: []};
}
//修改
this.setState({data: [1,2,3]})
一旦 state 有變動，就會觸發 React 重新繪製頁面](https://image.slidesharecdn.com/javascripttemplatereactjs-150303194430-conversion-gate01/85/Javascript-template-react-js-13-320.jpg)
![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/](https://image.slidesharecdn.com/javascripttemplatereactjs-150303194430-conversion-gate01/85/Javascript-template-react-js-17-320.jpg)
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=/slideshow/javascript-template-react-js/45400772/"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
- 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/