React狀態管理與同構實戰（簡體書）

React自開源以來，便以革命性的設計理念迅速顛覆了前端開發的傳統意義，其倡導的組件化、狀態管理、虛擬DOM等思想極大提高了前端開發效率。為了更加高效地維護React應用的數據狀態，以Redux為代表的數據管理模式橫空出世。本書以React技術棧為核心，在介紹React用法的基礎上，從源碼層面分析了Redux思想，同時著重介紹了服務端渲染和同構應用的架構模式。書中包含許多項目實例，不僅為用戶打開了React技術棧的大門，更能提升讀者對前沿領域的整體認知。本書主要適合具有一定JavaScript基礎的前端工程師，以及對前端開發感興趣的相關從業人員閱讀。

侯策。碩士畢業于法國國立高等電信學校。曾任職於BePATIENT集團，負責互聯網+醫療平臺的研發。曾任職於法國能源和蘇伊士集團，參與歐洲天然氣運輸和費用系統的研發。2015年回國加入百度知識搜索部，負責多個產品線的大型技術迭代。行業之外是一名國家二級運動員（足球項目），曾組織過赴北非撒哈拉地區看望孤兒等慈善活動。
顏海鏡。知名技術博主，開源達人，常以歪脖無臉男形象作為頭像活躍於各大技術網站，經過多年沉澱，專注Web前端開發，先後任職於金山、百度、美團點評，負責前端開發工作。

序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的理解，你可以通過閱讀本書的內容來瞭解，因為我已經把我的想法總結好，融入書裡了。
關於我和這本書的故事，還是要感謝侯策。你之所以能看到這本書，是因為他是一位勇氣值爆棚的真正勇士。最開始侯策和我說要寫一本書的時候，我是拒絕的，雖然我寫了很多博客文章，也閱讀了很多書籍，但我從來沒有寫過書，面對未知我有點猶豫，但是最後我還是決定要試一試，因為這次幫我戰勝未知的，除了勇氣還有友誼。感謝勇氣和友誼，讓我又一次挑戰了自己，也歡迎大家關注我的博客（yanhaijing.com），那裡有更多關於我的故事。
寫書和寫博客還是有很大差別的，整個寫作過程是一個挑戰和突破的過程，因此書中難免有紕漏，也歡迎大家批評斧正。如果說，面對未知時是勇氣讓我們邁出了第一步，那麼接下來靠的就是堅持了。做任何事情，都是重在開始，貴在堅持。
顏海鏡
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應用時需要注意的性能優化環節和手段。同時，優化手段也在與時俱進，不斷更新，需要開發者時刻保持學習。

第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