摘要：可以看到，組件其實(shí)是一個(gè)對(duì)象，并不是一個(gè)真實(shí)的。引入了一種新的原始數(shù)據(jù)類型，表示獨(dú)一無(wú)二的值。你好，這里是組件可以看到，都發(fā)生了變化，值就是我們賦予的值，中嵌套了屬性。根據(jù)最初的代碼，我們組件用到了。

react使用也有一段時(shí)間了，大家對(duì)這個(gè)框架褒獎(jiǎng)有加，但是它究竟好在哪里呢？
讓我們結(jié)合它的源碼，探究一二?。ó?dāng)前源碼為react16，讀者要對(duì)react有一定的了解）

根據(jù)react官網(wǎng)上的例子，快速構(gòu)建react項(xiàng)目

npx create-react-app my-app

cd my-app

npm start

打開項(xiàng)目并跑起來(lái)以后，暫不關(guān)心項(xiàng)目結(jié)構(gòu)及語(yǔ)法糖，看到App.js里，這是一個(gè)基本的react組件 我們console一下，看看有什么結(jié)果。

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends Component {

  render() {
    return (
      

        

          
          

            Edit src/App.js and save to reload.
          
        
      
    );
  }
}

export default App;

console.log()

可以看到，組件其實(shí)是一個(gè)JS對(duì)象，并不是一個(gè)真實(shí)的dom。

ES6 引入了一種新的原始數(shù)據(jù)類型Symbol，表示獨(dú)一無(wú)二的值。有興趣的同學(xué)可以去阮一峰老師的ES6入門詳細(xì)了解一下

上面有我們很熟悉的props,ref,key,我們稍微修改一下console，看看有什么變化。

console.log(
你好，這里是App組件)

可以看到，props,key都發(fā)生了變化，值就是我們賦予的值，props中嵌套了children屬性?？墒菫槭裁次覀兦度氲氖莇iv，實(shí)際上卻是一個(gè)對(duì)象呢？

/node_modules/react

首先打開index.js

"use strict";

if (process.env.NODE_ENV === "production") {
  module.exports = require("./cjs/react.production.min.js");
} else {
  module.exports = require("./cjs/react.development.js");
}

可以知道目前用上的是./cjs/react.development.js,直接打開文件。
根據(jù)最初的代碼，我們組件用到了React.Component。找到React暴露的接口:

接著找到Component: Component方法，

function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  // If a component has string refs, we will assign a different object later.
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}

Component.prototype.isReactComponent = {};

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

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

上面就是一些簡(jiǎn)單的構(gòu)造函數(shù)，也可以看到，我們常用的setState是定義在原型上的2個(gè)方法。

至此，一個(gè)組件已經(jīng)有一個(gè)大概的雛形：

到此為止了嗎？這看了等于沒看啊，究竟組件是怎么變成div的？render嗎？
可是全局搜索，也沒有一個(gè)function是render啊。

原來(lái)，我們的jsx語(yǔ)法會(huì)被babel編譯的。

這下清楚了，還用到了React.createElement

createElement: createElementWithValidation,

通過(guò)createElementWithValidation,

function createElementWithValidation(type, props, children) {
······

  var element = createElement.apply(this, arguments);


  return element;
}

可以看到，return了一個(gè)element，這個(gè)element又是繼承自createElement，接著往下找：

function createElement(type, config, children) {
  var propName = void 0;

  // Reserved names are extracted
  var props = {};

  var key = null;
  var ref = null;
  var self = null;
  var source = null;
······
  return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
}

這里又返回了一個(gè)ReactElement方法，再順著往下找：

var ReactElement = function (type, key, ref, self, source, owner, props) {
  var element = {
    // This tag allows us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.
    _owner: owner
  };

······
  return element;
};

誒，這里好像返回的就是element對(duì)象，再看我們最初的的結(jié)構(gòu)，是不是很像

驗(yàn)證一下我們的探索究竟對(duì)不對(duì)，再每一個(gè)方法上我們都打上console,(注意，將App里的子元素全部刪空，利于我們觀察)

React.createElement 、 createElementWithValidation 、 createElement 、 ReactElement，通過(guò)這些方法，我們用class聲明的React組件在變成真實(shí)dom之前都是ReactElement類型的js對(duì)象

createElementWithValidation:

首先校驗(yàn)type是否是合法的

校驗(yàn)了props是否符合設(shè)置的proptypes

校驗(yàn)了子節(jié)點(diǎn)的key，確保每個(gè)數(shù)組中的元素都有唯一的key

createElement：

type是你要?jiǎng)?chuàng)建的元素的類型，可以是html的div或者span，也可以是其他的react組件，注意大小寫

config中包含了props、key、ref、self、source等

向props加入children，如果是一個(gè)就放一個(gè)對(duì)象，如果是多個(gè)就放入一個(gè)數(shù)組。

那如果type.defaultProps有默認(rèn)的props時(shí)，并且對(duì)應(yīng)的props里面的值是undefined，把默認(rèn)值賦值到props中

也會(huì)對(duì)key和ref進(jìn)行校驗(yàn)

ReactElement：

ReactElement就比較簡(jiǎn)單了，創(chuàng)建一個(gè)element對(duì)象，參數(shù)里的type、key、ref、props、等放進(jìn)去，然后return了。最后調(diào)用Object.freeze使對(duì)象不可再改變。

我們上面只是簡(jiǎn)單的探究了的結(jié)構(gòu)和原理，那它究竟是怎么變成真實(shí)dom的呢

ReactDOM.render(, document.getElementById("root"));

我們接著用babel編譯一下:

原來(lái)ReactDOM.render調(diào)用的是render方法，一樣，找暴露出來(lái)的接口。

var ReactDOM = {
······
  render: function (element, container, callback) {
    return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
  },
······
};

它返回的是一個(gè)legacyRenderSubtreeIntoContainer方法，這次我們直接打上console.log

這是打印出來(lái)的結(jié)果,

legacyRenderSubtreeIntoContainer
這個(gè)方法除主要做了兩件事：

清除dom容器元素的子元素

while (rootSibling = container.lastChild) {
      {
        if (!warned && rootSibling.nodeType === ELEMENT_NODE && rootSibling.hasAttribute(ROOT_ATTRIBUTE_NAME)) {
          warned = true;
        }
      }
      container.removeChild(rootSibling);
    }

創(chuàng)建ReactRoot對(duì)象

源碼暫時(shí)只讀到了這里，關(guān)于React16.1~3的新功能，以及新的生命周期的使用和原理、Fiber究竟是什么，我們將在后續(xù)文章接著介紹。

本文發(fā)布于薄荷前端周刊，歡迎Watch & Star ★，轉(zhuǎn)載請(qǐng)注明出處。