進擊React源碼之磨刀試煉2

時間 2019-11-06

標籤進擊 react 源碼磨刀試煉欄目 React 简体版

原文原文鏈接

進擊React源碼之磨刀試煉部分爲源碼解讀基礎部分，會包含多篇文章，本篇爲第二篇，第一篇《進擊React源碼之磨刀試煉1》入口（點擊進入）。javascript

初探Component與PureComponent

若是有沒用過PureComponent或不瞭解的同窗，能夠看看這篇文章什麼時候使用Component仍是PureComponent？html

猜猜組件內部如何實現？

Component（組件）做爲React中最重要的概念，每當建立類組件都要繼承Component或PureComponent，在未開始看源碼的時候，你們能夠先跟本身談談對於Component和PureComponent的印象，不妨根據經驗猜一猜Component內部將會爲咱們實現怎樣的功能？java

先來寫個簡單的組件react

class CompDemo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      msg: 'hello world'
    }
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        msg: 'Hello React'
      });
    }, 1000)
  }

  render() {
    return (
      <div className="CompDemo"> <div className="CompDemo__text"> {this.state.msg} </div> </div>
    )
  }
}
複製代碼

經過這個簡單的組件，咱們猜猜， Component/ PureComponent組件內部可能幫咱們處理了 props, state,定義了生命週期函數， setState， render等不少功能。

源碼實現

打開packages/react/src/ReactBaseClasses.js,打開后里面有不少英文註釋，但願你們無論經過什麼手段先翻譯看看，本身先大體瞭解一下。以後貼出的源碼中我會過濾掉自帶的註釋和if(__DEV__)語句，有興趣瞭解的同窗能夠翻閱源碼研究。git

Componentgithub

function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  this.updater = updater || ReactNoopUpdateQueue;
}

Component.prototype.isReactComponent = {};

