用react也有段時(shí)間了, 是時(shí)候看看人家源碼了. 看源碼之前看到官方文檔 有這么篇文章介紹其代碼結(jié)構(gòu)了, 為了看源碼能順利些, 遂決定將其翻譯來(lái)看看, 小弟英語(yǔ)也是半瓢水, 好多單詞得查詞典, 不當(dāng)之處請(qǐng)批評(píng). 直接從字面翻譯的, 后面看源碼后可能會(huì)在再修改下.

---

下面是翻譯

這部分將給你介紹下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.

一級(jí)目錄

克隆了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ì)用到他們能.

共同測(cè)試(Colocated Tests)

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

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

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

Warnings and Invariants

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ì)在開發(fā)模式被開啟. 生產(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è)斷言.

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

Development and Production

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

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

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

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

Flow

我們最近開始引入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檢查你的代碼.

動(dòng)態(tài)植入

react在一些模塊使用了動(dòng)態(tài)植入. 但是這個(gè)東西不太好, 因?yàn)樗尨a比較難理解了. 他存在的理由是react一開始只把支持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 injectioninjection: {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核心

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的全局變量.

Renderers

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

“renderers”管理了react樹如何變成平臺(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樹, 他被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.

Reconcilers(協(xié)調(diào)器)

相當(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

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

Fiber Reconciler

"Fiber"是為了解決stack reconciler固有問(wèn)題和修復(fù)長(zhǎng)期存在的bug所做的努力, 他從react16開始成為默認(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里邊.

事件系統(tǒng)

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

轉(zhuǎn)載于:https://www.cnblogs.com/floor/p/10094323.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的react源码总览(翻译)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。