React原始碼解讀之componentMount

ZHONGJIAFENG7發表於2018-07-18

作為初級碼農不該天花亂墜大講情懷，一開始入坑了幾天對於很多地方充滿了愛迪生般的諸多疑問(莫名把自己誇了一波，XD)，所以打算看一波原始碼，這個過程可以說是非常曲折，本人智商不高，看了四五遍部分原始碼後，一臉懵逼，於是在接下來的一週內處於渾渾噩噩，若即若離的抽離狀態，於是放棄瞭解讀，最近感覺學習react有兩個月了，公司大牛的教誨和啟發，打算原路折回再次拾起react這個胖小孩，不得不說有大牛的幫助真會讓你進步飛快。

這是本人的第一篇react相關的文章，本來只是留作自己筆記之用，結果筆記越寫越多，一方面是為了加深自己對於優雅的react的理解，另一方面為了給計劃學習react的旁友們提供一點微不足道的小思路。當然一提到分析解讀原始碼，這幾個莊重的字眼的時候，首先是油然而生的濃濃的自豪感，自豪感不能白來，因此也是謹慎地翻牆看了很多別人的解讀，對於一些大神們解讀首先是敬佩，然後覺得應該仿效他們進行更多詳細的補充，當然寫的有所紕漏，不足之處還希望大神們指出。

廢話太多了，進入正題，下面是我自己列出的TODOList，在讀原始碼前應該需要理解一些相關的要點

1.什麼是JSX?

JSX 的官方定義是類 XML 語法的 ECMAScript 擴充套件。它完美地利用了 JavaScript 自帶的語法和特性，並使用大家熟悉的 HTML 語法來建立虛擬元素。使用類 XML 語法的好處是標籤可以任意巢狀，我們可以像HTML一樣清晰地看到DOM樹

JSX 將 HTML 語法直接加入到 JavaScript程式碼中，在實際開發中，JSX在產品打包階段都已經編譯成純JavaScript，不會帶來任何副作用，反而會讓程式碼更加直觀並易於維護。

更多詳見：CSDN

2.React.createElement

React.createElement(type, config, children) 做了三件事：

把 config裡的資料一項一項拷入props,
拷貝 children 到 props.children,
拷貝 type.defaultProps 到 props;

3.元件生命週期

4.renderedElement和ReactDOMComponent

ReactElement是React元素在記憶體中的表示形式,可以理解為一個資料類，包含type，key，refs，props等成員變數

ReactComponent是React元素的操作類，包含mountComponent(), updateComponent()等很多操作元件的方法，主要有ReactDOMComponent, ReactCompositeComponent, ReactDOMTextComponent, ReactDOMEmptyComponent四個型別

5.inst

inst是對於元件的例項化物件，主要包括props, refs, context, updater更新方法集, state等。

頂級元件的例項化屬性：

子元件的例項化屬性：

6._currentElement

currentElement即為每次例項化的renderedElement，為了在componentInstance儲存當前資訊 var ReactCompositeComponentWrapper = function (element) { this.construct(element); };

原始碼分析

接下來配合一個小例子來大概分析下react內部神祕的元件掛載操作

<!DOCTYPE html>
<html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script src="./js/react.js"></script>
    	<script src="./js/react-dom.js"></script>
    	<script src="./js/browser.js"></script>
    	<script type="text/babel">
    	  class Children extends React.Component {
    	  	constructor(...args) {
    	  		super(...args);
    	  	}
    
    	  	render() {
    	  		return <div>children</div>
    	  	}
    	  }
    
    		class Comp extends React.Component{
    			constructor(...args) {
    				super(...args);
    				this.state = {i: 0}
    			}
    			render(){
    				return <div onClick={() => {
    					this.setState({i: this.state.i + 1})
    				}}>Hello, world! {this.props.name}, 年齡{this.props.age} {this.state.i} <i>222</i><Children /></div>;
    			}
    		}
    		window.onload = function(){
    			var oDiv = document.getElementById('div1');
    			ReactDOM.render(
    				<Comp name="zjf" age='24'/>,
    				oDiv
    			);
    		}
    	</script>
	</head>
	<body>
		<div id="div1"><div>2222</div></div>
	</body>
