開篇詞—為什么要研究 React 內部運行機制與設計原理

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

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

下面，我們來簡單說一說為什么要研究 React 內部運行機制與設計原理。

能力提升的核心體現之一

多年前，我在網易實習時的一位職業導師也和我談過如何在技術這條路走的最快最穩。他說，對于一般人，畢業后1-3 年是夯實基礎的階段，3-5 年是能力進一步提升的階段。那么我們該如何看待這兩個階段呢？

夯實基礎：能夠熟練掌握前端領域的常用知識點，如 JavaScript 繼承原理，異步編程方式及原理，熟練使用 React、Vue 等前端框架等。

能力提升：深入了解常用框架原理，能夠根據自身的知識儲備解決某一類問題，如開發效率問題，代碼質量問題，多端兼容問題等。

React 技術體系在前端應用中占據了大半壁江山，一名優秀的前端工程師對 React 的掌握不應該僅停留在應用層面，而是應該熟知其內部工作機制與設計原理。

入職互聯網一線大廠的必備技能

由于 React 被廣泛應用于大、中、小型互聯網公司，國內一線互聯網公司對前端工程師崗位招聘中對 React 框架原理提出了明確要求。

某跳動公司對前端開發工程師招聘職位的要求中有：

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

某巴巴公司對前端開發工程師招聘職位的要求中有：

熟悉（React/Vue/Angular）中一種框架，且有實際項目應用經驗，具備獨立項目開發能力；

某鵝廠對前端開發工程師招聘職位的要求中有：

對（React/Vue/Angular）框架非常熟悉，并有項目經驗；

如果你還不知道setState的工作原理，甚至沒有聽說過 React Fiber 架構，那么你距離互聯網一線大廠的要求還有很大一段距離。

相對于 Vue，大廠更喜歡 React

React 和 Vue 是當下前端開發領域中最受歡迎的兩個優秀框架。事實上，在大廠的業務代碼中 React 卻占據了絕對的主導地位。這是為什么呢？

React 是由 Facebook 公司來更新和維護，它是大量世界級優秀程序員的思想結晶，它擁有著最多的開發者和技術社區。React 的流行不僅僅局限于普通開發工程師對它的認可，更多的是其他框架借鑒它的思想。Vue 框架設計之初，有很多的靈感來自 Angular 和 React，包括 Vue 3 的很多新特性（如 Function Based API）也是借鑒和學習了 React。React 可以說是前端開發領域的先驅者，它總是會引領整個個前端的潮流。

高級前端工程師必須要學習 React 以及它的內部運行機制與設計原理，因為你可以了解到 React 如何以最優雅的方式在組件上面實現「數據驅動更新」思想，你也可以了解到 React 如何讓你的程序不直接操作 DOM 的情況下還能更新 DOM … 同時，你也會了解到 React 使用元素來描述 DOM 具有非常好的創新性意義，因為它實現了以最小對象來描述頁面結構，節省了大量的數據成本，它的這種做法是提升頁面渲染性能的關鍵因素之一。

事實上，React 相對于 Vue 的學習門檻要高，因為 React 不僅需要開發者掌握 HTML 和 CSS，還需要擁有良好的 JavaScript 基礎（尤其是 ES6）。這個門檻也是衡量開發者水平的標準之一，如果你一直使用 Vue 而沒有接觸 React，那么你的技術能力可能很難得到大多數人的認可。

React 在多端統一方面的巨大潛能

2019 年京東前端團隊發布了一套遵循 React 語法規范的 多端開發 解決方案—Taro。

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

開發 React 應用更加得心應手

如果你是一位 React 的忠實開發者，如果你有過因為 React 應用程序報錯而不能輕松定位到問題原因的經歷，如果還不知道 React 組件和元素的區別，如果你對 React 框架沒有自己的深刻認知 … 那么，你應該學習本課程。通過本課程的學習，了解 React 的內部工作機制與設計原理后再寫 React 程序時會像打通了任督二脈一樣，異常清爽，得心應手。

課程是如何設計的？

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

為了能讓你更快的掌握 React 內部運行機制與設計原理，同時也照顧一下那些沒有基礎的同學，我將專欄內容作了如下安排。

本專欄圍繞 React 內部運行機制與設計原理 核心技術展開，共劃分為 6 章 30 個小節。

第一章，為本專欄的學習入口， 主要介紹怎么才能順利開始研究 React 內部運行機制與設計原理，詳細介紹了應用程序首次渲染的入口—ReactDOM.render函數。

第二章，為本專欄的學習基礎， 主要介紹 React 世界中的一些重要的基礎概念。包括組件的定義與設計思想、深入理解組件的生命周期函數、組件實例的創建與作用、元素的設計原理以及更新與更新隊列的定義等。

第三章，主要介紹 React Fiber 架構， 由淺入深的幫助大家對 Fiber 有個清晰的認識。

第四章，主要介紹 React 任務體系， 了解 React 對任務的定義及調度邏輯。

第五章，以應用程序的運行為主線，詳細介紹其在首次渲染過程中的整體執行流程。 React 應用程序首次渲染流程包括了構建 fiberRoot 對象，構建 workInProgress 樹，收集 Effect List 以及將內容更新到屏幕等過程。

第六章，繼續以應用程序的運行為主線，詳細介紹其在更新渲染過程中的整體執行流程。 React 應用程序更新渲染流程中的重要工作有為需要更新的 Fiber 結點標記 effectTag，收集 Effect List，Fiber 結點的 diff 處理等。

在最后，我再說兩句，React 是一個非常優秀的前端框架，無論你現在的工作中正在使用其他框架還是使用 React 框架，對 React 進行深入學習研究，對我們今后的工作都會有指導、啟發意義。通過對本專欄的學習，你將收獲到源碼學習方法，React 內部運行原理，React 核心設計思想，面試高級技能，JavaScript 基礎知識點回顧 …

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

《前端高手必學課-React》專欄是我多年來研究 React 源碼及設計思想的一個總結課程。專欄中的文章結合了各種技術社區對 React 相關知識點的介紹以及個人理解，并非官方文檔。由于個人水平有限，專欄中難免有錯誤與不當之處，也希望你在閱讀的過程中發表自己的看法，讓我們一起溝通，一起進步。

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