一、一个真正的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 的解读，还没搞....