【React源码解读】- 组件的实现

前言

react使用也有一段时间了，你们对这个框架褒奖有加，可是它究竟好在哪里呢？
让咱们结合它的源码，探究一二！（当前源码为react16，读者要对react有必定的了解）

回到最初

根据react官网上的例子，快速构建react项目

npx create-react-app my-app

cd my-app

npm start

打开项目并跑起来之后，暂不关心项目结构及语法糖，看到App.js里，这是一个基本的react组件<App/> 咱们console一下，看看有什么结果。

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

class App extends Component {

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
        </header>
      </div>
    );
  }
}

export default App;

console.log(<App/>)

能够看到，<App/>组件实际上是一个JS对象，并非一个真实的dom。

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。有兴趣的同窗能够去阮一峰老师的ES6入门详细了解一下

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

console.log(<App key={1} abc={2}><div>你好，这里是App组件</div></App>)

能够看到，props,key都发生了变化，值就是咱们赋予的值，props中嵌套了children属性。但是为何咱们嵌入的是div，实际上倒是一个对象呢？

打开源码

/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,直接打开文件。
根据最初的代码，咱们组件<App/>用到了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');
};

上面就是一些简单的构造函数，也能够看到，咱们经常使用的setState是定义在原型上的2个方法。

至此，一个<App/>组件已经有一个大概的雏形：

到此为止了吗？这看了等于没看啊，究竟组件是怎么变成div的？render吗？
但是全局搜索，也没有一个function是render啊。

原来，咱们的jsx语法会被babel编译的。

这下清楚了，还用到了React.createElement

createElement: createElementWithValidation,

经过createElementWithValidation,

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

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


  return element;
}

能够看到，return了一个element，这个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);
}

这里又返回了一个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对象，再看咱们最初的<App/>的结构，是否是很像

验证一下咱们的探索究竟对不对，再每个方法上咱们都打上console,(注意，将App里的子元素所有删空，利于咱们观察)

React.createElement 、 createElementWithValidation 、 createElement 、 ReactElement，经过这些方法，咱们用class声明的React组件在变成真实dom以前都是ReactElement类型的js对象

createElementWithValidation:

• 首先校验type是不是合法的

• 校验了props是否符合设置的proptypes

• 校验了子节点的key，确保每一个数组中的元素都有惟一的key

createElement：

• type是你要建立的元素的类型，能够是html的div或者span，也能够是其余的react组件，注意大小写
• config中包含了props、key、ref、self、source等

• 向props加入children，若是是一个就放一个对象，若是是多个就放入一个数组。

• 那若是type.defaultProps有默认的props时，而且对应的props里面的值是undefined，把默认值赋值到props中

• 也会对key和ref进行校验

ReactElement：

ReactElement就比较简单了，建立一个element对象，参数里的type、key、ref、props、等放进去，而后return了。最后调用Object.freeze使对象不可再改变。

组件的挂载

咱们上面只是简单的探究了<App/>的结构和原理，那它到底是怎么变成真实dom的呢

ReactDOM.render(<App />, document.getElementById('root'));

咱们接着用babel编译一下:

原来ReactDOM.render调用的是render方法，同样，找暴露出来的接口。

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

它返回的是一个legacyRenderSubtreeIntoContainer方法，此次咱们直接打上console.log

这是打印出来的结果,

legacyRenderSubtreeIntoContainer
这个方法除主要作了两件事：

• 清除dom容器元素的子元素

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

• 建立ReactRoot对象

源码暂时只读到了这里，关于React16.1~3的新功能，以及新的生命周期的使用和原理、Fiber到底是什么，咱们将在后续文章接着介绍。

广而告之

本文发布于薄荷前端周刊，欢迎Watch & Star ★，转载请注明出处。

欢迎讨论，点个赞再走吧 ｡◕‿◕｡ ～