React學習---渲染機制

? ?? ?在介紹React渲染機制之間先來說一說下面幾個概念，對于新入手React的學員來說，經常會被搞蒙圈。
? ?? ?React與ReactDOM區別
? ?? ?在v0.14前,ReactDOM是React的函數，之所以在v0.14之后分成兩個包是package是因為

? ?? ?As we look at packages like react-native, react-art, react-canvas, and react-three, it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
? ?? ?To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main react package into two: react and react-dom. This paves the way to writing components that can be shared between the web version of React and React Native. We don’t expect all the code in an app to be shared, but we want to be able to share the components that do behave the same across platforms.

? ?? ?可見，React分為react-dom和react的原因是React-Native的出現，它可以實現跨平臺實現相同的組件。
? ?? ?react包包含了React.createElement、 .createClass、 .Component、 .PropTypes、.Children以及其他的描述元素和組件的類。
? ?? ?react-dom包包含了ReactDOM.render、.unmountComponentAtNode和.findDOMNode等。下面看一個創建組件的實例：

var React = require('react');
var ReactDOM = require('react-dom');
var MyComponent = React.createClass({
render: function() {
return <div>Hello World</div>;
}
});
ReactDOM.render(<MyComponent />, node);

? ?? ?ReactDOM.render是React的最基本方法用于將模板轉為HTML語言，并插入指定的DOM節點。它可以將一個React元素呈現在指定的DOM container中，并返回對組件的引用對象。

? ?? ?Component、Element和Component

? ?? ? Component
? ?? ?Component組件就是JavaScript函數，可以接受任意參數。可以使用createClass和Component創建組件。createClass如其名就是創建React組件對應的類，描述你將要創建組件的各種行為，其中只有當組件被渲染時需要輸出的內容的render接口是必須實現的，其他都是可選：

var SayHello = React.createClass({
      render: function() {
      return <div>Hello {this.props.name}</div>;
    }
});

從 React 0.13 開始，可以使用 ES6 Class代替 React.createClass了

class SayHello extends React.Component {
render() {
return <div>Hello {this.props.name}</a> </div>;
}
}

注意：（1）為了區分Component和DOM 元素，所有Component名字要首字母大寫。
? ?? ?（2）所有的React組件都不能修改它的prop屬性的值
? ?? ? Element
? ?? ?Element是class的一個實例，它描述DOM節點或component實例的字面級對象。它包含一些信息，包括組件類型type和屬性props。就像一個描述DOM節點的元素(虛擬節點)。可以使用createElement，創建React組件實例

ReactElement.createElement= function(type, config, children) {
...
}

在上一篇文章中我們已經講到，當我們用JSX來描述< SayHello />時 ，編譯后就是React.createElement()。
? ?? ?Factory
? ?? ?React.createFactory和ReactElement.createElement一樣，但是
Factory返回的是給定元素類型或組件類的實例。React.createFactory的定義基本就是如下形式，Element 的類型被提前綁定了

ReactElement.createFactory = function (type) {
var factory = ReactElement.createElement.bind(null, type);
    factory.type = type;
    return factory;
};

官方鼓勵使用JSX或者React.creatElement。下面進入今天的主題：React的渲染機制
? ?? ?React渲染機制
? ?? ?假設要實現的渲染代碼如下：

  class Form extends React.Component {
    constructor() {
    super();
  }
  render() {
    return (
        <form>
          <input type="text"/>
        </form>
    );
  }
}

ReactDOM.render( (
  <div className="test">
    <p>請輸入你的信息</p>
    <Form/>
  </div>
), document.getElementById('example'))

? ?? ?從ReactDOM入口開始，找到ReactDOM.js文件

var ReactDOMComponentTree = require('./ReactDOMComponentTree');
var ReactDefaultInjection = require('./ReactDefaultInjection');
var ReactMount = require('./ReactMount');
var ReactReconciler = require('./ReactReconciler');
var ReactUpdates = require('./ReactUpdates');
var ReactVersion = require('./ReactVersion');

var findDOMNode = require('./findDOMNode');
var getHostComponentFromComposite = require('./getHostComponentFromComposite');
var renderSubtreeIntoContainer = require('./renderSubtreeIntoContainer');
var warning = require('fbjs/lib/warning');
ReactDefaultInjection.inject(); 
var ReactDOM = {
  findDOMNode: findDOMNode,
  render: ReactMount.render,
  unmountComponentAtNode: ReactMount.unmountComponentAtNode,
  version: ReactVersion,

  /* eslint-disable camelcase */
  unstable_batchedUpdates: ReactUpdates.batchedUpdates,
  unstable_renderSubtreeIntoContainer: renderSubtreeIntoContainer
  /* eslint-enable camelcase */
};

? ?? ?ReactDOM.render()方法來自ReactMount文件的render方法：

render: function (nextElement, container, callback) {
    return ReactMount._renderSubtreeIntoContainer(null, nextElement, container, callback);
  },

