Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript template & react js 初探

1,934 views

Published on

Javascript template & react js 初探

Published in: Technology
  • Login to see the comments

Javascript template & react js 初探

  1. 1. Javascript template 介紹 與 React JS 初探 Wan-Ting Jheng 2015/3/3
  2. 2. Javascript template 將 資料 與 頁面外觀 分開 透過樣版引擎處理 產生最終頁面
  3. 3. Why javascript template 網頁中有許多元素是重覆的,例如文章列表 使用樣版可減少程式碼 以往用 javascript 操作 DOM 的作法 讓程式碼變的冗長且難以閱讀 這種作法將 邏輯 與 頁面外觀 混在一起 透過樣版,寫出頁面內容,將會變動的欄位挖空 關注點分離,讓資料、畫面、邏輯各自獨立 讓樣版引擎處理產生頁面
  4. 4. React JS 源自於 Facebook 的開源專案 作為一個 JavaScript-based UI rendering engine 它提供建立使用者介面的 javascript 函式庫 特色 virtual DOM : 讓執行速度加快的關鍵 component : 提高重用性
  5. 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. 6. Easy-Blog Component List Page PageNav CategoryItem *n PageHeader OnePost *n OneReply *n ReplyForm PostForm
  7. 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. 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. 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. 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. 11. 元件 元件定義 透過 render() 繪製,將元件實例化
  12. 12. props 通常用在靜態資料上 讓父元件傳遞資訊給子元件 父元件透過 attritube 指定給子元件 <Page postLimit={10} nowCategory={-1}/> 在子元件 Page 的內部,可以用 props 取得 this.props.postLimit
  13. 13. state 存放元件內部時常變動的資料 例如 Easy-Blog 的文章列表、回應 //初始化 getInitialState: function(){ return {data: []}; } //修改 this.setState({data: [1,2,3]}) 一旦 state 有變動,就會觸發 React 重新繪製頁面
  14. 14. refs 有像錨點的概念 定義結構時,埋入 ref 屬性 <textarea ref="content"></textarea> 透過 this.refs 取得該元件 this.refs.content.getDOMNode().value
  15. 15. 生命周期 元件的生命週期有三個主要的部分 ● Mounting:元件正準備要被寫入 DOM ● Updating:元件偵測到狀態的改變準備重新繪製 ● Unmounting:元件正要被從 DOM 中移除 React 根據以上情境提供對應的事件 ● Will:情境發生之前 ● Did:情境完成之後
  16. 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. 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/

×