</html>
複製程式碼

本次原始碼分析的版本號是v15.6.0(160之後變化很大有點看不懂),可以使用git reset --hard v15.6.0操作進行版本回退 首先函式的入口是reactDOM.render(), 這個函式可以放兩個引數，第一個為需要渲染的元件，第二個為第一個元件掛載的物件。通過呼叫ReactDom.render() -> 呼叫ReactMount.render() -> 呼叫renderSubtreeIntoContainer, 在這個函式裡個人認為需要知道：

// parentComponent一般為null, nextElement，container分別為reactDOM.render中的前兩個引數
renderSubtreeIntoContainer(parentComponent, nextElement, container, callback){
	// ...
	// TopLevelWrapper為頂級容器，型別為object(其實是一個方法)，內部有個rootID屬性，值得注意的是該方法原型鏈上有render方法,該方法是第一個被呼叫的，它應該很自豪
	var nextWrappedElement = React.createElement(TopLevelWrapper, {
	  child: nextElement
	});
	// 開始進入正軌，該方法內部會根據nextWrapperElement生成相應型別的元件
	var component = ReactMount._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, nextContext)._renderedComponent.getPublicInstance()
}
複製程式碼

_renderNewRootComponent: function (nextElement, container, shouldReuseMarkup, context) {

  // 例項化元件，通過nextElement.type判斷，string,object生成ReactDOMComponent， ReactCompositeComponent如果不存在nextElement則生成ReactEmptyComponent，如果typeof nextElement型別為string或者number直接生成ReactDOMTextComponent
  var componentInstance = instantiateReactComponent(nextElement, false);

  // The initial render is synchronous but any updates that happen during, rendering, in componentWillMount or componentDidMount, will be batched according to the current batching strategy.

  ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context);
  
  return componentInstance;
},
複製程式碼

// transaction.perform其實是事務，事務中簡單地說有initialize->執行perform第一個callback->close操作，準備在setState介紹
function batchedMountComponentIntoNode(componentInstance, container, shouldReuseMarkup, context) {
  //
  var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
  /* useCreateElement */
  !shouldReuseMarkup && ReactDOMFeatureFlags.useCreateElement);
  transaction.perform(mountComponentIntoNode, null, componentInstance, container, transaction, shouldReuseMarkup, context);
  ReactUpdates.ReactReconcileTransaction.release(transaction);
}
複製程式碼

function mountComponentIntoNode(wrapperInstance, container, transaction, shouldReuseMarkup, context) {
  // 根據wrapperInstance來呼叫不同元件型別的mountComponent方法
  var markup = ReactReconciler.mountComponent(wrapperInstance, transaction, null, ReactDOMContainerInfo(wrapperInstance, container), context, 0 /* parentDebugID */);
  wrapperInstance._renderedComponent._topLevelWrapper = wrapperInstance;
  // setInnerHTML(container, markup)，最終會將markup虛擬節點插入真正的DOM樹
  ReactMount._mountImageIntoNode(markup, container, wrapperInstance, shouldReuseMarkup, transaction);
}
複製程式碼

mountComponent: 不同的React元件的mountComponent實現都有所區別，下面分析React自定義元件類