? ?? ? Render方法返回的是當前文件下的_renderSubtreeIntoContainer方法，顧名思義，它的作用是將子樹nextElement注入到指定的container中，并調用其回調方法_renderSubtreeIntoContainer方法主要完成以下一個功能：

  1. 調用React.createElement生成待插入節點的虛擬DOM的實例對象（上篇文章中已經講到，這里就不再重復敘述）
  2. 與之前的component比較，如果是初次渲染直接將虛擬DOM轉換為真實DOM
  3. 將真實的組件寫到對應的container節點中
_renderSubtreeIntoContainer: function (parentComponent, nextElement, container, callback) {
/*
*將callback放入到React的更新隊列中，判斷nextElement有效性以及當前是發開環境還是生產環境。（代碼省略）
*/
…

var nextWrappedElement = React.createElement(TopLevelWrapper, {child: nextElement});
// 返回一個ReactElement實例對象，也就是虛擬DOM的實例對象，下面就要把它渲染出來
var nextContext;
/*（1）判斷是否有parentComponent，如果有則將其寫到parentComponent*/
if (parentComponent) {
var parentInst = ReactInstanceMap.get(parentComponent);
nextContext = parentInst._processChildContext(parentInst._context);
} else {
nextContext = emptyObject;
}

var prevComponent =getTopLevelWrapperInContainer(container);
 /*
*（2）判斷是否有prevComponent，如果有則取其child，利用Diff算法判斷是否需要更新，如果需要則調用_updateRootComponen 方法，并return結果。對于初次渲染不需要該過程。 
*/

if (prevComponent) {
var prevWrappedElement = prevComponent._currentElement;
var prevElement = prevWrappedElement.props.child;
 // shouldUpdateReactComponent方法判斷是否需要更新,對同一DOM進行比較，type相同，key(如果有)相同的組件做DOM diff 

if (shouldUpdateReactComponent(prevElement, nextElement)) {
var publicInst = prevComponent._renderedComponent.getPublicInstance();
var updatedCallback = callback && function () {
callback.call(publicInst);
};
ReactMount._updateRootComponent(prevComponent, nextWrappedElement, nextContext, container, updatedCallback);
return publicInst;
} else {
ReactMount.unmountComponentAtNode(container);
}
}
/*
*（3）對于prevElement為null直接跳到此步
var reactRootElement = getReactRootElementInContainer(container);
var containerHasReactMarkup = reactRootElement && !!internalGetID(reactRootElement);
var containerHasNonRootReactChild = hasNonRootReactChild(container);
var shouldReuseMarkup = containerHasReactMarkup && !prevComponent && !containerHasNonRootReactChild;
/*
*3核心部分，調用_renderNewRootComponent，_renderedComponent，getPublicInstance三個方法，
*/
var component =ReactMount._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, nextContext)._renderedComponent.getPublicInstance();
if (callback) {
callback.call(component);
}
return component;
}

下面來看一看ＲenderNewRootComponent方法的源碼

（1）_renderNewRootComponent：

_renderNewRootComponent: function (nextElement, container, shouldReuseMarkup, context) {
… …
 /*
*第一部分是調用instantiateReactComponen方法返回虛擬DOM對應的DOM，并將其返回結果作為_renderNewRootComponent的最終返回結果 
*/
var componentInstance = <a name="OLE_LINK14"></a> <a name="OLE_LINK13">instantiateReactComponent</a> (nextElement, false);
return componentInstance;
 /*
*第二部分是處理batchedMountComponentIntoNode方法，并將上面的結果componentInstance 結果插入到DOM中
*/*

ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context);
var wrapperID = componentInstance._instance.rootID;
instancesByReactRootID[wrapperID] = componentInstance;
return componentInstance;
}

解析第一部分：將虛擬DOM生成DOM
? ?? ? 再來看一看instantiateReactComponent方法，它是從instantiateReactComponent文件require進來的，輸入參數是虛擬DOM節點，主要實現的功能是將虛擬DOM生成DOM。根element的類型不同，分別實例化ReactDOMTextComponent, ReactDOMComponent, ReactCompositeComponent類。
下面來看一看instantiateReactComponent.js源碼的偽代碼

function instantiateReactComponent(node, shouldHaveDebugID) {
var instance;
/*
*判斷node類型，不同的類型調用不同的渲染方法
*/
/*節點為空*/
instance = ReactEmptyComponent.create(instantiateReactComponent); 
/*如果節點是宿主內置節點，譬如瀏覽器的 的節點*/
instance = ReactHostComponent.createInternalComponent(element);

instance = new ReactCompositeComponentWrapper(element);
/*如果節點是字符串或數字*/
instance = ReactHostComponent.createInstanceForText(node);
return instance;
}

解析第二部分：將新的component分批插入到DOM中
? ?? ? batchedUpdates是ReactUpdates的一個方法，使用batchingStrategy更新DOM

