摘要：每次都信誓旦旦的給自己立下要好好學(xué)習(xí)源碼的，結(jié)果都是因?yàn)槟硞€(gè)地方卡住了，或是其他原因沒(méi)看多少就放棄了。這次又給自己立個(gè)堅(jiān)持看完源碼。我看的源碼版本是。本篇文章是官方文檔里邊的一篇文章的翻譯，原文地址。

每次都信誓旦旦的給自己立下要好好學(xué)習(xí)react源碼的flag，結(jié)果都是因?yàn)槟硞€(gè)地方卡住了，或是其他原因沒(méi)看多少就放棄了。這次又給自己立個(gè)flag-堅(jiān)持看完react源碼。為了敦促自己，特開(kāi)設(shè)這樣一個(gè)專欄來(lái)記錄自己的學(xué)習(xí)歷程，這意味著這個(gè)專欄的文章質(zhì)量并不高，你可以拿來(lái)參考參考，切莫全信，我不想誤人子弟，后面要是學(xué)有所成再考慮產(chǎn)出些好點(diǎn)的文章。 要是發(fā)現(xiàn)文章中有什么不當(dāng)之處，歡迎批評(píng)交流。我看的源碼版本是16.8.2。

為了看react源碼，我查找了不少資料，這里推薦兩個(gè)參考資料，個(gè)人覺(jué)得寫得不錯(cuò)。

慕課網(wǎng)一個(gè)課的電子書，他有個(gè)源碼解析的視頻教程，應(yīng)該不錯(cuò)，不過(guò)我沒(méi)買。

一個(gè)知乎專欄，寫得很清晰，只不過(guò)是15.6.2的, 在react16里面一些方法找不到了。

本篇文章是官方文檔里邊的一篇文章的翻譯，原文地址。

這部分將給你介紹下react代碼的基本結(jié)構(gòu), 代碼約定和它的基本實(shí)現(xiàn).

如果你想為react貢獻(xiàn)代碼的話, 我們希望這篇指南能讓你寫代碼更加舒服.

我們不推薦將這些約定用在react應(yīng)用中, 因?yàn)檫@些約定大多是基于一些歷史原因存在的, 隨著時(shí)間推移可能會(huì)發(fā)生變化.

react 幾乎沒(méi)有外部依賴. 通常require()指向的是react自己代碼庫(kù)的一個(gè)文件. 但是也有一些例外.

由于react想要通過(guò)庫(kù)共享一些諸如Relay的小工具, 所以存在fbjs repository , 而且我們讓他們是同步的. 我們沒(méi)有依賴任何node生態(tài)系統(tǒng)下的小模塊, 因?yàn)槲覀兿Ｍ鹒acebook的工程師的能能再任何必要的時(shí)候修改他們. fbjs中的任何工具都不能被認(rèn)為是公共api, 并且他們只是為Facebook的一些工程使用, 比如react.

克隆了react的倉(cāng)庫(kù)后你會(huì)發(fā)現(xiàn)在里邊有幾個(gè)一級(jí)目錄.

packages目錄包括一些元數(shù)據(jù)(如package.json)和react庫(kù)提供的所有包的源碼(src的下面), 如果你想修改代碼, src下面就是你要花時(shí)間最多的地方.

fixtures目錄包括了為貢獻(xiàn)者準(zhǔn)備的一些小的react的測(cè)試應(yīng)用

build是react打包輸出的目錄. 他不在代碼庫(kù)管理范疇, 但是當(dāng)你第一次打包后就會(huì)生成.

文檔是放在和react不同的另一個(gè)倉(cāng)庫(kù)管理的.

還有一些其他一級(jí)目錄, 他們大多是工具層面的, 在你貢獻(xiàn)代碼時(shí)可能不會(huì)用到他們能.

我們沒(méi)有搞個(gè)一級(jí)目錄來(lái)做單元測(cè)試. 我們把它放在了被測(cè)試文件相鄰的被稱為__tests__的目錄.

舉個(gè)例子, 對(duì)于setInnerHTML.js這個(gè)文件的測(cè)試被放在與他同級(jí)的__tests__/setInnerHTML-test.js這個(gè)里邊.

