《React狀態管理與同構實戰》
知名技術博主親自執筆 | 眾多專家大咖聯合力薦 | 深入解讀前沿同構技術，帶你駛向全棧工程師的彼岸
侯策 顏海鏡 著
ISBN 978-7-121-34554-8
2018年8月出版
定價：79.00元
332頁
16開
基本介紹
- 書名：React狀態管理與同構實戰
- 作者：侯策、顏海鏡
- ISBN：978-7-121-34554-8
- 頁數：332頁
- 定價：79.00元
- 出版社：電子工業出版社
- 出版時間：2018.8
- 裝幀：平裝
- 開本：16開
編輯推薦
一部顛覆前端歷史的框架。
React的橫空出世顛覆了以往的前端開發方式，本書深入淺出React與Redux相關原理，重點講解前沿同構技術，揭秘SSR實戰要領！
兩位知名技術博主的沉澱。
本書的兩位作者都是前端圈內非常活躍的技術博主，擁有豐富的實戰經驗，經歷近十年的沉澱，將鮮活的經驗通過本書分享給各位讀者！
眾多圈內技術大咖的力薦。
百度公司副總裁沈抖、百度公司資深前端工程師董睿、前端圈知名技術專家阮一峰、狼叔、迷渡（justjavac）、小爝、顧軼靈聯合力薦！
內容提要
React自開源以來，便以革命性的設計理念迅速顛覆了前端開發的傳統意義，其倡導的組件化、狀態管理、虛擬DOM等思想極大提高了前端開發效率。為了更加高效地維護React套用的數據狀態，以Redux為代表的數據管理模式橫空出世。
《React狀態管理與同構實戰》以React技術棧為核心，在介紹React用法的基礎上，從源碼層面分析了Redux思想，同時著重介紹了服務端渲染和同構套用的架構模式。《React狀態管理與同構實戰》中包含許多項目實例，不僅為用戶打開了React技術棧的大門，更能提升讀者對前沿領域的整體認知。《React狀態管理與同構實戰》主要適合具有一定JavaScript基礎的前端工程師，以及對前端開發感興趣的相關從業人員閱讀。
目錄
第1章 React與前端 1
1.1 前端簡史 1
1.2 React是什麼 3
1.3 React家族 4
1.4 本章小結 7
第2章 深入淺出React 8
2.1 組件 8
2.2 組件與系統 11
2.3 神奇的JSX 12
2.4 組件的生命周期 14
2.5 組件的屬性和狀態 17
2.6 組件和事件 22
2.7 組件通信 24
2.8 組件的抽象與復用 32
2.9 命令式與DOM 38
2.10 本章小結 41
第3章 Redux套用架構基礎 42
3.1 Redux究竟是什麼 42
3.2 Redux設計哲學 44
3.3 函式式編程和純函式 48
3.4 Redux基本使用和實踐 51
3.5 Redux開發基礎實例 58
3.6 reducer編寫關鍵：不可變性 62
3.7 Redux中間件和異步 73
3.8 Redux與React 78
3.9 實現計數器的四種方式 85
3.10 完成一個工程化實例 98
3.11 本章小結 113
第4章 深入理解Redux 114
4.1 Redux源碼探索——store的實現 114
4.2 Redux源碼探索——combineReducers的實現 118
4.3 dispatch的改造——實現記錄日誌 121
4.4 dispatch的改造——識別Promise 124
4.5 糅合多種dispatch 126
4.6 Redux源碼探索——中間件的秘密 131
4.7 再談Redux設計思想 136
4.8 react-redux究竟是什麼 142
4.9 本章小結 145
第5章 揭秘React同構套用 146
5.1 前後端架構設計和服務端渲染概念 146
5.2 同構套用 150
5.3 使用React和Redux實現同構套用 152
5.4 React 16在服務端渲染上的驚喜 157
5.5 同構項目實戰：基於Node.js的“漸進式”流渲染 158
5.6 使用Next.js實現同構套用 168
5.7 使用Next.js實現同構套用 172
5.8 本章小結 173
第6章 深入理解React技術內幕與生態社區 184
6.1 React組件的組合和復用——高階組件 184
6.2 高階組件和render prop 193
6.3 React組件的組合和復用——Function as Child Component 198
6.4 React組件的組合和復用——Children API 203
6.5 React“輪子”是怎樣設計的 209
6.6 setState異步帶來的討論和思考 216
6.7 React組件和React element到底是什麼 221
6.8 實現一個簡易的React庫 227
6.9 引入Redux的必要性及利弊 239
6.10 如何設計並套用Redux connect 243
6.11 使用selector實現最佳實踐 248
6.12 Redux store數據結構扁平化及在Twitter中的實踐 255
6.13 React state和Redux state的選取原則 266
6.14 本章小結 267
第7章 單頁面套用代碼分割 269
7.1 React和代碼分割 269
7.2 Redux reducer層面代碼分割 278
7.3 代碼分割工程實例 283
7.4 本章小結 288
第8章 React套用性能最佳化 289
8.1 React套用性能的秘密 289
8.2 提升React套用性能的建議 295
8.3 使用PureComponent保證開發性能 302
8.4 Redux中間件和Web Worker 308
8.5 本章小結 311
精彩節摘
推薦序1
在前端開發這樣一個重視界面開發的領域中，組件化幾乎是“真理”。但是不同場景下的組件化，以及不同人眼中的組件化，可能很不一樣。
我見過許多不同的組件形態，有ExtJS 這種高度封裝的富組件、jQuery UI 這種與頁面DOM 強相關的組件、Bootstrap 這種重樣式輕行為的組件，以及各種不知名的公司團隊自研的組件等。
但是從來沒有一個組件框架能夠像React 一樣受到那么多的關注，被那么多的開發者談論，它在很大程度上改變了前端開發方式。
毫無疑問，React 是成功的。為什麼這么說呢？也許是因為它的組件模型足夠簡單、易於理解；也許是因為它允許開發者把視圖寫在JSX 中；也許是因為它為很多前端工程師帶來了如JSX、V-DOM、Flux、immutable、HOC、Fiber 等新的理念（雖然有些理念不是它創造的）；也許是因為它對同構的支持；也許是因為React Native；也許，因為以上全部。
但無論如何，這些理由都不重要。我看到的是，在我的周圍，無論是否使用React，大家都在談論和學習它，在進行框架選型的時候，它都是無法迴避的選項之一。
我們平時在開發項目時，框架選型僅僅是一個開始，真正考驗工程師能力的是如何在選定框架的理念及用法下，駕馭越來越高的業務複雜度。React 的上手難度並不小。我們需要對其理念和設計思想有足夠深入的了解，結合自身的業務判斷哪些是真正有用的，從而不陷入過度設計中。我們需要對其實現原理有足夠深入的了解，避免陷入性能的瓶頸。
在這本《React 狀態管理與同構實戰》中，作者對設計思想、框架實現、套用實踐都進行了較多的剖析，相信讀者一定能夠通過學習，快速將本書中的知識套用到項目開發中。
而我更希望看到的是，讀者閱讀過後能夠在套用層面進行更深入的思考。比如，什麼東西是應該作為套用狀態被管理的，在什麼樣的場景下應該使用怎樣的組件間通信模式，在相同的套用場景下如果不用Redux 而使用MobX，應該怎么實現……將這些思考融會貫通，而不再依賴一本書，這才是真的收穫。
董睿
百度資深前端工程師、EFE 核心成員、San 框架主要開發者
2018 年6 月於北京
推薦序2
1995 年，Brendan Eich 花了10 天時間開發出一門腳本語言，取名為Mocha，並將其集成到了Netscape 瀏覽器中，不久後這門語言被改名為LiveScript，意思是可以讓網頁充滿動力。同年年底，網景公司和SUN 公司達成協定並獲得了Java 商標的使用權，於是正式將這門語言更名為JavaScript。
歷史選擇了JavaScript，使其成為目前瀏覽器唯一內置支持的語言。時至今日，JavaScript已經不僅僅局限於為網頁開發實現特效，而是真正發展成了一門全功能的程式語言。
我從2005 年開始接觸網頁開發，經歷了Web 開發的“上古時代”。在Web 1.0 時期，我們開發出來的網頁是給人“看”的，此時流行jQuery 這種用來處理瀏覽器兼容性的庫，以及像Dojo、YUI、ExtJS 這種用來做UI 的庫。
隨著計算機和瀏覽器性能的提升，JavaScript 的功能開始不再局限於實現簡單的網頁開發，特別是Ajax 的使用更是顯著提升了用戶體驗，這個時期被稱為Web 2.0。站在開發者和使用者的角度，在Web 2.0 時期開發出來的網頁是給人“用”的。此時的JavaScript 程式無論是從代碼數量還是代碼複雜程度上，都是前所未有的。於是開發者們開始借鑑後端流行的MVC 框架的思想，隨後又根據前端自身的特點改進了傳統MVC 模式，並發展出了MVP、MVVM 等新架構，其中比較有代表性的有Knockout.js、Backbone.js、Ember.js 等。
後來，React 發布了，自那時起我成為一名堅定的React 使用者。React 不僅僅是一個全新的框架，更是一種新的思想。React 重新定義了前端View 層的開發模式：v = f(s)，其中s代表引用的狀態（state），v 代表View，而f 則是一個把狀態映射為View 的純函式。這個簡單的公式代表了前端開發的一種模式：View 就是對狀態的展示，對於同一個f 而言，相同的狀態永遠對應相同的視圖。
React 就是這裡的f，React 生態的不同庫則代表著不同的f，比如react-native、react-art、react-canvas、react-svg 等。
當我們寫<TextBox color="red">時，它既可以被react-dom 渲染為一個div 標籤，也可以在伺服器端被渲染為一個字元串，還可以被react-native 渲染為原生的控制項，甚至可以被渲染為Word 中的一行文本、Excel 中的一個表格等。而這一切的魔法就源自React 的思想。
但是React 只是一個專注於View 層的框架，它只負責把狀態映射為視圖，並不關注狀態的來源和轉換，因此在實際開發中，我們還需要關注“React 全家桶”中的Redux。另外，同構套用可以讓開發者只編寫一套代碼便可以既運行在服務端，又運行在客戶端，充分結合兩者的優勢，並有效避免兩者的不足。這也是React 的一大優勢。
雖然市面上關於React 的書已經數不勝數，但是大多都是圍繞著React 框架本身的使用方法來講解的，對於深入講解React 狀態管理與同構套用的書卻寥寥無幾，而侯策和顏海鏡的這本書正好可以彌補這一方面的不足。
幾年前，由於機緣巧合，我認識了本書的作者之一顏海鏡。顏海鏡不僅是開源的狂熱愛好者，也是國內最早學習並實踐React 的開發者之一。從我認識他起，他就一直在關注各種前端新技術，並開源了很多前端開發工具和庫，這一點真的非常難能可貴！
如果你想實戰React 同構套用，或者想要深入全面地了解有關React 狀態管理的知識，相信這本《React 狀態管理與同構實戰》一定會給你很多啟發。強烈建議各位讀者細細品讀。
迷渡（justjavac）
Flarum 中文社區創始人
2018 年6 月於天津
作者簡介
侯策。碩士畢業於法國國立高等電信學校。曾任職於BePATIENT集團，負責網際網路+醫療平台的研發。曾任職於法國能源和蘇伊士集團，參與歐洲天然氣運輸和費用系統的研發。2015年回國加入百度知識搜尋部，負責多個產品線的大型技術疊代。行業之外是一名國家二級運動員（足球項目），曾組織過赴北非撒哈拉地區看望孤兒等慈善活動。
顏海鏡。知名技術博主，開源達人，常以歪脖無臉男形象作為頭像活躍於各大技術網站，經過多年沉澱，專注Web前端開發，先後任職於金山、百度、美團點評，負責前端開發工作。
媒體評論
世界的數位化進程正在加速，我們也進入了體驗至上的新移動時代。在連線人和信息世界的所有技術中，前端開發作為直接影響用戶體驗的關鍵一環，正在迅速發展和變革，前端工程師也成為產品研發團隊里非常關鍵的拼圖之一，決定了產品疊代的成敗。本書以React為中心，在講解相關技術棧的同時，深刻剖析了隱藏在其後的編程思想，希望更多的開發者能夠以這本書為起點，深入把握前端開發技術，活學活用，打造較好的用戶體驗，為新移動時代創造更多優秀的產品。
百度公司副總裁，沈抖
本書針對React進行了專題研究，其中還包含Redux用法的詳細介紹、源碼解讀、中間件的實現原理，以及前後端同構的解決方案（即伺服器渲染）等內容，非常適合初學者進階學習React的相關知識，掌握實戰技能。建議各位讀者按照源碼上機練習，以達到更好的學習效果。
資深JavaScript語言專家、知名技術部落格作者，阮一峰
很高興能夠看到這本書，它系統講解了Redux和同構技術，是一本在垂直領域中非常優秀的專業書籍，從入門到組件通信，再到源碼，都給出了非常詳細的解讀。本書簡明扼要，重視實踐，尤其適合初學者。學會Redux可以讓你在前端開發中更加遊刃有餘，同構開發對於拓寬前端開發領域也有著極其重要的意義，建議大家深入學習。
Node.js布道者、Cnode社區管理員，狼叔（i5ting）
React以及Redux是目前非常流行的技術棧，本書深入React技術，涉及React的方方面面內容，從入門到高階實例，從狀態管理到同構套用技巧，無論是在技術實現原理上，還是在實戰經驗上，都能幫助讀者對React形成全貌理解。無論你是React新手還是資深工程師，相信都能從本書中獲得啟發。
新浪移動前端技術專家，付強（小爝）
本書由淺入深，從React涉及的基本概念開始不斷延伸，不僅分場景覆蓋了以React、Redux、Next.js等為核心的組件化開發流程及工程最佳化策略，還深入源碼解讀了技術細節，並通過對設計思路的闡述來幫助讀者增強系統性的理解和認知。相信本書可以幫助廣大開發者更好地掌握React體系的精髓，創造出體驗更佳的產品。
百度資深前端工程師、知乎知名博主，顧軼靈
前言
序1
一本書的誕生，可以說既是偶然，也是冥冥之中的必然。
當電子工業出版社的孫奇俏編輯第一次聯繫我向我約稿的時候，恰逢2017年穀雨時節，雨生百穀，萬物蓬勃，破土向生。於我個人而言，那段時間正是我回國加入百度，需要迅速積累技術經驗的階段，於是我便無知無畏地開始了近一年的寫作旅程。
當我在尋找選題時，毫不猶豫地將目光聚焦到了前端開發方向。我相信每位開發者都能清醒地意識到：這個領域既收穫著發展，也迎接著淘汰；它既有著與生俱來的混亂，也有著與這種混亂抗衡的秩序；它既批量產生需求與疊代，也製造了同等規模的迷茫與困惑。沒錯，短短几年時間，前端開發者就脫離了“刀耕火種”的原始時期。
伴隨著JavaScript語言的不斷演進，Node.js強勢崛起，HTML 5等技術攻城略地，巨大的信息量和學習成本如潮水般湧來。然而，發展的“副作用”是讓開發者感受到前所未有的陌生：一切都在加速向前，自己卻只能目瞪口呆。但我想，每個人都不甘心做一個原地踏步的旁觀者。
這本書的誕生，和試圖掙脫這種無力感有關。因此我選取了這場前端“工業革命”中最具代表性的潮頭寵兒——React。以React技術棧為主題，將自己學習過程中所見所感的點滴片段用一根主線串起來，不斷拓寬思考的邊界，吸納社區智慧進行深度剖析。我想從最初的那些困惑出發，用解讀源碼、分析設計模式、結合實戰案例的方式，探究框架或技術棧“全家桶”的設計思路以及存在意義；探究何為曇花一現的技術趨勢，何為永恆持久的思想價值；探究怎樣增加對技術的掌控，以避免在快速發展的風暴中隨波逐流……
React絕不僅僅是一個靈活、高效的視圖層開發庫。截至本書寫作之時，v16.4.1版本共有20個分支，其代碼倉庫中有近1萬次commits，94次發布的背後是1193名貢獻者的付出，還有102694個stars和18568個forks，這些數字構建起了一個龐大的技術社區，其背後蘊含了海量的優秀設計思想。
在這本書的整個寫作過程中，我也再一次感受到了以React為中心的狀態管理及同構套用的魔力——我體會到了組件化和傳統視圖層開發的巨大區別，體會到了數據驅動和麵條式操作DOM的不同，體會到了虛擬DOM和性能最佳化的奧秘，體會到了狀態管理背後的精妙設計，體會到了Redux是發布訂閱模式和函式式的結晶，體會到了同構套用和服務端渲染的背後是架構設計的螺旋式變遷，是對用戶體驗和性能的不斷打磨和孜孜追求。總之，我體會到了為什麼React技術棧能夠脫穎而出，因此也真心希望這本書能夠對各位讀者有所啟迪。
回想起來，本書大部分內容是在北京完成的：起筆於仲夏，經歷過“帝都”霧霾瀰漫的冬季，完成於如今農曆五月初五的端午佳節。那么索性就以屈原《離騷》中的詩句來結尾吧，與讀者共勉。
願我們對技術永遠秉承“亦余心之所善兮，雖九死其猶未悔”的追求，以及“路漫漫其修遠兮，吾將上下而求索”的態度。
侯策
2018年6月於北京
序2
人生需要勇氣
人類的每一次進步，技術的每一次發展，都源自對未知世界的探索，探索讓我們發現了更大的世界。有人說探索需要好奇心，有人說探索需要想像力，而我覺得，探索最需要的是勇氣，面對未知，只有勇敢的人才能邁出第一步。
在前端的世界裡從來不缺乏有勇氣的人，這些勇士們引領著前端技術的不斷變革，技術更新了一代又一代，從以jQuery為代表的操作DOM時代，到以Backbone為代表的MVC框架時代，到以AngularJS為代表的MVVM框架時代，再到以React為代表的前端技術的新一代，前端領域發展空前繁榮，頗有百家爭鳴、百花齊放的局面，而這一切都源自各位開發者的勇氣。
如果你對上面提到的名詞不了解，或者對當前火熱的技術感覺迷茫，沒關係，不要擔心。其實人的天性就是依賴熟悉的環境，我也曾害怕恐懼，也曾對新技術畏首畏尾，但幸運的是，我突破了自己——曾經陌生的名詞，如今都被我駕馭得很好，是勇氣給了我力量！
關於我和React的故事，要感謝本書的另一位作者——侯策。他是我最志同道合的同事和朋友，他也是一位非常優秀的勇士。他最先研究React，並給我介紹了很多與React相關的知識，我們共同探討，最開始我們僅僅是基於React做一些比較小的內部系統，現在React已經變成主要的技術棧了，極大提高了我的工作效率。關於我對React的理解，你可以通過閱讀本書的內容來了解，因為我已經把我的想法總結好，融入書里了。
關於我和這本書的故事，還是要感謝侯策。你之所以能看到這本書，是因為他是一位勇氣值爆棚的真正勇士。最開始侯策和我說要寫一本書的時候，我是拒絕的，雖然我寫了很多部落格文章，也閱讀了很多書籍，但我從來沒有寫過書，面對未知我有點猶豫，但是最後我還是決定要試一試，因為這次幫我戰勝未知的，除了勇氣還有友誼。感謝勇氣和友誼，讓我又一次挑戰了自己。
寫書和寫部落格還是有很大差別的，整個寫作過程是一個挑戰和突破的過程，因此書中難免有紕漏，也歡迎大家批評斧正。如果說，面對未知時是勇氣讓我們邁出了第一步，那么接下來靠的就是堅持了。做任何事情，都是重在開始，貴在堅持。
顏海鏡
2018年6月於北京
前言
本書內容
本書以React技術棧為核心，在介紹React用法的基礎上，從源碼層面分析了Redux思想，同時著重介紹了服務端渲染和同構套用的架構模式。全書共分8章，其中每一章的主要內容如下。
第1章 React與前端
本章簡單介紹了前端開發的歷史發展，以及React的誕生故事，並對本書後面章節要介紹的知識進行了簡單概述。
第2章 深入淺出React
本章圍繞組件介紹了很多React相關知識，包括組件的實現方式、組件的抽象、JSX語法、組件的生命周期、組件的屬性和狀態、如何進行事件互動、組件間如何通信、如何組織組件、組件與DOM的關係等。
第3章 Redux套用架構基礎
本章介紹了Redux基礎及用法，包括reducer函式的編寫、派發action的設計，以及store狀態的更新流程等。在此基礎上，還介紹了一個極為重要的概念——函式式編程。本章在數據的不可變性操作上進行了較為深入的實踐。同時因為套用開發需求複雜，對於異步處理場景，本章也介紹了Redux中間件的使用方法。
第4章 深入理解Redux
本章深入剖析了Redux源碼及本質，細緻講解了Redux原理，介紹了其實現思想、中間件的設計思想、react-redux庫的奧秘，以及在實際開發中的一些最佳實踐，幫助讀者對Redux有一個更高層面的認知。
第5章 揭秘React同構套用
本章介紹了基於React開發同構套用的技術實現。前後端的合作和分工、模式的變遷和不同模式的優缺點，將會是一個永恆的話題。React為同構套用打開了一扇窗戶。在React同構設計以及Node.js迅速發展的背景下，前端開發完全可以擁有更廣闊的空間。
第6章 深入理解React技術內幕與生態社區
本章對React及Redux中的熱點話題進行了探索，介紹了React設計理念和魔法、React組件的組合和復用、React“輪子”開發、簡單的React庫編寫、Redux數據結構最佳化和角色分析等內容。結合社區中的優秀思想，希望在讀者受到啟發的同時，也打開一扇React進階的大門。
第7章 單頁面套用代碼分割
本章深入討論了React技術中的代碼分割問題。代碼分割不僅僅關係到性能最佳化，它更是一種技術工程設計的體現，直接影響用戶體驗。本章圍繞這個主題進行了梳理與總結，並通過一個單頁面套用實例進行了演示。
第8章 React套用性能最佳化
性能涉及方方面面，如前端工程化、瀏覽器解析和渲染、比較算法等。本章主要介紹了React框架在性能上的優劣、虛擬的DOM思想，以及在開發React套用時需要注意的性能最佳化環節和手段。同時，最佳化手段也在與時俱進，不斷更新，需要開發者時刻保持學習。
