<body>
<div id="container"></div>
<script type="text/babel">
class Hello extends React.Component{
render(){
return(
<div>
hello world
</div>
)
}
}
ReactDOM.render(<Hello/>,document.getElementById('container'));
console.log(<Hello/>);
//这里会发现<div>标签也被识别为react的元素
console.log(<Hello><div>这是hello组件</div></Hello>);
</script>
</body>
运行结果截图
image.png
image.png
image.png
通过红色框可以看出，<Hello><div>...</div></Hello> props中增加了children的字段，同理，如果我们进行多层的组件嵌套，其实就是在父对象的props中增加children字段及对应的描述值，也就是js对象的多层嵌套
1.组件的声明
接下来我们从class Hello extends React.Component来分析
我们打开react.js的文件
image.png
可以看到react的对象中有一个Componenet:ReactComponent属性紧接着我们去看一下ReactComponent
image.png
image.png
image.png
可以看出ReactComponent的原型上有一个setState方法也就是我们在Hello类的构造函数我们可以直接覆写该方法
2.组件的初始化（组件类必须拥有render方法输出类似<div>hello world</div>的结构并挂载到真实DOM上，才能触发组件的生命周期并成为DOM树的一部分）
我们把上面的代码放到babel的解析其中，得到如下代码
var Hello = function (_React$Component) {
//这里实现的是ReactComponent的继承
_inherits(Hello, _React$Component);
function Hello() {
_classCallCheck(this, Hello);
return _possibleConstructorReturn(this, (Hello.__proto__ || Object.getPrototypeOf(Hello)).apply(this, arguments));
}
//重点在这里,原来render方法的实现是调用React.createElement
_createClass(Hello, [{
key: "render",
value: function render() {
return React.createElement(
"div",
null,
"hello world"
);
}
}]);
return Hello;
}(React.Component);
所以我们要去React.createElement的实现
ReactElement.createElement = function (type, config, children) {
//...
// 这部分代码就是我们一开始讲的props的children字段，-2的原因是减去type，config，也就是后面剩下的children的长度
var childrenLength = arguments.length - 2;
//如果长度是1，也就相当于<Hello>这里是hello</Hello>只有“这里是hello”子节点，此时我们就把该节点直接复给props.children
if (childrenLength === 1) {
props.children = children;
//如果长度>1,也就相当<Hello><div>这里是hello</div><div>这里是world</div></Hello>,这时我们要把两个div合并到一个数组，然后复给props.children 可以看console.log打印，同理如果div当中还嵌套div的话，便是一个递归的过程，
} else if (childrenLength > 1) {
var childArray = Array(childrenLength);
for (var i = 0; i < childrenLength; i++) {
childArray[i] = arguments[i + 2];
}
props.children = childArray;
}
//...最后这里返回的是ReactElement
return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
};
//ReactElement
var ReactElement = function (type, key, ref, self, source, owner, props) {
//...看到这里的属性，我们发现似曾相识的吧，没错就是console口打印出来的属性
var element = {
type: type,
key: key,
ref: ref,
props: props,
};
//...
return element;
};
image.png
image.png
总结
//到这里我们可以对这段代码做个总结了
/*
1.class Hello extends React.Component
Hello继承了React.Component类，而Component为React的一个属性，调用的是ReactComponent函数，而该函数的原型上面有一个setState函数
2.render 方法其实是调用的React.createElement函数,而在这个函数中实现了属性初始化以及Chidren复值给props.children的过程
*/
class Hello extends React.Component{
render(){
return(
<div>
hello world
</div>
)
}
}
到这里我们还没有进行挂载的哈，也就是我们还没有得到react组件<Hello/>，只是做了组件声明与初始化的讲解。
下一篇：react源码解析（组件的挂载）
https://www.jianshu.com/p/5e7c0eeef2e4
