react源碼總覽(翻譯)

時間 2019-11-06

標籤 react 源碼總覽翻譯欄目 React 简体版

原文原文鏈接

每次都信誓旦旦的給本身立下要好好學習react源碼的flag，結果都是由於某個地方卡住了，或是其餘緣由沒看多少就放棄了。此次又給本身立個flag-堅持看完react源碼。爲了敦促本身，特開設這樣一個專欄來記錄本身的學習歷程，這意味着這個專欄的文章質量並不高，你能夠拿來參考參考，切莫全信，我不想誤人子弟，後面要是學有所成再考慮產出些好點的文章。要是發現文章中有什麼不當之處，歡迎批評交流。我看的源碼版本是 16.8.2。

爲了看react源碼，我查找了很多資料，這裏推薦兩個參考資料，我的以爲寫得不錯。javascript

慕課網一個課的電子書，他有個源碼解析的視頻教程，應該不錯，不過我沒買。
一個知乎專欄，寫得很清晰，只不過是15.6.2的, 在react16裏面一些方法找不到了。

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

這部分將給你介紹下react代碼的基本結構, 代碼約定和它的基本實現.

若是你想爲react貢獻代碼的話, 咱們但願這篇指南能讓你寫代碼更加舒服.html

咱們不推薦將這些約定用在react應用中, 由於這些約定大可能是基於一些歷史緣由存在的, 隨着時間推移可能會發生變化.java

外部依賴

react 幾乎沒有外部依賴. 一般require()指向的是react本身代碼庫的一個文件. 可是也有一些例外.node

因爲react想要經過庫共享一些諸如Relay的小工具, 因此存在fbjs repository , 並且咱們讓他們是同步的. 咱們沒有依賴任何node生態系統下的小模塊, 由於咱們但願facebook的工程師的能能再任何須要的時候修改他們. fbjs中的任何工具都不能被認爲是公共api, 而且他們只是爲Facebook的一些工程使用, 好比react.react

一級目錄

克隆了react的倉庫後你會發如今裏邊有幾個一級目錄.git

packages目錄包括一些元數據(如package.json)和react庫提供的全部包的源碼(src的下面), 若是你想修改代碼, src下面就是你要花時間最多的地方.
fixtures目錄包括了爲貢獻者準備的一些小的react的測試應用
build是react打包輸出的目錄. 他不在代碼庫管理範疇, 可是當你第一次打包後就會生成.

文檔是放在和react不一樣的另外一個倉庫管理的.github

還有一些其餘一級目錄, 他們大可能是工具層面的, 在你貢獻代碼時可能不會用到他們能.算法

共同測試(Colocated Tests)

咱們沒有搞個一級目錄來作單元測試. 咱們把它放在了被測試文件相鄰的被稱爲__tests__的目錄.npm

舉個例子, 對於setInnerHTML.js這個文件的測試被放在與他同級的__tests__/setInnerHTML-test.js這個裏邊.

這個詞不知道怎麼翻譯

Warnings and Invariants

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

var warning = require('warning');

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

當警告條件是false的時候會展現警告信息

能夠這麼理解, 條件應該指示正常的狀況, 而不是異常的狀況. 就是說第一個參數是true表示的是正常, false是異常.

最好避免使用console取代warnings.

var warning = require('warning');

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

警告只會在開發模式被開啓. 生產環境下被去掉了. 若是你想阻止某些代碼塊的執行, 那麼你能夠用invariant模塊.

var invariant = require('invariant');

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

當條件爲false時, 這個方法會直接拋出異常.

「Invariant」就是說這個條件爲真, 你能夠認爲他就是作了個斷言.

保持開發環境和生產環境一致是很重要的, 所以invariant在生產環境和開發環境均可以拋出異常. 生產環境下的錯誤消息被自動替換成錯誤碼, 以防增長代碼體積.

Development and Production

你可使用__DEV__這個爲全局變量指定僅僅在開發環境才執行的代碼塊.

他是在編譯過程當中工做的, 他是在commonjs編譯的時候檢查process.env.NODE_ENV !== 'production'這個值.

單獨編譯的時候, 他在未壓縮版是true, 在壓縮版直接被去掉了.

if (__DEV__) {
  // 這裏邊的代碼只會帶開發環境執行
}

Flow

咱們最近開始引入flow作靜態類型檢查, 在文件頭的註釋裏標註了@flow的使用了類型檢查.

咱們接受在現有代碼加入flow類型檢查的pull request (不錯哎, 能夠試着提個pull request哦). Flow的簽名相似下面這樣.

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

時機成熟的時候, 新代碼要用Flow 簽名, 你能夠在本地運行yarn flow用Flow檢查你的代碼.

動態植入

react在一些模塊使用了動態植入. 可是這個東西不太好, 由於他讓代碼比較難理解了. 他存在的理由是react一開始只把支持dom做爲目標的. 可是後來殺出了個React Native, 他是基於react的, 咱們不得不加入動態植入好讓react native 重載一些行爲.

你可能會看到模塊像下面這樣聲明它的動態依賴

// 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;

注入的部分沒有以任何方式特殊處理. 可是規定, 它的意思是這個模塊想在運行時有一些依賴(多是平臺特定的)被注入進去.

代碼裏邊有幾個注入的入口. 將來, 咱們將廢棄掉這種動態植入的機制, 方案是在編譯時以靜態方式處理他們.

多包

react是個monorepo, 他的倉庫包含了多個獨立的包, 所以他們的修改能夠合在一塊兒, 並且issues也能夠放在一個地方.

React核心

react的核心是全部頂級api, 包括:

React.createElement()
React.Component
React.Children

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

react核心的相關代碼在packages/react裏邊. npm使用時在react這個包裏邊, 瀏覽器版的是react.js, 他掛載一個被稱爲React的全局變量.

Renderers

react起初是爲DOM創造的, 可是後臺經過RN被用來支持原生環境了. 這裏介紹加react內部的「renderers」的理念.

「renderers」管理了react樹如何變成平臺可調用的東西.

Renderers也在packages裏邊

React DOM Renderer 把react 組件渲染進 DOM. 他實現了頂級的ReactDOM APIs, 在react-dom這個npm包裏被暴露出來. 瀏覽器版叫react-dom.js, 經過ReactDOM這個全局變量暴露出來.
React Native Renderer把react組件渲染到原生視圖層裏. 他被RN內部使用.
React Test Renderer 把react組件渲染成JSON樹, 他被Jest的一個特性Snapshot Testing使用, 在react-test-renderer這個npm包裏可用.