function batchedUpdates(callback, a, b, c, d, e) {
ensureInjected();
return batchingStrategy .batchedUpdates(callback, a, b, c, d, e);
}

? ?? ? batchedUpdates 方法的回調函數是batchedMountComponentIntoNode方法

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);
}

batchedMountComponentIntoNode 方法通過
transaction.perform調用mountComponentIntoNode方法。

/*
* Mounts this component and inserts it into the DOM.
* @param {ReactComponent} componentInstance The instance to mount.
* @param {DOMElement} container DOM element to mount into.
* @param {ReactReconcileTransaction} transaction
* @param {boolean} shouldReuseMarkup If true, do not insert markup
*/
function mountComponentIntoNode(wrapperInstance, container, transaction, shouldReuseMarkup, context) {
var markerName;
if (ReactFeatureFlags.logTopLevelRenders) {
var wrappedElement = wrapperInstance._currentElement.props.child;
var type = wrappedElement.type;
markerName = 'React mount: ' + (typeof type === 'string' ? type : type.displayName || type.name);
console.time(markerName);
}
 **//*調用對應ReactReconciler中的mountComponent方法來渲染組件,返回React組件解析后的HTML** 

var markup = ReactReconciler.mountComponent(wrapperInstance, transaction, null, ReactDOMContainerInfo(wrapperInstance, container), context, 0 /* parentDebugID */);
if (markerName) {
console.timeEnd(markerName);
}
wrapperInstance._renderedComponent._topLevelWrapper = wrapperInstance;
 /*將解析出來的HTML插入DOM中 ReactMount._mountImageIntoNode</a> (markup, container, wrapperInstance, shouldReuseMarkup, transaction);

}

_mountImageIntoNode 可以實現將HTML插入DOM中的操作方法是：

_mountImageIntoNode: function (markup, container, instance, shouldReuseMarkup, transaction) {
/*是否復用markup
if (shouldReuseMarkup) {
/*如果可以復用，直接將instance插入到根元素** 
var rootElement = getReactRootElementInContainer(container);
if (ReactMarkupChecksum.canReuseMarkup(markup, rootElement)) {
ReactDOMComponentTree.precacheNode(instance, rootElement);
return;
} else {
/*創建新的normalizedMarkup
var checksum = rootElement.getAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME);
rootElement.removeAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME);
var rootMarkup = rootElement.outerHTML;
rootElement.setAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME, checksum);
var normalizedMarkup = markup;
if (process.env.NODE_ENV !== 'production') {
var normalizer;
if (container.nodeType === ELEMENT_NODE_TYPE) {
normalizer = document.createElement('div');
normalizer.innerHTML = markup;
normalizedMarkup = normalizer.innerHTML;
} else {
normalizer = document.createElement('iframe');
document.body.appendChild(normalizer);
normalizer.contentDocument.write(markup);
normalizedMarkup = normalizer.contentDocument.documentElement.outerHTML;
document.body.removeChild(normalizer);
}
}
if (transaction.
while (container.lastChild) {
container.removeChild(container.lastChild);
}
DOMLazyTree.insertTreeBefore(container, markup, null);
} else {
/*利用innerHTML將markup插入到container這個DOM元素上** 
setInnerHTML(container, markup);
 /*將instance保存到container的原生節點firstChild上*/
ReactDOMComponentTree.precacheNode(instance, container.firstChild);
}
if (process.env.NODE_ENV !== 'production') {
var hostNode = ReactDOMComponentTree.getInstanceFromNode(container.firstChild);
if (hostNode._debugID !== 0) {
ReactInstrumentation.debugTool.onHostOperation({
instanceID: hostNode._debugID,
type: 'mount',
payload: markup.toString()
});
}
}
}
};

這么多的內容有點懵懵的，下面我們通過簡單的流程圖總結：


繪圖1.jpg
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 原教程內容詳見精益 React 學習指南，這只是我在學習過程中的一些閱讀筆記，個人覺得該教程講解深入淺出，比目前大...
    leonaxiong閱讀 2,860評論 1贊 18
  • 自己最近的項目是基于react的，于是讀了一遍react的文檔，做了一些記錄(除了REFERENCE部分還沒開始讀...
    潘逸飛閱讀 3,494評論 1贊 10
  • React Native是基于React的，在開發React Native過程中少不了的需要用到React方面的知...
    亓凡閱讀 1,516評論 1贊 4
  • 現在最熱門的前端框架，毫無疑問是 React 。上周，基于 React 的 React Native 發布，結果一...
    sakura_L閱讀 442評論 0贊 0
  • 楊小蓮，白族女孩，前不久已成為女孩她媽了。初見小蓮，是大學報道第一天，似乎什么都變得不順利了當爸爸說他要回家的那一...
    燊兒閱讀 276評論 0贊 0