開篇詞—為什么要研究 React 內(nèi)部運(yùn)行機(jī)制與設(shè)計(jì)原理

你好，我是上古鵬，目前在一家一線互聯(lián)網(wǎng)公司做資深前端工程師。在多年的前端開發(fā)經(jīng)歷中，我先后使用過 jQuery，Backbone.js，Vue 與 React 等前端框架。記得當(dāng)年使用 Backbone.js 框架開發(fā)前端項(xiàng)目時(shí)，感覺在前端使用 MVC 的開發(fā)模式大大提高了開發(fā)效率，并降低了程序的維護(hù)成本。直到后來接觸 React，React 帶來的數(shù)據(jù)驅(qū)動(dòng)更新的思想，讓我感覺到 React 的出現(xiàn)在前端技術(shù)發(fā)展歷史中具有里程碑式的意義，它不但提高了我們的開發(fā)效率，提升了應(yīng)用程序的執(zhí)行性能，更是改變了我們的編程模式。

現(xiàn)階段，React 作為前端開發(fā)工程師面試必問、工作必用的內(nèi)容，它正變得越來越重要。尤其對(duì)于大型公司，求職者是否對(duì) React 的運(yùn)行原理有一定的了解甚至能直接決定他是否被錄用。本專欄主要講 React 的內(nèi)部運(yùn)行機(jī)制與設(shè)計(jì)原理，期望能給讀者帶來 React 更多深層次的內(nèi)容。

下面，我們來簡單說一說為什么要研究 React 內(nèi)部運(yùn)行機(jī)制與設(shè)計(jì)原理。

能力提升的核心體現(xiàn)之一

多年前，我在網(wǎng)易實(shí)習(xí)時(shí)的一位職業(yè)導(dǎo)師也和我談過如何在技術(shù)這條路走的最快最穩(wěn)。他說，對(duì)于一般人，畢業(yè)后1-3 年是夯實(shí)基礎(chǔ)的階段，3-5 年是能力進(jìn)一步提升的階段。那么我們?cè)撊绾慰创@兩個(gè)階段呢？

夯實(shí)基礎(chǔ)：能夠熟練掌握前端領(lǐng)域的常用知識(shí)點(diǎn)，如 JavaScript 繼承原理，異步編程方式及原理，熟練使用 React、Vue 等前端框架等。

能力提升：深入了解常用框架原理，能夠根據(jù)自身的知識(shí)儲(chǔ)備解決某一類問題，如開發(fā)效率問題，代碼質(zhì)量問題，多端兼容問題等。

React 技術(shù)體系在前端應(yīng)用中占據(jù)了大半壁江山，一名優(yōu)秀的前端工程師對(duì) React 的掌握不應(yīng)該僅停留在應(yīng)用層面，而是應(yīng)該熟知其內(nèi)部工作機(jī)制與設(shè)計(jì)原理。

入職互聯(lián)網(wǎng)一線大廠的必備技能

由于 React 被廣泛應(yīng)用于大、中、小型互聯(lián)網(wǎng)公司，國內(nèi)一線互聯(lián)網(wǎng)公司對(duì)前端工程師崗位招聘中對(duì) React 框架原理提出了明確要求。

某跳動(dòng)公司對(duì)前端開發(fā)工程師招聘職位的要求中有：

對(duì)主流前端框架（React/Vue/Angular等）有一定了解，并至少對(duì)其中一種有深入了解；

某巴巴公司對(duì)前端開發(fā)工程師招聘職位的要求中有：

熟悉（React/Vue/Angular）中一種框架，且有實(shí)際項(xiàng)目應(yīng)用經(jīng)驗(yàn)，具備獨(dú)立項(xiàng)目開發(fā)能力；

某鵝廠對(duì)前端開發(fā)工程師招聘職位的要求中有：

對(duì)（React/Vue/Angular）框架非常熟悉，并有項(xiàng)目經(jīng)驗(yàn)；

如果你還不知道setState的工作原理，甚至沒有聽說過 React Fiber 架構(gòu)，那么你距離互聯(lián)網(wǎng)一線大廠的要求還有很大一段距離。

相對(duì)于 Vue，大廠更喜歡 React

React 和 Vue 是當(dāng)下前端開發(fā)領(lǐng)域中最受歡迎的兩個(gè)優(yōu)秀框架。事實(shí)上，在大廠的業(yè)務(wù)代碼中 React 卻占據(jù)了絕對(duì)的主導(dǎo)地位。這是為什么呢？