這個(gè)詞不知道怎么翻譯

react中使用warning模塊顯示警告信息.

var warning = require("warning");

warning(
  2 + 2 === 4,
  "Math is not working today."
);

當(dāng)警告條件是false的時(shí)候會(huì)展示警告信息

可以這么理解, 條件應(yīng)該指示正常的情況, 而不是異常的情況. 就是說(shuō)第一個(gè)參數(shù)是true表示的是正常, false是異常.

最好避免使用console取代warnings.

var warning = require("warning");

var didWarnAboutMath = false;
if (!didWarnAboutMath) {
  warning(
    2 + 2 === 4,
    "Math is not working today."
  );
  didWarnAboutMath = true;
}

警告只會(huì)在開(kāi)發(fā)模式被開(kāi)啟. 生產(chǎn)環(huán)境下被去掉了. 如果你想阻止某些代碼塊的執(zhí)行, 那么你可以用invariant模塊.

var invariant = require("invariant");

invariant(
  2 + 2 === 4,
  "You shall not pass!"
);

當(dāng)條件為false時(shí), 這個(gè)方法會(huì)直接拋出異常.

“Invariant” 就是說(shuō)這個(gè)條件為真, 你可以認(rèn)為他就是做了個(gè)斷言.

保持開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境一致是很重要的, 因此invariant在生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境都可以拋出異常. 生產(chǎn)環(huán)境下的錯(cuò)誤消息被自動(dòng)替換成錯(cuò)誤碼, 以防增加代碼體積.

你可以使用__DEV__這個(gè)為全局變量指定僅僅在開(kāi)發(fā)環(huán)境才執(zhí)行的代碼塊.

他是在編譯過(guò)程中工作的, 他是在commonjs編譯的時(shí)候檢查process.env.NODE_ENV !== "production"這個(gè)值.

多帶帶編譯的時(shí)候, 他在未壓縮版是true, 在壓縮版直接被去掉了.

if (__DEV__) {
  // 這里邊的代碼只會(huì)帶開(kāi)發(fā)環(huán)境執(zhí)行
}

我們最近開(kāi)始引入flow做靜態(tài)類型檢查, 在文件頭的注釋里標(biāo)注了@flow的使用了類型檢查.

我們接受在現(xiàn)有代碼加入flow類型檢查的pull request (不錯(cuò)哎, 可以試著提個(gè)pull request哦). Flow的簽名類似下面這樣.

ReactRef.detachRefs = function(
  instance: ReactInstance,
  element: ReactElement | string | number | null | false,
): void {
  // ...
}

時(shí)機(jī)成熟的時(shí)候, 新代碼要用Flow 簽名, 你可以在本地運(yùn)行yarn flow用Flow檢查你的代碼.

react在一些模塊使用了動(dòng)態(tài)植入. 但是這個(gè)東西不太好, 因?yàn)樗尨a比較難理解了. 他存在的理由是react一開(kāi)始只把支持dom作為目標(biāo)的. 但是后來(lái)殺出了個(gè)React Native, 他是基于react的, 我們不得不加入動(dòng)態(tài)植入好讓react native 重載一些行為.

你可能會(huì)看到模塊像下面這樣聲明它的動(dòng)態(tài)依賴

// Dynamically injected
var textComponentClass = null;

// Relies on dynamically injected value
function createInstanceForText(text) {
  return new textComponentClass(text);
}

var ReactHostComponent = {
  createInstanceForText,

  // Provides an opportunity for dynamic injection
  injection: {
    injectTextComponentClass: function(componentClass) {
      textComponentClass = componentClass;
    },
  },
};

module.exports = ReactHostComponent;

注入的部分沒(méi)有以任何方式特殊處理. 但是規(guī)定, 它的意思是這個(gè)模塊想在運(yùn)行時(shí)有一些依賴(可能是平臺(tái)特定的)被注入進(jìn)去.

代碼里邊有幾個(gè)注入的入口. 未來(lái), 我們將廢棄掉這種動(dòng)態(tài)植入的機(jī)制, 方案是在編譯時(shí)以靜態(tài)方式處理他們.

