本書的主要內(nèi)容有:深入理解React的核心原理和工作機(jī)制。學(xué)會(huì)編寫高質(zhì)量的React應(yīng)用并掌握持續(xù)優(yōu)化的方法。掌握構(gòu)建高可用、可擴(kuò)展React應(yīng)用的關(guān)鍵技巧。靈活運(yùn)用React高級(jí)功能,例如reducers、state和refs等。
編輯推薦
React通過(guò)聲明式抽象構(gòu)建Web應(yīng)用,為開(kāi)發(fā)者提供卓越的開(kāi)發(fā)體驗(yàn)。本書將幫助你深入理解React的核心概念,包括JSX語(yǔ)法及其高級(jí)設(shè)計(jì)模式、虛擬DOM、React協(xié)調(diào)機(jī)制以及性能優(yōu)化等關(guān)鍵技術(shù)。掌握這些知識(shí)后,你將能夠更加高效地構(gòu)建高質(zhì)量的Web 應(yīng)用。
本書的作者以通俗易懂的語(yǔ)言講解React的底層原理,摒棄晦澀難懂的術(shù)語(yǔ),讓你更輕松地理解其運(yùn)行機(jī)制。通過(guò)剖析React的細(xì)節(jié)和架構(gòu),你將掌握靈活操控React代碼的能力,從而達(dá)到全新的高度。
專家推薦
Carl Sagan說(shuō),你必須先了解過(guò)去,才能理解當(dāng)下。在本書中,Tejas帶領(lǐng)我們回顧了React的前世今生,在我看來(lái),這本書正是Tejas在前端領(lǐng)域?qū)@一理念的完美踐行,他帶領(lǐng)我們回顧React的發(fā)展歷程,讓讀者深入理解其歷史脈絡(luò)。
他細(xì)致入微地剖析了協(xié)調(diào)和Fiber等核心概念。如果你渴望深入理解React及其不斷演進(jìn)的生態(tài),那么這本書絕對(duì)不容錯(cuò)過(guò)。
Matheus Albuquerque Brasil
Google Web技術(shù)專家
前言本書并不適用想要學(xué)習(xí)如何使用React 的讀者。如果你對(duì)React 還不熟悉,并希望找到一份入門教程,可以從react.dev 上的React 官方文檔開(kāi)始。相反,本書是為那些由好奇心驅(qū)使的人而寫,他們并不滿足于了解如何使用React,而是更想弄清楚React 的工作原理。在本書中,我們將深入探討多個(gè)React 的核心概念,理解其底層機(jī)制,并探索這些機(jī)制是如何協(xié)同工作的,使我們能夠更加高效地開(kāi)發(fā)React 應(yīng)用。通過(guò)探究React 的內(nèi)部原理,我們將建立一套清晰的思維模型,使我們能夠更加準(zhǔn)確地理解React 及其生態(tài)系統(tǒng)。本書假設(shè)讀者已經(jīng)具備以下基礎(chǔ)知識(shí):瀏覽器渲染網(wǎng)頁(yè)的基本原理。網(wǎng)頁(yè)是由CSS 樣式化的HTML 文檔,并通過(guò)JavaScript 實(shí)現(xiàn)交互性。此外,本書還假設(shè)讀者對(duì)React 有一定的了解,并且曾經(jīng)開(kāi)發(fā)過(guò)一兩個(gè)React 應(yīng)用,最好其中一些應(yīng)用已經(jīng)投入生產(chǎn)環(huán)境使用。我們將從React 的概述及其發(fā)展歷史入手,回顧2013 年它以開(kāi)源軟件的形式首次發(fā)布的背景。隨后,我們將深入剖析React 的核心概念,包括組件模型、虛擬DOM 和協(xié)調(diào)(reconciliation)機(jī)制。接著,我們會(huì)探討JSX 的編譯原理,并深入解析React 的Fiber 架構(gòu),理解其并發(fā)編程模型。通過(guò)這些內(nèi)容,我們將掌握一些關(guān)鍵技巧,比如更高效地進(jìn)行記憶化,以及使用諸如React.memo和useTransition 這樣的強(qiáng)大原語(yǔ),延遲渲染不必要的計(jì)算任務(wù)。本書的后半部分,我們將深入探討React 框架:了解它們所要解決的問(wèn)題,以及它們是如何解決這些問(wèn)題的。為了更好地理解這些機(jī)制。我們將親手編寫一個(gè)框架,聚焦于Web 應(yīng)用繞不開(kāi)的三個(gè)關(guān)鍵問(wèn)題:服務(wù)端渲染、路由和數(shù)據(jù)獲取。當(dāng)親手解決了這些問(wèn)題后,我們會(huì)更加直觀和透徹地感受現(xiàn)有框架解決它們的思路。此外,我們還將深入研究React 服務(wù)端組件(RSC)和服務(wù)端操作(server actions),并探討下一代前端工具鏈,例如打包工具(bundlers)和同構(gòu)路由(isomorphic routers)等。最后,我們將視角從React 拓展到更廣闊的前端生態(tài),探討Vue、Solid、Angular、Qwik 等競(jìng)品。我們將重點(diǎn)探索信號(hào)(Signal)及其細(xì)粒度響應(yīng)式(fine-grained reactivity),并和React 更粗粒度的響應(yīng)式模型進(jìn)行對(duì)比。此外,我們還會(huì)探討React 對(duì)信號(hào)機(jī)制的回應(yīng):Forget 工具鏈,以及它在與信號(hào)機(jī)制對(duì)比中的表現(xiàn)。本書內(nèi)容豐富,值得深入探究,所以不浪費(fèi)時(shí)間了,讓我們開(kāi)始吧!本書中的約定本書采用以下排版約定:斜體(Italic)用于表示新術(shù)語(yǔ)、網(wǎng)址(URL)、電子郵件地址、文件名和文件擴(kuò)展名。等寬字體(Constant width)用于代碼示例,以及在正文中引用的程序元素,例如變量、函數(shù)名、數(shù)據(jù)庫(kù)名稱、數(shù)據(jù)類型、環(huán)境變量、語(yǔ)句和關(guān)鍵字等。等寬加粗字體和淺灰色文本(Constant width bold and light gray text)僅用于印刷版第10 章,用于在代碼塊中突出代碼差異。OReilly 在線學(xué)習(xí)平臺(tái)(OReilly Online Learning)近40 年來(lái),OReilly Media 致力于提供技術(shù)和商業(yè)培訓(xùn)、知識(shí)和卓越見(jiàn)解,來(lái)幫助眾多公司取得成功。公司獨(dú)有的專家和改革創(chuàng)新者網(wǎng)絡(luò)通過(guò)OReilly 書籍、文章以及在線學(xué)習(xí)平臺(tái),分享他們的專業(yè)知識(shí)和實(shí)踐經(jīng)驗(yàn)。OReilly 在線學(xué)習(xí)平臺(tái)按照您的需要提供實(shí)時(shí)培訓(xùn)課程、深入學(xué)習(xí)渠道、交互式編程環(huán)境以及來(lái)自O(shè)Reilly 和其他200 多家出版商的大量書籍與視頻資料。更多信息,請(qǐng)?jiān)L問(wèn)網(wǎng)站:https://www.oreilly.com/。聯(lián)系我們?nèi)魏斡嘘P(guān)本書的意見(jiàn)或疑問(wèn),請(qǐng)按照以下地址聯(lián)系出版社。美國(guó):OReilly Media, Inc.1005 Gravenstein Highway NorthSebastopol, CA 95472中國(guó):北京市西城區(qū)西直門南大街2 號(hào)成銘大廈C 座807 室(100035)奧萊利技術(shù)咨詢(北京)有限公司本書有專門的網(wǎng)頁(yè),其中列出了勘誤信息、示例代碼及其他相關(guān)資料,可以訪問(wèn)以下鏈接獲取更多信息:https://oreil.ly/fluent-react。對(duì)本書中文版的有任何建議可以發(fā)電子郵件到errata@oreilly.com.cn。欲了解本社圖書和課程的新聞和信息,請(qǐng)?jiān)L問(wèn)我們的網(wǎng)站http://oreilly.com。我們的Facebook:http://facebook.com/oreilly。我們的Twitter:http://twitter.com/oreillymedia。我們的YouTube:https://youtube.com/oreillymedia。致謝這是我人生中撰寫的第一本書,而我并非孤軍奮戰(zhàn),對(duì)此我無(wú)比感激。你即將閱讀的內(nèi)容,凝聚了許多才華橫溢之人的智慧和努力。正是他們的付出,才讓這本書得以問(wèn)世。在此,我衷心感謝他們?yōu)楸緯龀龅呢暙I(xiàn)。請(qǐng)不要跳過(guò)這一部分,因?yàn)檫@些人值得你的關(guān)注和感激。首先,我要感謝直接幫助我完成本書的人:? 首先要感謝我的妻子Lea。寫這本書占據(jù)了我大量時(shí)間,犧牲了本該與家人共度的時(shí)光。由于我對(duì)這個(gè)主題充滿熱情,并希望將其分享給大家,這本書甚至占用了部分假期和原本可以與妻子相處的機(jī)會(huì)。然而,Lea 始終給予我無(wú)限的支持和鼓勵(lì),我對(duì)此滿懷感激。? 本書的開(kāi)發(fā)編輯Shira Evans,來(lái)自O(shè)Reilly 的Shira 是一位非常棒的合作伙伴,她始終支持、鼓勵(lì)并理解我,即使在面對(duì)諸多延誤時(shí)仍不放棄。由于React 生態(tài)持續(xù)演進(jìn),例如Forget 和服務(wù)端操作的引入,我們需要不斷調(diào)整內(nèi)容,而Shira 始終耐心陪伴、支持著我。對(duì)此,我感激不盡。? 我的良師益友Kent C. Dodds(@kentcdodds),他不僅在本書之外給予我長(zhǎng)期的指導(dǎo),還為本書撰寫了序言。多年來(lái),Kent 一直是我值得信賴的朋友和導(dǎo)師,我由衷感謝他一直以來(lái)的支持和鼓勵(lì)。? 審閱團(tuán)隊(duì)。如果沒(méi)有這些審閱人員的細(xì)致入微與專業(yè)精神,這本書絕不可能完成。他們與我并肩作戰(zhàn),傾注了大量心血,我在此深表謝意:─ Adam Rackis (@adamrackis)─ Daniel Afonso (@danieljcafonso)─ Fabien Bernard (@fabien0102)─ Kent C. Dodds (@kentcdodds)─ Mark Erikson (@acemarke)─ Lenz Weber-Tronic (@phry)─ Rick Hanlon II (@rickhanlonii)─ Sergeii Kirianov (@SergiiKirianov)─ Matheus Albuquerque (@ythecombinator)? Meta(原Facebook)的React 團(tuán)隊(duì),感謝他們不懈推動(dòng)React 的發(fā)展,不斷突破技術(shù)邊界,以卓越的工程能力和創(chuàng)新思維,讓React 變得更加強(qiáng)大且易用。特別感謝Dan Abramov(@dan_abramov),他不僅耐心向我講解了打包工具在React 服務(wù)端組件架構(gòu)中的作用,還貢獻(xiàn)了第9 章關(guān)于React服務(wù)端組件的重要內(nèi)容。最后,我要感謝你,作為讀者,愿意閱讀這本書并對(duì)其內(nèi)容產(chǎn)生興趣。我希望你在閱讀過(guò)程中收獲滿滿,就像我在寫作這本書時(shí)所感受到的喜悅與成長(zhǎng)。
Tejas Kumar自2014年起開(kāi)始編寫React代碼,并在多個(gè)會(huì)議、研討會(huì)和客座講座中分享相關(guān)知識(shí)。他在多家初創(chuàng)企業(yè)中積累了豐富的技術(shù)經(jīng)驗(yàn),并對(duì)React的核心概念有著深刻的理解。他熱衷于React布道,樂(lè)于幫助他人掌握React的開(kāi)發(fā)技巧,賦能他們流暢地構(gòu)建React應(yīng)用。
目錄
序 1
前言 3
第1 章 基礎(chǔ)知識(shí) 9
1.1 為什么React 會(huì)誕生9
1.2 React 誕生之前 10
1.2.1 jQuery 20
1.2.2 Backbone .23
1.2.3 KnockoutJS 30
1.2.4 AngularJS 35
1.3 進(jìn)入React 時(shí)代 .40
1.3.1 React 的價(jià)值主張 42
1.3.2 React 的發(fā)布 .48
1.3.3 Flux 架構(gòu) .49
1.3.4 Flux 架構(gòu)的優(yōu)勢(shì) .51
1.4 總結(jié):為什么React 如此流行 52
1.5 本章小結(jié)53
1.6 回顧問(wèn)題53
1.7 接下來(lái)的內(nèi)容 .53
第2 章 JSX .55
2.1 JavaScript XML .55
2.2 JSX 的優(yōu)點(diǎn) 58
2.3 JSX 的缺點(diǎn) 59
2.4 深入解析60
2.4.1 代碼是如何工作的 .61
2.4.2 使用JSX 擴(kuò)展JavaScript 語(yǔ)法 .65
2.5 JSX 編譯指示 .67
2.6 表達(dá)式 68
2.7 本章小結(jié)69
2.8 回顧問(wèn)題69
2.9 接下來(lái)的內(nèi)容 .69
第3 章 虛擬DOM .71
3.1 虛擬DOM 概述 .71
3.2 真實(shí)DOM 73
3.2.1 操作真實(shí)DOM 的風(fēng)險(xiǎn) 78
3.2.2 文檔片段 .87
3.3 虛擬DOM 的工作原理 89
3.3.1 React 元素 89
3.3.2 虛擬DOM vs 真實(shí)DOM 94
3.3.3 高效更新 .97
3.4 本章小結(jié)99
3.5 回顧問(wèn)題.100
3.6 接下來(lái)的內(nèi)容 101
第4 章 深入解析協(xié)調(diào)過(guò)程 103
4.1 理解協(xié)調(diào)過(guò)程 103
4.2 批量更新.106
4.3 先例 107
4.4 Fiber 協(xié)調(diào)器 . 111
4.4.1 Fiber 數(shù)據(jù)結(jié)構(gòu) 111
4.4.2 雙緩沖 114
4.4.3 Fiber 協(xié)調(diào) . 115
4.5 本章小結(jié).122
4.6 回顧問(wèn)題.122
4.7 接下來(lái)的內(nèi)容 123
第5 章 常見(jiàn)問(wèn)題與有效的模式 . 125
5.1 使用React.memo 實(shí)現(xiàn)記憶化 .125
5.1.1 React.memo .129
5.1.2 記憶化的組件仍會(huì)重新渲染 130
5.1.3 這是一種指導(dǎo)原則,而非規(guī)則 134
5.2 使用useMemo 進(jìn)行記憶化140
5.2.1 使用useMemo 的注意事項(xiàng) .142
5.2.2 忘記一切 .150
5.3 懶加載 .150
5.4 useState 與useReducer 157
5.5 強(qiáng)大的設(shè)計(jì)模式 .164
5.5.1 展示組件/ 容器組件模式 .165
5.5.2 高階組件 166
5.5.3 Render Props 模式 175
5.5.4 Control Props 模式 177
5.5.5 屬性集合模式 .179
5.5.6 組合組件模式 .182
5.5.7 狀態(tài)Reducer 模式 186
5.6 本章小結(jié).189
5.7 回顧問(wèn)題.189
5.8 接下來(lái)的內(nèi)容 190
第6 章 服務(wù)端渲染 191
6.1 客戶端渲染的限制 .191
6.1.1 搜索引擎優(yōu)化(SEO) .191
6.1.2 性能 .193
6.1.3 安全性 196
6.2 服務(wù)端渲染的興起 .198
6.3 客戶端激活(Hydration) .199
6.4 使用服務(wù)端渲染 .202
6.4.1 手動(dòng)為React 應(yīng)用添加服務(wù)端渲染能力 202
6.4.2 客戶端激活 .205
6.5 服務(wù)端渲染相關(guān)的API 205
6.5.1 renderToString 206
6.5.2 renderToPipeableStream 209
6.5.3 renderToReadableStream 222
6.5.4 應(yīng)用場(chǎng)景 224
6.6 避免重復(fù)造輪子 .226
6.7 本章小結(jié).229
6.8 回顧問(wèn)題.229
6.9 接下來(lái)的內(nèi)容 230
第7 章 React 并發(fā)模式 231
7.1 同步渲染的問(wèn)題 .232
7.2 重新審視Fiber 233
7.3 調(diào)度和延遲更新 .233
7.4 深入探討.237
7.5 渲染通道.242
7.5.1 渲染通道的工作原理244
7.5.2 處理通道 245
7.5.3 提交階段 246
7.6 useTransition .247
7.6.1 簡(jiǎn)單示例 247
7.6.2 高級(jí)示例:頁(yè)面導(dǎo)航248
7.6.3 深入探討 250
7.7 useDeferredValue 251
7.7.1 useDeferredValue 的設(shè)計(jì)目的 252
7.7.2 什么時(shí)候使用useDeferredValue 255
7.7.3 什么時(shí)候不適合使用useDeferredValue 256
7.8 并發(fā)渲染的問(wèn)題 .257
7.9 本章小結(jié).267
7.10 回顧問(wèn)題 268
7.11 接下來(lái)的內(nèi)容 269
第8 章 框架 . 271
8.1 為什么需要框架 .271
8.1.1 服務(wù)端渲染 .275
8.1.2 路由 .277
8.1.3 數(shù)據(jù)獲取 278
8.2 使用框架的優(yōu)勢(shì) .283
8.3 使用框架的顧慮 .284
8.4 流行的React 框架 .285
8.4.1 Remix .285
8.4.2 Next.js 295
8.5 如何選擇合適的框架 304
8.5.1 明確項(xiàng)目需求 .305
8.5.2 Next.js 305
8.5.3 Remix .306
8.5.4 權(quán)衡取舍 307
8.5.5 開(kāi)發(fā)者體驗(yàn) .308
8.5.6 運(yùn)行時(shí)性能 .308
8.6 本章小結(jié).310
8.7 回顧問(wèn)題.310
8.8 接下來(lái)的內(nèi)容 311
第9 章 React 服務(wù)端組件 313
9.1 服務(wù)端組件的優(yōu)勢(shì) .315
9.2 服務(wù)端渲染 315
9.2.1 深入剖析 318
9.2.2 處理組件更新 .329
9.2.3 細(xì)節(jié)剖析 335
9.3 服務(wù)端組件的使用準(zhǔn)則 337
9.3.1 序列化是關(guān)鍵 .337
9.3.2 避免使用具有副作用的Hooks 337
9.3.3 服務(wù)端狀態(tài)客戶端狀態(tài) 338
9.3.4 客戶端組件不能引用服務(wù)端組件 .338
9.3.5 客戶端組件尚未過(guò)時(shí)340
.4 服務(wù)端操作 340
9.4.1 表單與數(shù)據(jù)變更 341
9.4.2 非表單場(chǎng)景 .341
9.5 展望React 服務(wù)端組件的未來(lái) .342
9.6 本章小結(jié).343
9.7 回顧問(wèn)題.344
9.8 接下來(lái)的內(nèi)容 344
第10 章 React 的競(jìng)品 . 347
10.1 Vue.js .347
10.1.1 信號(hào) 349
10.1.2 易于上手 350
10.2 Angular .350
10.2.1 變更檢測(cè) 351
10.2.2 信號(hào) 351
10.3 Svelte .352
10.4 Solid 357
10.5 Qwik 359
10.6 共性的設(shè)計(jì)模式 361
10.6.1 基于組件的構(gòu)架設(shè)計(jì) 361
10.6.2 聲明式語(yǔ)法361
10.6.3 響應(yīng)狀態(tài)更新 362
10.6.4 生命周期方法 362
10.6.5 社區(qū)和工具362
10.7 React 并非真正的響應(yīng)式框架 363
10.8 React 的未來(lái) 368
10.9 本章小結(jié) 372
10.10 回顧問(wèn)題 373
10.11 接下來(lái)的內(nèi)容 .374
第11 章 總結(jié) 375
11.1 要點(diǎn)總結(jié) 375
11.2 我們的時(shí)間線 378
11.3 魔法背后的機(jī)制 .378
11.4 深入探索的旅程 379
11.5 保持更新 380