React 是由 Facebook 公司來更新和維護(hù)，它是大量世界級(jí)優(yōu)秀程序員的思想結(jié)晶，它擁有著最多的開發(fā)者和技術(shù)社區(qū)。React 的流行不僅僅局限于普通開發(fā)工程師對(duì)它的認(rèn)可，更多的是其他框架借鑒它的思想。Vue 框架設(shè)計(jì)之初，有很多的靈感來自 Angular 和 React，包括 Vue 3 的很多新特性（如 Function Based API）也是借鑒和學(xué)習(xí)了 React。React 可以說是前端開發(fā)領(lǐng)域的先驅(qū)者，它總是會(huì)引領(lǐng)整個(gè)個(gè)前端的潮流。

高級(jí)前端工程師必須要學(xué)習(xí) React 以及它的內(nèi)部運(yùn)行機(jī)制與設(shè)計(jì)原理，因?yàn)槟憧梢粤私獾?React 如何以最優(yōu)雅的方式在組件上面實(shí)現(xiàn)「數(shù)據(jù)驅(qū)動(dòng)更新」思想，你也可以了解到 React 如何讓你的程序不直接操作 DOM 的情況下還能更新 DOM … 同時(shí)，你也會(huì)了解到 React 使用元素來描述 DOM 具有非常好的創(chuàng)新性意義，因?yàn)樗鼘?shí)現(xiàn)了以最小對(duì)象來描述頁面結(jié)構(gòu)，節(jié)省了大量的數(shù)據(jù)成本，它的這種做法是提升頁面渲染性能的關(guān)鍵因素之一。

事實(shí)上，React 相對(duì)于 Vue 的學(xué)習(xí)門檻要高，因?yàn)?React 不僅需要開發(fā)者掌握 HTML 和 CSS，還需要擁有良好的 JavaScript 基礎(chǔ)（尤其是 ES6）。這個(gè)門檻也是衡量開發(fā)者水平的標(biāo)準(zhǔn)之一，如果你一直使用 Vue 而沒有接觸 React，那么你的技術(shù)能力可能很難得到大多數(shù)人的認(rèn)可。

React 在多端統(tǒng)一方面的巨大潛能

2019 年京東前端團(tuán)隊(duì)發(fā)布了一套遵循 React 語法規(guī)范的 多端開發(fā) 解決方案—Taro。

Taro 遵循 React 語法規(guī)范，它采用與 React 一致的組件化思想，組件生命周期與 React 保持一致，同時(shí)支持使用 JSX 語法，讓代碼具有更豐富的表現(xiàn)力，使用 Taro 進(jìn)行開發(fā)可以獲得和 React 一致的開發(fā)體驗(yàn)。Taro 的成功實(shí)現(xiàn)離不開作者們對(duì) React 內(nèi)部工作原理的深刻認(rèn)知。

開發(fā) React 應(yīng)用更加得心應(yīng)手

如果你是一位 React 的忠實(shí)開發(fā)者，如果你有過因?yàn)?React 應(yīng)用程序報(bào)錯(cuò)而不能輕松定位到問題原因的經(jīng)歷，如果還不知道 React 組件和元素的區(qū)別，如果你對(duì) React 框架沒有自己的深刻認(rèn)知 … 那么，你應(yīng)該學(xué)習(xí)本課程。通過本課程的學(xué)習(xí)，了解 React 的內(nèi)部工作機(jī)制與設(shè)計(jì)原理后再寫 React 程序時(shí)會(huì)像打通了任督二脈一樣，異常清爽，得心應(yīng)手。

課程是如何設(shè)計(jì)的？

上面說的這些，其實(shí)也正是咱們這個(gè)課程的核心設(shè)計(jì)理念。接下來，我就說說這門課具體是怎么設(shè)計(jì)的。

為了能讓你更快的掌握 React 內(nèi)部運(yùn)行機(jī)制與設(shè)計(jì)原理，同時(shí)也照顧一下那些沒有基礎(chǔ)的同學(xué)，我將專欄內(nèi)容作了如下安排。

本專欄圍繞 React 內(nèi)部運(yùn)行機(jī)制與設(shè)計(jì)原理 核心技術(shù)展開，共劃分為 6 章 30 個(gè)小節(jié)。