// 來到了元件的掛載，需要注意幾個變數:
renderedElement, _renderedComponent,
inst, ReactInstanceMap.set(inst, this), 
_pendingStateQueue, _pendingForceUpdate, _processPendingState，_processContext, 
componentWillMount, componentDidMount 
// 本質上是呼叫Component構造方法的新例項物件，這個instance上會新增，context，props，refs以及updater屬性(見圖二)，後續使用Map的形式用此作為key，元件作為value，方便之後獲取元件，比如上面所說的type為TopLevelWrapper，構造其例項
var Component = this._currentElement.type;
var inst = this._constructComponent(doConstruct, publicProps, publicContext, updateQueue);
// inst或者inst.render為空對應的是stateless元件，也就是無狀態元件
// 無狀態元件沒有例項物件，它本質上只是一個返回JSX的函式而已。是一種輕量級的React元件
if (!shouldConstruct(Component) && (inst == null || inst.render == null)) {
  renderedElement = inst;
  warnIfInvalidElement(Component, renderedElement);
  inst = new StatelessComponent(Component);
}
// Store a reference from the instance back to the internal representation
ReactInstanceMap.set(inst, this);
this._pendingStateQueue = null;
this._pendingReplaceState = false;
this._pendingForceUpdate = false;
// ...
// 初始化掛載
markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context);
// 將componentDidMount以事務的形式進行呼叫
transaction.getReactMountReady().enqueue(function () {
  measureLifeCyclePerf(function () {
    return inst.componentDidMount();
  }, _this._debugID, 'componentDidMount');
});
複製程式碼

圖二:

performInitialMount:

// render前呼叫componentWillMount
inst.componentWillMount()
// 將state提前合併，故在componentWillMount中呼叫setState不會觸發重新render，而是做一次state合併。這樣做的目的是減少不必要的重新渲染
// _processPendingState進行原有state的合併, _assign(nextState, typeof partial === 'function' ? partial.call(inst, nextState, props, context) : partial); 以及設定this._pendingStateQueue = null，這也就意味著dirtyComponents進入下一次迴圈時，執行performUpdateIfNecessary不會再去更新元件
if (this._pendingStateQueue) {
    inst.state = this._processPendingState(inst.props, inst.context);
 }
 // 如果不是stateless，即無狀態元件，則呼叫render，返回ReactElement
if (renderedElement === undefined) {
    renderedElement = this._renderValidatedComponent();
}
var nodeType = ReactNodeTypes.getType(renderedElement);
this._renderedNodeType = nodeType;
var child = this._instantiateReactComponent(renderedElement, nodeType !== ReactNodeTypes.EMPTY /* shouldHaveDebugID */
);
this._renderedComponent = child;

// 遞迴渲染，渲染子元件，返回markup，匹配同型別的元件,返回markup
var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
}
// 比如
	var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
複製程式碼

_renderValidatedComponent:

// 呼叫render方法，得到ReactElement。JSX經過babel轉譯後其實就是createElement()方法，比如上面所提到的TopLevelWrapper內有render方法(圖三,圖四)
var renderedComponent = inst.render();   
複製程式碼

圖三:

圖四:

由renderedElement.type型別可以知道所要生成的元件型別為reactDOMComponent，來看下這個物件下的mountComponent方法

if (namespaceURI === DOMNamespaces.html) {
   if (this._tag === 'script') {
     // 當插入標籤為script的時候react也進行了包裝，這樣script就只是innerHTML不會進行執行，不然會有注入的危險
     var div = ownerDocument.createElement('div');
     var type = this._currentElement.type;
     div.innerHTML = '<' + type + '></' + type + '>';
     el = div.removeChild(div.firstChild);
   } else if (props.is) {
     el = ownerDocument.createElement(this._currentElement.type, props.is);
   } else {
     // Separate else branch instead of using `props.is || undefined` above becuase of a Firefox bug.
     // See discussion in https://github.com/facebook/react/pull/6896
     // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240
     el = ownerDocument.createElement(this._currentElement.type);
   }
 } else {
   el = ownerDocument.createElementNS(namespaceURI, this._currentElement.type);
 }
 // Populate `_hostNode` on the rendered host/text component with the given DOM node.
 ReactDOMComponentTree.precacheNode(this, el);
 this._flags |= Flags.hasCachedChildNodes;
 if (!this._hostParent) {
	 // 在根節點上設定data-root屬性
	 DOMPropertyOperations.setAttributeForRoot(el);
 }
 this._updateDOMProperties(null, props, transaction);
 // 初始化lazyTree，返回例項    
 // node: node,
 // children: [],
 // html: null,
 // text: null,
 // toString: toString
 var lazyTree = DOMLazyTree(el);
 // 遍歷內部props，判斷props.children內部是string/number型別還是其他型別，如果是前者直接將內部children插入到node中去，否則就需要非string/number型別進行繼續渲染
 this._createInitialChildren(transaction, props, context, lazyTree);
 mountImage = lazyTree;
 return mountImage;