react是個(gè)monorepo, 他的倉(cāng)庫(kù)包含了多個(gè)獨(dú)立的包, 因此他們的修改可以合在一起, 而且issues也可以放在一個(gè)地方.

react的核心是所有頂級(jí)api, 包括:

React.createElement()

React.Component

React.Children

react核心只包括定義組件必要的api, 并不包括reconciliation算法和平臺(tái)特定代碼. React DOM和React Native都使用了他們.

react核心的相關(guān)代碼在packages/react里邊. npm使用時(shí)在react這個(gè)包里邊, 瀏覽器版的是react.js, 他掛載一個(gè)被稱為React的全局變量.

react起初是為DOM創(chuàng)造的, 但是后臺(tái)通過(guò)RN被用來(lái)支持原生環(huán)境了. 這里介紹加react內(nèi)部的“renderers”的理念.

“renderers”管理了react樹(shù)如何變成平臺(tái)可調(diào)用的東西.

Renderers也在packages里邊

React DOM Renderer 把react 組件渲染進(jìn) DOM. 他實(shí)現(xiàn)了頂級(jí)的ReactDOM APIs, 在react-dom這個(gè)npm包里被暴露出來(lái). 瀏覽器版叫react-dom.js, 通過(guò)ReactDOM這個(gè)全局變量暴露出來(lái).

React Native Renderer把react組件渲染到原生視圖層里. 他被RN內(nèi)部使用.

React Test Renderer 把react組件渲染成JSON樹(shù), 他被Jest的一個(gè)特性Snapshot Testing使用, 在react-test-renderer這個(gè)npm包里可用.

另一個(gè)官方唯一支持的渲染器是react-art, 他曾經(jīng)是個(gè)獨(dú)立的庫(kù), 現(xiàn)在被移進(jìn)來(lái)了.

注意

技術(shù)上react-native-renderer是很薄的一層, 只是用來(lái)和RN的實(shí)現(xiàn)相互配合, 真正的平臺(tái)相關(guān)代碼是RN庫(kù)里一些native view.

相當(dāng)多的渲染器, 如Reat DOM, React Native 需要共享一套邏輯. 尤其reconciliation算法需要足夠的相似, 以便讓rendering, 自定義組件, 狀態(tài), 生命周期函數(shù)和refs能跨平臺(tái)工作.

為了解決這個(gè)問(wèn)題, 不同的渲染器共用一些代碼. 我們把React 中的這個(gè)部分叫做"reconciler". 當(dāng)一個(gè)更新比如setState要執(zhí)行了,Reconcilers就去在組件上調(diào)用render(), 然后mounts, updates, 或者unmounts他們.

Reconcilers沒(méi)有獨(dú)立成包, 因?yàn)樗F(xiàn)在還沒(méi)有公共API. 相反, 他僅僅是在渲染器被使用, 比如React DOM , React Native.

Stack Reconciler 是在react15之前實(shí)現(xiàn)使用的, 現(xiàn)在已經(jīng)不用了, 但是下一部分的文檔還會(huì)有詳細(xì)的介紹.

"Fiber"是為了解決stack reconciler固有問(wèn)題和修復(fù)長(zhǎng)期存在的bug所做的努力, 他從react16開(kāi)始成為默認(rèn)的Reconciler.

他的主要目標(biāo)是:

在chunks里分離可中斷的工作

在過(guò)程中重建, 重用work或者改變他的優(yōu)先級(jí)(瞎翻譯的)的能力

在父子組件前進(jìn)或回退以只是react中的布局的能力

在render方法里返回多個(gè)元素的能力

更好的支持錯(cuò)誤邊際

你可在這里和這里閱讀更多關(guān)于Fiber架構(gòu)的相關(guān)信息. 但是React16對(duì)他做了封裝, 默認(rèn)不支持異步特性了.

他的源碼在packages/react-reconciler里邊.

react實(shí)現(xiàn)了一個(gè)對(duì)renders透明的事件系統(tǒng), 這個(gè)系統(tǒng)被用于react dom 和react native. 源碼在packages/events;

這里有個(gè)視頻https://www.youtube.com/watch?v=dRo_egw7tBc