|
-- 會員 / 註冊 --
|
|
|
|
React:引領未來的用戶界面開發框架 ( 簡體 字) |
作者:寸志,范洪春,楊森 陳涌 | 類別:1. -> 程式設計 -> 網路編程 -> React |
譯者: |
出版社:電子工業出版社 | 3dWoo書號: 41465 詢問書籍請說出此書號!【有庫存】 NT售價: 325 元 |
出版日:5/1/2015 |
頁數:224 |
光碟數:0 |
|
站長推薦: |
印刷:黑白印刷 | 語系: ( 簡體 版 ) |
|
加入購物車 │加到我的最愛 (請先登入會員) |
ISBN:9787121259364 |
作者序 | 譯者序 | 前言 | 內容簡介 | 目錄 | 序 |
(簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證) |
作者序: |
譯者序: |
前言:推薦序 推薦序1 時光回溯。 2011 年我離開Google 轉而加入Facebook,從事移動互聯網(Mobile Web)的核心產品開發工作。 隨著時間的推移,工作上逐漸取得了許多有意義的巨大進展,同仁們也都深以此為傲。然而不是所有的事情都進展得特別順利。其中一個很大的問題與挑戰就是因為HTML5 的技術限制與性能瓶頸,許多產品的開發工作受到了限制。 2012 年Facebook 公開了一件很多人深有體會卻不想說出口的事實,那就是HTML5 之類的Web 技術并未成熟到能夠擔任產品開發工具重任的程度。在很多方面,使用原生代碼(native code)開發仍然是必要的選項。 對于很多包括我在內的Mobile Web 開發者來說,這樣的情況是一個讓人失望卻又不得不接受的事實。 2013 年年初,我離開工作兩年多的移動互聯網開發部門,轉而投入廣告部門,從事桌面富客戶端(Rich App Client Application)的開發工作。 雖然Mobile Web 的進展不如預期理想,但此時在Desktop Web 方面,事情卻有了有意思的變化。 當時我參與的新項目主要是要使用一種叫作React 的新平臺技術,將當時廣告部門的一個主要產品重構。項目的有趣之處在于,產品的視覺外觀與功能將不會也不能有任何變化,但是內部執行的代碼將會是以React 打造的。 由于項目的目標為實際上線且對公司營收有重要影響的產品,所以項目的挑戰除了在于應用React 這門新技術之外,維持產品本身的穩定當然也是不可妥協的目標。 所幸,項目順利達標,而同仁們也對于React 這門技術有了更豐富的經驗與更強的信心。就連React 本身也快速吸收眾人的回饋,快速演進。 我從事Web 前端開發工作已經十年,有幸親身經歷眾多重大的技術變革與范式轉移。我可以負責任也很喜悅地說,作為一門新生技術,React 及其相關工具對于從事Web 開發的人來說,將會產生巨大且革命性的影響。 雖說React 初始是為了解決Facebook 廣告部門在產品開發上遇到的很多實際問題,但實際應用的層面卻非常廣泛。 2015 年Facebook 也開源了ReactNative,讓React 能夠在iOS 移動終端執行(對Android 的平臺支持預計為2015 年年底)。 由于React 的特殊設計,React 消彌了客戶端與服務器端的開發界線。最近的發展則更進一步衍生到Mobile Native App 與其他非傳統Web(HTML+ CSS)的執行環境。 無論你是有多年經驗的開發者,或者是剛入門的新人,此時選擇React 都會是一個很好的選擇。 React 可以解決很多傳統Web 開發架構碰到的艱難問題,同時由于它是一門新生技術,開發者將更有機會掌握一門強大的開發工具,解決更深入的艱難問題并提升產品開發的質量與境地。 由于React 問世不久,相關的出版物并不多。主要的參考數據與文件都在互聯網上。至于中文化的出版物就更難得了。對于有實體文字參考需求的讀者來說,本書很值得參考。 作為一本入門書籍,本書提供基本但足夠的范例與介紹,著重在實際的代碼與操作應用,可以讓讀者快速學習React 的相關知識與技術,并實際打造可執行的程序。相信對于需要使用React 開發的人來說,這將會是一本不錯的入門參考。 必須要補充的是,目前由于React 還在Beta 版本階段,本書的內容主要是以v0.12 為主。目前公開的最新版本為v0.13,書中提到的API 將會略有差異,細節方面可以在它的官方網站上查詢(https://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html)。 Hedger Wang Facebook 資深前端工程師 過去十年曾先后在Yahoo! 與Google 擔任軟件工程師 現就職于Facebook,負責React Native 產品的相關開發工作 推薦序2 組件化一直是前端領域的圣杯。我至今依舊記得自己初次接觸YUI-Ext 時,被其精致的組件和優雅的設計深深震撼的場景。之后隨著ExtJS 的發布,我在很長時間內都癡迷于探索ExtJS 深邃的繼承層次與架構,并由此進入了前端行業。 ExtJS 作為一個企業級框架,借鑒了Java 的Swing 設計,同Java 一樣有著教科書般的學院風格,也同Swing 一樣注定曲高和寡。在快速變化的互聯網領域,ExtJS 猶如一條大船行駛在激流中,每一次調頭都非常艱難。同時代的不少互聯網企業也開源了自己的前端類庫,包括YUI、Closure Library、KISSY、Arale 等,它們同樣有著不錯的組件設計,但思路和ExtJS并無顯著不同,只不過更加輕量化。 傳統組件化的特點是把組件和原生DOM 節點的渲染割裂起來,要么如ExtJS 一樣拋棄原生DOM 節點,要么就在原生DOM 節點渲染后再渲染自定義組件。現代的組件架構鼓勵原生DOM 節點和自定義組件的統一渲染融合,比如React 以及未來的Web Components 規范。 React 最為人稱道的是,它是一個專注于組件架構的類庫。API 很少,理念也很簡單,使用React 可以非常快速地寫出和原生DOM 標簽完美融合的自定義組件(標簽),并且能夠高效渲染。而想要真正使用好React,我們必須跳出以往的思維,擁抱React 的理念和思想,比如狀態、虛擬DOM、組合優于繼承、單向數據流等。React 的簡單抽象和專注,使得React可以更容易與其他各種技術結合。因為React 的簡單抽象,我們終于可以脫離瀏覽器中充滿敵意的DOM 環境,從而使得組件也可以運行在服務器端、Native 客戶端等各種底層平臺。令人驚奇的是,這種抽象泄漏非常少,必要時可以很方便地跳出React 的抽象而直接操縱DOM 等底層平臺。因為React 專注于組件架構,所以模塊系統可以直接采用CommonJS,測試框架可以使用Mocha 或Jasmine 等,生態圈則可以直接依托npm,工具可以采用現成的Browserify 或webpack,我們不必受制于任何單一技術,這非常符合Web 的開放本質。在本書中,作者不僅完整地介紹了React 本身的方方面面,用通俗的語言和簡潔的例子闡述了React 的開發理念,還介紹了一套基于React 以及業界其他優秀技術的最佳實踐,相信讀者在看完本書后能夠快速將其中的知識應用于項目開發。React 目前處于快速發展時期,在本書發行后,又增加了不少吸引人的新特性,加大了和ES6 的進一步整合,從而進一步減少了需要學習的API,大家在看完本書后可以持續關注React 社區的最新發展動態。值得注意的是,業界基于React 的優秀組件與傳統組件相比仍然嚴重不足,這對我們來說是一個很 好的機會——有機會可以向業界發出中國的聲音。積極學習業界的先進技術,未來我們一定能在前端類庫領域創造出讓業界稱贊的東西。 何一鳴(承玉) 螞蟻金服技術專家 前KISSY 核心開發者,現React 愛好者 推薦序3 React 是一種革命性的UI 組件開發思路。 在此之前,我們所見到的JavaScript 框架開發思路幾乎是同質的。框架為開發者提供一套組件庫,業務開發基于組件庫提供的組件來進行就可以了。 而在UI 組件架構里,有幾個特點需要注意:一是越靠近用戶端變化越快,用枚舉組件的思路在高速迭代快速變化的互聯網中開發,將會使UI 組件庫逐漸變得臃腫和難以維護。二是組件開發不再是五六年前那樣一窮二白的初始狀態,現今行業里組件百花齊放,可選面非常廣,即使當下找不到非常匹配的組件,進行自研的成本也不高。三是UI 組件受具體業務場景的約束。 因此,各大互聯網公司在組件上都盡可能地采取自研或統一組織組件庫。而組件庫在公司級別難抽象,對整體技術的挑戰比較大,且收效不確定。于是只能將組件場景定位到更具體的某一類型的業務線再進行抽象。從而讓組件庫變得輕量、靈活。 開發架構的理想態是“同構”。用相同的內部機制與結構將開發變得透明且測試可控。這在React 里表現得很明顯。它的設計非常大膽,一開始就沒有將枚舉組件功能作為重點,而是以“同構”的理想架構為起點——將原本的DOM 操作接管,提出Virtual DOM、單向數據流,用很少的接口覆蓋在組件開發的生命周期上,采取聲明式的語法等。實現了一個純粹的組件“引擎”。 另一方面,React 的思路也可作為連接“異構端”的組件入口。現在,用React + native 就可以實現React- native;用React + canvas 就可以實現一套基于canvas 的高性能的Web UI 組件;最近,我還嘗試了React + WebComponents,將兩者的優勢進行融合。可見,React 的思路為開發創造了非常大的想象空間。 本書內容圍繞示例展開,書中還涵蓋了React 的周邊信息,為讀者提供了較為全面和豐富的React 講解。通過閱讀本書,讀者能夠學會如何將React 運用到實際開發中去。另外,我建議大家不僅要學習React 的應用如何實現組件,更重要的是通過書中的實例理解React 的設計思路。可以預見,React 未來將會影響整個用戶端UI 組件的開發。希望能有更多的人了解React 的開發思路,大家攜手共建React 的組件生態。 劉平川(rank) 現美團網架構師,React 愛好者 前百度FEX 創立者及負責人 前言 React 是什么,為什么要使用它 React 是Facebook 內部的一個JavaScript 類庫,已于2013 年開源,可用于創建Web 用戶交互界面。它引入了一種新的方式來處理瀏覽器DOM。那些需要手動更新DOM、費力地記錄每一個狀態的日子一去不復返了——這種老舊的方式既不具備擴展性,又很難加入新的功能,就算可以,也是冒著很大的風險。React 使用很新穎的方式解決了這些問題。你只需聲明式地定義各個時間點的用戶界面,而無須關心在數據變化時需要更新哪一部分DOM。在任何時間點,React 都能夠以最小的DOM 修改來更新整個應用程序。 本書內容 React 引入了一些激動人心的新概念,向現有的一些最佳實踐發起了挑戰。本書將會帶領你學習這些概念,幫助你理解它們的優勢,創建具備高擴展性的單頁面應用(SPA)。 React 把主要的注意力放在了應用的“視圖” 部分,沒有限定與服務端交互和代碼組織的方式。在本書中,我們將介紹目前的一些最佳實踐及配套工具,幫助你使用React 構建一個完整的應用。 本書面向的讀者 為了更好地掌握本書的內容,你需要有JavaScript 和HTML 相關開發經驗。倘若你做過SPA應用(什么框架不重要,Backbone.js、Angular.js 或者Ember.js 都可以)那更好,但這不是必需的。 源碼和示例 一些來自示例項目問卷制作工具的代碼片段會貫穿在整本書中。你可以在https://github.com/backstopmedia/bleeding-edge-sample-app上找到完整的代碼。 編寫過程 我們把本書當作一本虛擬的電子書編寫,用一到兩個月的時間快速迭代。這種方式有助于創建新鮮及時的內容,而傳統書籍往往無法覆蓋最新的趨勢和技術。 作者 本書由一個團隊編寫而成,這個團隊的成員都是一些經驗豐富且專注于JavaScript 的開發者。 Tom Hallett 是一位高級Ruby 和JavaScript 工程師,在Tout.com 工作(Tout.com 是一個實時視頻平臺,辦公地點在舊金山)。他是jasmine-react 的作者,jasmine-react 是一個開源的類庫,旨在幫助開發者使用測試框架Jasmine 測試React 應用程序。在Twitter(@tommyhallett)和Github(@tommyh)上都可以找到他。他的愛好是打水球,以及與妻子和兒子待在一起。 Richard Feldman 是舊金山教育科技公司NoRedInk 的前端工程師。他是一個函數式編程愛好者,會議發言人,還是seamlessimmutable的作者。seamless-immutable 是一個開源類庫,可以提供不可變的數據結構,向后兼容普通的JavaScript 對象和數組。Richard 在Twitter 和Github 上都叫@rtfeldman。 Simon Højberg 是一個高級UI 工程師,在羅德島普羅維登斯市的Swipely 公司工作。他是普羅維登斯市線下JS 見面會的核心組織者,之前還是波士頓創業學院的JavaScript 講師。他一直在使用JavaScript 開發功能性的用戶界面,也會開發一些像cssarrowplease.com 這樣的業余項目。Simon 的Twitter 是@shojberg。 Karl Mikkelsen 是LockedOn 的一位高級PHP 和JavaScript 工程師,工作是開發外觀漂亮且功能強大的房地產軟件。Karl 對新技術充滿熱情,喜歡學習以不同的方式做事。如果你在網上(http://karlmikko.com)找不到他,那他很可能在和妻子攀巖或者在喝咖啡。 Jon Beebe 在Dave Ramsey 的數字開發團隊里開發應用,專注于一些面向用戶的技術,例如Web 和iOS。在這之前,他開發過PHPWeb 服務,也為Final Cut Pro 和Motion 寫過插件。他以能夠把藝術和代碼結合到一起為樂。他的網名是@bejonbee。他自詡是一個熱衷閱讀的人,喜歡攝影,并且以超出妻子的日常期望為自己的目標。 Frankie Bagnardi 是一位高級前端工程師,為多種不同的客戶端創造用戶體驗。在業余時間里,他會在StackOverflow(FakeRainBrigand)和IRC(GreenJello)上回答問題,或者開發一些小項目。你可以通過f.bagnardi@gmail.com 聯系他。 |
內容簡介:2014 年橫空出世的由Facebook 推出的開源框架React.js,基于Virtual DOM 重新定義了用戶界面的開發方式,徹底革新了大家對前端框架的認識,將PHP 風格的開發方式遷移到客戶端應用開發。其優勢在于可以與各種類庫、框架搭配使用。本書是這一領域的首作,由多位一線專家精心撰寫,采用一個全程實例全面介紹和剖析了React.js 的方方面面,適合廣大前端開發者、設計人員,及所有對未來技術趨勢感興趣者閱讀。 |
目錄:推薦序1 iii 推薦序2 v 推薦序3 vii 前言 ix 第1 章React 簡介 1 背景介紹1 本書概覽3 Component 的創建和復合3 進階4 React 工具5 React 實踐5 第2 章JSX 6 什么是JSX 7 使用JSX 的好處7 更加熟悉7 更加語義化8 更加直觀8 抽象化9 關注點分離9 復合組件10 定義一個自定義組件10 使用動態值11 子節點12 JSX 與HTML 有何不同13 屬性13 條件判斷14 非DOM 屬性15 事件17 注釋18 特殊屬性19 樣式19 沒有JSX 的React 19 創建React 元素20 簡寫21 延伸閱讀及參考引用21 JSX 官方規范22 第3 章組件的生命周期 23 生命周期方法23 實例化23 存在期24 銷毀& 清理期24 實例化24 getDefaultProps 24 getInitialState 25 componentWillMount 25 render 25 componentDidMount 25 存在期26 componentWillReceiveProps 26 shouldComponentUpdate 27 componentWillUpdate 28 componentDidUpdate 28 銷毀& 清理期28 componentWillUnmount 28 反模式:把計算后的值賦給state 28 總結30 第4 章數據流 31 Props 31 PropTypes 33 getDefaultProps 33 State 34 放在state 和props 的各是哪些部分35 總結35 第5 章事件處理 36 綁定事件處理器36 事件和狀態37 根據狀態進行渲染38 更新狀態40 事件對象42 總結43 第6 章組件的復合 44 擴展HTML 44 組件復合的例子45 組裝HTML 45 追蹤狀態47 整合到父組件當中48 父組件、子組件關系50 總結52 第7 章mixin 53 什么是mixin 53 總結56 第8 章DOM 操作 57 訪問受控的DOM 節點57 整合非React 類庫59 侵入式插件61 總結63 第9 章表單 64 無約束的組件65 約束組件66 表單事件68 Label 68 文本框和Select 69 復選框和單選框71 表單元素的name 屬性73 多個表單元素與change 處理器75 自定義表單組件79 Focus 83 可用性83 把要求傳達清楚83 不斷地反饋84 迅速響應84 符合用戶的預期84 可訪問85 減少用戶的輸入85 總結86 第10 章動畫 87 CSS 漸變組87 給漸變class 添加樣式88 漸變生命周期89 使用漸變組的隱患89 間隔渲染89 使用requestAnimationFrame 實現間隔渲染90 使用setTimeout 實現間隔渲染91 總結92 第11 章性能優化 93 shouldComponentUpdate 93 不可變性輔助插件95 深入調查拖慢你應用的部分96 鍵(key) 97 總結98 第12 章服務端渲染 99 渲染函數100 React.renderToString 100 React.renderToStaticMarkup 100 用React.renderToString 還是用React.renderToStaticMarkup 101 服務端組件生命周期102 設計組件102 異步狀態104 同構路由106 單例、實例及上下文107 總結107 第13 章周邊類庫 108 Jest 108 設置109 自動模擬依賴109 手動模擬依賴111 Immutable.js 113 Flux 114 總結115 第14 章開發工具 116 構建工具116 Browserify 117 建立一個Browserify 項目117 對代碼做出修改118 Watchify 119 構建119 Webpack 119 Webpack 與React 120 調試工具122 基礎工具123 總結124 第15 章測試 125 上手125 測試的類型126 工具126 第一個測試用例:render 測試127 模擬組件132 函數監視138 監視函數被調用141 模擬事件146 測試中的組件查找器149 mixin 測試152 直接測試mixin 153 把mixin 包含在虛擬組件中進行測試156 共享行為的用例159 渲染到<body> 中164 服務端測試168 瀏覽器自動化測試174 啟動服務器179 總結180 第16 章架構模式 181 路由182 Backbone.Router 182 Aviator 183 react-router 185 Om (ClojureScript) 186 Flux 187 數據流187 Flux 各個部分188 Dispatcher 188 Action 189 Store 190 控制視圖191 管理多個Store 192 更新Dispatcher 192 注冊依賴行為193 總結194 第17 章其他使用場景 195 桌面應用195 游戲197 電子郵件202 繪圖208 總結210 |
序: |
|