第一章，為本專欄的學(xué)習(xí)入口， 主要介紹怎么才能順利開始研究 React 內(nèi)部運(yùn)行機(jī)制與設(shè)計(jì)原理，詳細(xì)介紹了應(yīng)用程序首次渲染的入口—ReactDOM.render函數(shù)。

第二章，為本專欄的學(xué)習(xí)基礎(chǔ)， 主要介紹 React 世界中的一些重要的基礎(chǔ)概念。包括組件的定義與設(shè)計(jì)思想、深入理解組件的生命周期函數(shù)、組件實(shí)例的創(chuàng)建與作用、元素的設(shè)計(jì)原理以及更新與更新隊(duì)列的定義等。

第三章，主要介紹 React Fiber 架構(gòu)， 由淺入深的幫助大家對(duì) Fiber 有個(gè)清晰的認(rèn)識(shí)。

第四章，主要介紹 React 任務(wù)體系， 了解 React 對(duì)任務(wù)的定義及調(diào)度邏輯。

第五章，以應(yīng)用程序的運(yùn)行為主線，詳細(xì)介紹其在首次渲染過程中的整體執(zhí)行流程。 React 應(yīng)用程序首次渲染流程包括了構(gòu)建 fiberRoot 對(duì)象，構(gòu)建 workInProgress 樹，收集 Effect List 以及將內(nèi)容更新到屏幕等過程。

第六章，繼續(xù)以應(yīng)用程序的運(yùn)行為主線，詳細(xì)介紹其在更新渲染過程中的整體執(zhí)行流程。 React 應(yīng)用程序更新渲染流程中的重要工作有為需要更新的 Fiber 結(jié)點(diǎn)標(biāo)記 effectTag，收集 Effect List，F(xiàn)iber 結(jié)點(diǎn)的 diff 處理等。

在最后，我再說兩句，React 是一個(gè)非常優(yōu)秀的前端框架，無論你現(xiàn)在的工作中正在使用其他框架還是使用 React 框架，對(duì) React 進(jìn)行深入學(xué)習(xí)研究，對(duì)我們今后的工作都會(huì)有指導(dǎo)、啟發(fā)意義。通過對(duì)本專欄的學(xué)習(xí)，你將收獲到源碼學(xué)習(xí)方法，React 內(nèi)部運(yùn)行原理，React 核心設(shè)計(jì)思想，面試高級(jí)技能，JavaScript 基礎(chǔ)知識(shí)點(diǎn)回顧 …

通往知識(shí)財(cái)富的路上充滿了很多的疑惑與不解，所以我們需要更多的耐心與毅力，撥開層層迷霧后才能到達(dá)知識(shí)的殿堂。學(xué)習(xí)《 前端高手必學(xué)課-React》這門課的過程中，難免會(huì)感覺到枯燥乏味，請(qǐng)不要擔(dān)心，每一篇文章都是由淺入深講述相關(guān)內(nèi)容，每一段代碼都有詳細(xì)的注釋與說明。如果你遇到困惑或者不理解的地方請(qǐng)不要擔(dān)心，每一節(jié)容易引起不理解的內(nèi)容都會(huì)有說明在后面文章中進(jìn)行詳細(xì)介紹。你也可以在留言區(qū)進(jìn)行留言，我也會(huì)在最快的速度回復(fù)你。

《前端高手必學(xué)課-React》專欄是我多年來研究 React 源碼及設(shè)計(jì)思想的一個(gè)總結(jié)課程。專欄中的文章結(jié)合了各種技術(shù)社區(qū)對(duì) React 相關(guān)知識(shí)點(diǎn)的介紹以及個(gè)人理解，并非官方文檔。由于個(gè)人水平有限，專欄中難免有錯(cuò)誤與不當(dāng)之處，也希望你在閱讀的過程中發(fā)表自己的看法，讓我們一起溝通，一起進(jìn)步。

書山有路勤為徑，學(xué)海無涯苦作舟。今天學(xué)的東西，看起來是那樣的平平淡淡，甚至枯燥無味，但也許有一天你會(huì)發(fā)現(xiàn)，讀書學(xué)習(xí)原來是那樣的彌足珍貴。學(xué)習(xí)是一個(gè)大浪淘沙的過程，是一個(gè)化平淡為神奇的過程，更是一個(gè)不斷積累財(cái)富的過程。只有不斷的積累，才能取得最終的成功！