React 16 源码瞎几把解读 【二】 react组件的解析过程

一、一个真正的react组件编译后长啥样？

我们瞎几把解读了react 虚拟dom对象是怎么生成的，生成了一个什么样的解构。一个react组件不光由若干个这些嵌套的虚拟dom对象组成，还包括各种生命周期钩子、自定义方法、事件等组成

下面让我们继续探索

react组件写法：

// 一个再普通不过的react组件写法


mport React,{Component} from 'react';
import Header from '../components/header';
class Home extends Component {
    constructor(props){
        super(props);
    }
    componentWillMount(){
        console.log('willMount');
    }
    handleClickEvent(){
        console.log('click');
    }
    render(){
        let {name} = this.props;
        return (
            <div ref="home">
                <Header kk="js"/>
                <div>主页:{name}</div>
                <div>
                    <p onClick={this.handleClickEvent}>哈哈哈哈</p>
                </div>
            </div>
        )
    }
}

export default Home;

react组件被babel-preset-react编译后

var Home = function (_Component) {
    _inherits(Home, _Component);

    function Home(props) {
        _classCallCheck(this, Home);

        return _possibleConstructorReturn(this, (Home.__proto__ || Object.getPrototypeOf(Home)).call(this, props));
    }

    _createClass(Home, [{
        key: 'componentWillMount',
        value: function componentWillMount() {
            console.log('willMount');
        }
    }, {
        key: 'handleClickEvent',
        value: function handleClickEvent() {
            console.log('click');
        }
    }, {
        key: 'render',
        value: function render() {
            var name = this.props.name;

            return _react2.default.createElement(
                'div',
                { ref: 'home' },
                _react2.default.createElement(_header2.default, { kk: 'js' }),
                _react2.default.createElement(
                    'div',
                    null,
                    '\u4E3B\u9875:',
                    name
                ),
                _react2.default.createElement(
                    'div',
                    null,
                    _react2.default.createElement(
                        'p',
                        { onClick: this.handleClickEvent },
                        '\u54C8\u54C8\u54C8\u54C8'
                    )
                )
            );
        }
    }, {
        key: '__reactstandin__regenerateByEval',
        // @ts-ignore
        value: function __reactstandin__regenerateByEval(key, code) {
            // @ts-ignore
            this[key] = eval(code);
        }
    }]);

    return Home;
}(_react.Component);

通过看编译后的代码，我们得出以下关键词线索： React.Component

 

二、React.Component 又干了什么

Component来自于 ReactBaseClasses.js  找到他！

import {Component, PureComponent} from './ReactBaseClasses';

function Component(props, context, updater) {
  this.props = props; // 眼熟的props
  this.context = context; // context
  this.refs = emptyObject; // 初始化refs
  this.updater = updater || ReactNoopUpdateQueue;
}

Component.prototype.isReactComponent = {};
// 经典的setState 方法
Component.prototype.setState = function(partialState, callback) {
  ...
};
// 强制重绘
Component.prototype.forceUpdate = function(callback) {
  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};

通过阅读代码，我们发现Component这个类的构成其实并不复杂，但其中的updater是一个很重要的东西，不过今天略过不表，脱离生命周期及dom渲染看updater没有任何意义，以后再说

同样setState也以后再说

 

通过js中的extends, 本文中的home组件获得了Component类中的所有属性和方法，我们再看源码，看看babel是如何拆解react组件生命周期的

三、defineProperty 的一顿猛操作

babel在解析jsx的时候自己定义了一堆模拟es6 extends、 class 、super的一堆东西

通过查看解析后的源码，我们可以知道其中奥秘

var _createClass = function () {
    function defineProperties(target, props) {
        for (var i = 0; i < props.length; i++) {
            var descriptor = props[i];
            descriptor.enumerable = descriptor.enumerable || false;
            descriptor.configurable = true;
            if ("value" in descriptor) descriptor.writable = true;
            Object.defineProperty(target, descriptor.key, descriptor);
        }
    }
    return function (Constructor, protoProps, staticProps) {
        if (protoProps) defineProperties(Constructor.prototype, protoProps);
        if (staticProps) defineProperties(Constructor, staticProps);
        return Constructor;
    };
}();

function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ =
            superClass;
}

一个仿造的继承，一个仿造的createClass

前者通过_inherits(Home,Component) 将 Component的prototype 赋予到Home上，使Home拥有了setState方法等等

后者通过  Object.defineProperty 将key-value形式的对象 赋予到 Home.prototype上

回首看被babel表一出来的react组件，那些钩子函数、自定义方法都被搞成了一个个key-value形式的对象，通过_createClass 给绑定到了Home类中

这样一个组件类就做好了，这个组件类的prototype里面有自定义函数、生命周期钩子函数、render方法

然后就是通过createElement又再次的封装成react 虚拟dom 被放到ReactDOM 中等待render

// 编译前
ReactDOM.render(
    <div>
        <Home name="home"/>
    </div>
    ,
    document.getElementById('app')
);

// 编译后
_reactDom2.default.render(_react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(_home2.default, { name: 'home' })
), document.getElementById('app'));

只不过这种虚拟dom和其他的不太一样，这种的对象里面的type类型是函数，而不是字符串罢了。所以可见 createElement返回对象的type不一定是字符串，是一切皆有可能

 

要知render中发生了什么，请听下回分解

 

四、本期留坑

setState 的解读，还没搞....