Component.prototype.setState = function(partialState, callback) {
  invariant(
    typeof partialState === 'object' ||
      typeof partialState === 'function' ||
      partialState == null,
    'setState(...): takes an object of state variables to update or a ' +
      'function which returns an object of state variables.',
  );
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

Component.prototype.forceUpdate = function(callback) {
  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};

複製代碼

以上就是Component相關的源碼，它竟如此出奇的簡潔！字面來看懂它也很簡單，首先定義了Component構造函數，以後在其原型鏈上設置了isReactComponent(Component組件標誌)、setState方法和forceUpdate方法。web

Component構造函數能夠接收三個參數，其中props和context咱們大多數人應該都接觸過，在函數中還定義了this.refs爲一個空對象，但updater就是一個比較陌生的東西了，在setState和forceUpdate方法中咱們能夠看到它的使用：segmentfault

setState並無具體實現更新state的方法，而是調用了updater的enqueueSetState，setState接收兩個參數：partialState就是咱們要更新的state內容，callback可讓咱們在state更新後作一些自定義的操做，this.updater.enqueueSetState在這裏傳入了四個參數，咱們能夠猜到第一個爲當前實例對象，第二個是咱們更新的內容，第三個是傳入的callback，最後一個是當前操做的名稱。這段代碼上面invariant的做用是判斷partialState是不是對象、函數或者null，若是不是則會給出提示。在這裏咱們能夠看出，setState第一個參數不只能夠爲Object，也能夠是個函數，你們在實際操做中能夠嘗試使用。
forceUpdate相比於setState，只有callback，同時在使用enqueueForceUpdate時候也少傳遞了一個參數，其餘參數跟setState中調用保持一致。

這個updater.enqueueForceUpdate來自ReactDom，React與ReactDom是分開的兩個不一樣的內容,不少複雜的操做都被封裝在了ReactDom中，所以React才保持如此簡潔。React在不一樣平臺（native和web）使用的都是相同的代碼，可是不一樣平臺的DOM操做流程多是不一樣的,所以將state的更新操做經過對象方式傳遞過來,可讓不一樣的平臺去自定義本身的操做邏輯,React就能夠專一於大致流程的實現。api

PureComponent數組

function ComponentDummy() {}
ComponentDummy.prototype = Component.prototype;

function PureComponent(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  this.updater = updater || ReactNoopUpdateQueue;
}

const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
pureComponentPrototype.constructor = PureComponent;

Object.assign(pureComponentPrototype, Component.prototype);
pureComponentPrototype.isPureReactComponent = true;
複製代碼

看完Cpomponent的內容，再看PureComponent就很簡單了，單看PureComponent的定義是與Component是徹底同樣的，這裏使用了寄生組合繼承的方式，讓PureComponent繼承了Component,以後設置了isPureReactComponent標誌爲true。

若是有同窗對JavaScript繼承不是很瞭解，這裏找了一篇掘金上的文章深刻JavaScript繼承原理你們能夠點擊進入查看

Refs的用法與實現

ref的使用

經過ref咱們能夠得到組件內某個子節點的信息病對其進行操做，ref的使用方式有三種:

class RefDemo extends PureComponent {
  constructor() {
    super()
    this.objRef = React.createRef()
  }

  componentDidMount() {
    setTimeout(() => {
      this.refs.stringRef.textContent = "String ref content changed";
      this.methodRef.textContent = "Method ref content changed";
      this.objRef.current.textContent = "Object ref content changed";
    }, 3000)
  }

  render() {
    return (
      <div className="RefDemo"> <div className="RefDemo__stringRef" ref="stringRef">this is string ref</div> <div className="RefDemo__methodRef" ref={el => this.methodRef = el}>this is method ref</div> <div className="RefDemo__objRef" ref={this.objRef}>this is object ref</div> </div>
    )
  }
}

export default RefDemo;
複製代碼

string ref（不推薦，可能廢棄）：經過字符串方式設置ref，會在this.refs對象上掛在一個key爲所設字符串的屬性，用來表示該節點的實例對象。若是該節點爲dom，則對應dom示例，若是是class component則對應該組件實例對象，若是是function component，則會出現錯誤，function component沒有實例，但能夠經過forward ref來使用ref。
method ref：經過function來建立ref（筆者在以前實習工做中基本都是使用這種方式，很是好用）。
經過createRef()建立對象，默認建立的對象爲{current: null},將其傳遞個某個節點，在組件渲染結束後會將此節點的實例對象掛在到current上

createRef的實現

源碼位置packages/react/src/ReactCreactRef.js

export function createRef(): RefObject {
  const refObject = {
    current: null,
  };
  return refObject;
}
複製代碼

它上方有段註釋an immutable object with a single mutable value，告訴咱們建立出來的對象具備單個可變值，可是這個對象是不可變的。在其內部跟咱們上面說的同樣，建立了{current: null}並將其返回。

forwardRef的使用

const FunctionComp = React.forwardRef((props, ref) => (
  <div type="text" ref={ref}>Hello React</div>
))

class FnRefDemo extends PureComponent {
  constructor() {
    super();
    this.ref = React.createRef();
  }

  componentDidMount() {
    setTimeout(() => {
      this.ref.current.textContent = "Changed"
    }, 3000)
  }

  render() {
    return (
      <div className="RefDemo"> <FunctionComp ref={this.ref}/> </div> ) } } 複製代碼

forwardRef的使用，可讓Function Component使用ref，傳遞參數時須要注意傳入第二個參數ref

forwardRef的實現

export default function forwardRef<Props, ElementType: React$ElementType>( render: (props: Props, ref: React$Ref<ElementType>) => React$Node, ) {
  return {
    $$typeof: REACT_FORWARD_REF_TYPE,
    render,
  };
}

複製代碼

forwardRef接收一個函數做爲參數，這個函數就是咱們的函數組件，它包含props和ref屬性，forwardRef最終返回的是一個對象，這個對象包含兩個屬性：

$$typeof：這個屬性看過上一篇文章的小夥伴應該還記得，它是標誌React Element類型的東西。
render: 咱們傳遞進來的函數組件。

這裏說明一下，儘管forwardRef返回的對象中$$typeof爲REACT_FORWARD_REF_TYPE,可是最終建立的ReactElement的$$typeof仍然是REACT_ELEMENT_TYPE

這裏文字描述有點繞，配合圖片來看文字會好點。

在上述forwardRef使用的代碼中建立的FunctionComp是{$$typeof:REACT_FORWARD_REF_TYPE,render}這個對象，在使用<FunctionComp ref={this.ref}/>時，它的本質是React.createElement(FunctionComp, {ref: xxxx}, null)這樣的，此時FunctionComp是咱們傳進createElement中的type參數，createElement返回的element的$$typeof仍然是REACT_ELEMENT_TYPE；

ReactChildren的使用方法和實現

ReactChildren的使用

function ParentComp ({children}) {
  return (
    <div className="parent"> <div className="title">Parent Component</div> <div className="content"> {children} </div> </div>
  )
}
複製代碼

這樣的代碼你們平時用的應該多一點，在使用ParentComp組件時候，能夠在標籤中間寫一些內容，這些內容就是children。

來看看React.Children.map的使用

function ParentComp ({children}) {
  return (
    <div className="parent"> <div className="title">Parent Component</div> <div className="content"> {React.Children.map(children, c => [c,c, [c]])} </div> </div>
  )
}

class ChildrenDemo extends PureComponent{
  constructor() {
    super()
    this.state = {}
  }

  render() {
    return (
      <div className="childrenDemo"> <ParentComp> <div>child 1 content</div> <div>child 2 content</div> <div>child 3 content</div> </ParentComp> </div>
    )
  }
}

export default ChildrenDemo;
複製代碼

咱們在使用這個API的時候，傳遞了兩個參數，第一個是children，你們應該比較熟悉，第二個是一個回調函數，回調函數傳入一個參數（表明children的一個元素），返回一個數組（數組不是一位數組，裏面三個元素最後一個仍是數組），在結果中咱們能夠看到，這個API將咱們返回的數組平鋪爲一層[c1,c1,c1,c2,c2,c2,c3,c3,c3]，瀏覽器中顯示的也就如上圖所示。

有興趣的小夥伴能夠嘗試閱讀官方文檔對於這個api的介紹

ReactChildren的實現

在react.js中定義React時候咱們能夠看到一段關於Children的定義

Children: {
    map,
    forEach,
    count,
    toArray,
    only,
  },
複製代碼

Children包含5個API，這裏咱們先詳細討論map API。這一部分並非很好懂，請你們看的時候必定要用心。

筆者讀這一部分也是費了很大的勁，而後用思惟導圖軟件畫出了這個思惟導圖+流程圖的東西（暫時就給它起名爲思惟流程圖，其實更流程一點，而不思惟），畫得仍是比較詳細的，因此就很大，小夥伴最好把這個圖下載下來放大看（能夠配合源碼，也能夠配合下文），圖片地址user-gold-cdn.xitu.io/2019/8/21/1…

因爲圖過小不清楚，下面也會分別截出每一個函數的流程圖。

打開packages/react/src/ReactChildren.js，找到mapChildren

function mapChildren(children, func, context) {
  if (children == null) {
    return children;
  }
  const result = [];
  mapIntoWithKeyPrefixInternal(children, result, null, func, context);
  return result;
}
複製代碼

這段代碼短小精悍，給咱們提供了直接使用的API。它內部邏輯也很是簡單，首先看看children是否爲null,若是若是爲null就直接返回null，若是不是，則定義result（初始爲空數組）來存放結果，通過mapIntoWithKeyPrefixInternal的一系列處理，獲得結果。結果不論是null仍是result，其實咱們再寫代碼的時候都遇到過，若是一個組件中間什麼都沒傳，結果就是null什麼都不會顯示，若是傳遞了一個<div>那就顯示這個div，若是傳遞了一組div那就顯示這一組（此時就是children不爲null的狀況），最後顯示出來的東西也就是result這個數組。

這一系列處理就是什麼處理？

function mapIntoWithKeyPrefixInternal(children, array, prefix, func, context) {
  let escapedPrefix = '';
  if (prefix != null) {
    escapedPrefix = escapeUserProvidedKey(prefix) + '/';
  }
  const traverseContext = getPooledTraverseContext(
    array,
    escapedPrefix,
    func,
    context,
  );
  traverseAllChildren(children, mapSingleChildIntoContext, traverseContext);
  releaseTraverseContext(traverseContext);
}
複製代碼

在進入這個函數的時候，必定要注意使用這個函數時候傳遞進來的參數到底是哪幾個，否則後面傳遞次數稍微一多就會暈頭轉向。

從上一個函數跳過來的時候傳遞了5個參數，你們能夠注意一下這五個參數表明的是什麼：

children：咱們再組件中間寫的JSX代碼
result: 最終處理完成存放結果的數組
prefix: 前綴，這裏爲null
func: 咱們在演示使用的過程當中傳入的第二個參數，是個回調函數c => [c,c,[c]]
context: 上下文對象

這個函數首先對prefix前綴字符串作了個處理，處理完以後仍是個字符串。而後經過getPooledTraverseContext函數從對象重用池中拿出一個對象，說到這裏，咱們就不得不打斷一下這個函數的講解，忽然出現一個對象重用池的概念，不少人會很懵逼，而且若是強制把這個函數解析完再繼續下一個，會讓不少讀者產生不少疑惑，不利於後面源碼的理解。

暫時跳到getPooledTraverseContext看看對象重用池

const POOL_SIZE = 10;
const traverseContextPool = [];
function getPooledTraverseContext( mapResult, keyPrefix, mapFunction, mapContext, ) {
  if (traverseContextPool.length) {
    const traverseContext = traverseContextPool.pop();
    traverseContext.result = mapResult;
    traverseContext.keyPrefix = keyPrefix;
    traverseContext.func = mapFunction;
    traverseContext.context = mapContext;
    traverseContext.count = 0;
    return traverseContext;
  } else {
    return {
      result: mapResult,
      keyPrefix: keyPrefix,
      func: mapFunction,
      context: mapContext,
      count: 0,
    };
  }
}
複製代碼

首先看在使用getPooledTraverseContext獲取對象的時候，傳遞了4個參數：

array: 上個函數中對應的result，表示最終返回結果的數組
escapedPrefix: 前綴，一個字符串，沒什麼好說的
func: 咱們使用API傳遞的回調函數 c=>[c,c,[c]]
context: 上下文對象

而後咱們看看它作了什麼，它去一個traverseContextPool數組（這個數組默認爲空數組，最多存放10個元素）中嘗試pop取出一個元素，若是能取出來的話，這個元素是一個對象，有5個屬性，這裏會把傳進來的4個參數保存在這四個元素中，方便後面使用，另一個屬性是個用來計數的計數器。若是沒取出來，就返回一個新對象，包含的也是這五個屬性。這裏要跟你們說說對象重用池了。這個對象有5個屬性，若是每次使用這個對象都從新建立一個，那麼會有較大的建立對象開銷，爲了節省這部分建立的開銷，咱們能夠在使用完這個對象以後，把它的5個屬性都置爲空(count就是0了),而後扔回這個數組（對象重用池）中，後面要用的時候就直接從對象重用池中拿出來，沒必要從新建立對象，增長開銷了。

再回到mapIntoWithKeyPrefixInternal函數中繼續向下讀 經過上一步拿到一個帶有5個屬性的對象以後，繼續通過traverseAllChildren函數的一系列處理，獲得了最終的結果result，其中具體內容太多下面再說，而後經過releaseTraverseContext函數釋放了那個帶5個參數的對象。咱們先來看看如何釋放的：

function releaseTraverseContext(traverseContext) {
  traverseContext.result = null;
  traverseContext.keyPrefix = null;
  traverseContext.func = null;
  traverseContext.context = null;
  traverseContext.count = 0;
  if (traverseContextPool.length < POOL_SIZE) {
    traverseContextPool.push(traverseContext);
  }
}
複製代碼

這裏也跟咱們上面說的對象重用池有所對應，這裏先把這個對象的5個屬性清空，而後看看對象重用池是否是有空，有空的話就把這個清空的屬性放進去，方便下次使用，節省建立開銷。

traverseAllChildren和traverseAllChildrenImpl的實現

function traverseAllChildren(children, callback, traverseContext) {
  if (children == null) {
    return 0;
  }

  return traverseAllChildrenImpl(children, '', callback, traverseContext);
}
複製代碼

這個函數基本沒作什麼重要的事，僅僅判斷了children是否爲null，若是是的話就返回0，不是的話就進行具體的處理。仍是強調這裏傳遞的參數，必定要注意，看圖就能夠了，就不用文字描述了。

重要的是traverseAllChildrenImpl函數，這個函數有點長，這裏給你們分紅了兩部分，能夠分開看

function traverseAllChildrenImpl( children, nameSoFar, callback, traverseContext, ) {
// 第一部分
  const type = typeof children;

  if (type === 'undefined' || type === 'boolean') {
    children = null;
  }

  let invokeCallback = false;

  if (children === null) {
    invokeCallback = true;
  } else {
    switch (type) {
      case 'string':
      case 'number':
        invokeCallback = true;
        break;
      case 'object':
        switch (children.$$typeof) {
          case REACT_ELEMENT_TYPE:
          case REACT_PORTAL_TYPE:
            invokeCallback = true;
        }
    }
  }

  if (invokeCallback) {
    callback(
      traverseContext,
      children,
      nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar,
    );
    return 1;
  }
  
  // 第二部分

  let child;
  let nextName;
  let subtreeCount = 0; // Count of children found in the current subtree.
  const nextNamePrefix =
    nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;

  if (Array.isArray(children)) {
    for (let i = 0; i < children.length; i++) {
      child = children[i];
      nextName = nextNamePrefix + getComponentKey(child, i);
      subtreeCount += traverseAllChildrenImpl(
        child,
        nextName,
        callback,
        traverseContext,
      );
    }
  } else {
    const iteratorFn = getIteratorFn(children);
    if (typeof iteratorFn === 'function') {
      const iterator = iteratorFn.call(children);
      let step;
      let ii = 0;
      while (!(step = iterator.next()).done) {
        child = step.value;
        nextName = nextNamePrefix + getComponentKey(child, ii++);
        subtreeCount += traverseAllChildrenImpl(
          child,
          nextName,
          callback,
          traverseContext,
        );
      }
    } else if (type === 'object') {
      let addendum = '';
      const childrenString = '' + children;
      invariant(
        false,
        'Objects are not valid as a React child (found: %s).%s',
        childrenString === '[object Object]'
          ? 'object with keys {' + Object.keys(children).join(', ') + '}'
          : childrenString,
        addendum,
      );
    }
  }

  return subtreeCount;
}
複製代碼

上面的流程圖說的很詳細了，你們能夠參照來看源碼。這裏就簡單說一下這個函數的兩部分分別做了什麼事。第一部分是對children類型進行了檢查（沒有檢查爲Array或迭代器對象的狀況），若是檢查children是合法的ReactElement就會進行callback的調用，這裏必定要注意callback傳進來的是誰，這裏是callback爲mapSingleChildIntoContext,一直讓你們關注傳參問題，就是怕你們看着看着就搞混了。第二部分就是針對children是數組和迭代器對象的狀況進行了處理（迭代器對象檢查的原理是obj[Symbol.iterator]，比較簡單你們能夠本身定位源碼找一下具體實現），而後對他們進行遍歷，每一個元素都從新執行traverseAllChildrenImpl函數造成遞歸。它其實只讓可渲染的單元素進行下一步callback的調用，若是是數組或迭代器，就進行遍歷。

最後一步callback => mapSingleChildIntoContext的實現

function mapSingleChildIntoContext(bookKeeping, child, childKey) {
  const {result, keyPrefix, func, context} = bookKeeping;

  let mappedChild = func.call(context, child, bookKeeping.count++);
  if (Array.isArray(mappedChild)) {
    mapIntoWithKeyPrefixInternal(mappedChild, result, childKey, c => c);
  } else if (mappedChild != null) {
    if (isValidElement(mappedChild)) {
      mappedChild = cloneAndReplaceKey(
        mappedChild,
        // Keep both the (mapped) and old keys if they differ, just as
        // traverseAllChildren used to do for objects as children
        keyPrefix +
          (mappedChild.key && (!child || child.key !== mappedChild.key)
            ? escapeUserProvidedKey(mappedChild.key) + '/'
            : '') +
          childKey,
      );
    }
    result.push(mappedChild);
  }
}
複製代碼

這裏咱們就用到了從對象重用池拿出來的對象，那個對象做用其實就是利用那5個屬性幫咱們保存了一些須要使用的變量和函數，而後執行咱們傳入的func（c => [c,c,[c]]）,若是結果不是數組而是元素而且不爲null就會直接存儲到result結果中，若是是個數組就會對它進行遍歷，從mapIntoWithKeyPrefixInternal開始從新執行造成遞歸調用，直到最後將嵌套數組中全部元素都拿出來放到result中，這樣就造成了咱們最初看到的那種效果，無論咱們的回調函數是多少層的數組，最後都會變成一層。

小結

這裏文字性的小結就留給你們，給你們畫了一張總結性的流程圖（有參考yck大神的圖），但實際上是根據本身看源碼畫出來的並非搬運的。

ReactChildren的其餘方法

{
  forEach,
  count,
  toArray,
  only,
}
複製代碼

對於這幾個方法，你們能夠自行查看了，建議先瀏覽一遍forEach，跟map很是類似，可是比map少了點東西。其餘幾個都是四五行的代碼，你們本身看看。裏面用到的函數咱們上面都有講到。

小結

這篇文章跟你們一塊兒讀了Component、refs和Children相關的源碼，最複雜的仍是數Children了，說實話，連看大神博客，看源碼、畫圖帶寫文章，花了七八個小時，其實內容跟大神們的文章比起來仍是很不同的，若是基礎不是很好的同窗，我感受這裏會講的更詳細。你們一塊兒努力，明天的咱們必定會感謝今天努力的本身。

原創不易，若是本篇文章對你有幫助，但願能夠幫忙點個贊，有興趣也能夠幫忙github點個star，感謝各位。本篇文章github地址