複製程式碼

上面程式碼其中有必要了解下DOMLazyTree的一些屬性方法因為之後會有呼叫以及_createInitialChildren，這個是將props.children轉換為innerHTML的關鍵

function DOMLazyTree(node) {
  return {
    node: node,
    children: [],
    html: null,
    text: null,
    toString: toString
  };
}

DOMLazyTree.insertTreeBefore = insertTreeBefore;
DOMLazyTree.replaceChildWithTree = replaceChildWithTree;
// 按序向節點的子節點列表的末尾新增新的子節點
DOMLazyTree.queueChild = queueChild;
// 按序插入HTML
DOMLazyTree.queueHTML = queueHTML;
// 按序插入文字
DOMLazyTree.queueText = queueText;
function queueChild(parentTree, childTree) {
  if (enableLazy) {
    parentTree.children.push(childTree);
  } else {
    parentTree.node.appendChild(childTree.node);
  }
}

function queueHTML(tree, html) {
  if (enableLazy) {
    tree.html = html;
  } else {
    setInnerHTML(tree.node, html);
  }
}

function queueText(tree, text) {
  if (enableLazy) {
    tree.text = text;
  } else {
    // 內部其實將node.textContent = text;
    setTextContent(tree.node, text);
  }
}
複製程式碼

看了這麼多是不是感覺到濃濃的基礎知識，insertBefore, appendChild, textContent, createElement,createElementNS,nodeType

  _createInitialChildren: function (transaction, props, context, lazyTree) {
    // Intentional use of != to avoid catching zero/false.
    var innerHTML = props.dangerouslySetInnerHTML;
    if (innerHTML != null) {
      if (innerHTML.__html != null) {
        DOMLazyTree.queueHTML(lazyTree, innerHTML.__html);
      }
    } else {
      // 這兩個是互斥的條件，contentToUse用來判讀是不是string，number，如果不是則返回null，childrenToUse生效
      var contentToUse = CONTENT_TYPES[typeof props.children] ? props.children : null;
      var childrenToUse = contentToUse != null ? null : props.children;
      // TODO: Validate that text is allowed as a child of this node
      if (contentToUse != null) {
	    // 省略一些程式碼...
	    // 上面有說過將內部其實就是插入text的操作, node.concontentText = contentToUse
        DOMLazyTree.queueText(lazyTree, contentToUse);
      } else if (childrenToUse != null) {
        // 對於其他型別繼續進行渲染
        var mountImages = this.mountChildren(childrenToUse, transaction, context);
        for (var i = 0; i < mountImages.length; i++) {
          // 向節點的子節點列表的末尾新增新的子節點
          DOMLazyTree.queueChild(lazyTree, mountImages[i]);
        }
      }
    }
  },
複製程式碼

// 這兩個是互斥的條件，contentToUse用來判讀是不是string，number，如果不是則返回null，childrenToUse生效
var contentToUse = CONTENT_TYPES[typeof props.children] ? props.children : null;
// 如果這個條件不為null
var childrenToUse = contentToUse != null ? null : props.children;
var mountImages = this.mountChildren(childrenToUse, transaction, context);
複製程式碼

mountChildren: function (nestedChildren, transaction, context) {
  // ...
  var mountImages = [];
  var index = 0;
  for (var name in children) {
    if (children.hasOwnProperty(name)) {
      var child = children[name];
      // 通過child的型別來例項化不同型別的元件
      var mountImage = ReactReconciler.mountComponent(child, transaction, this, this._hostContainerInfo, context, selfDebugID);
      child._mountIndex = index++;
      mountImages.push(mountImage);
    }
  }
  return mountImages;
},
複製程式碼