- 什么是React元素
- React元素被创建的过程是怎样的
我们首先来看官方的定义
元素是构成 React 应用的最小块 它描述了你在屏幕上想看到的内容。
const element = <h1>Hello, world</h1>与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
可以知道 <h1>Hello, world</h1>
这一段其实就是一个react元素,表面上看它像一个dom,但注意其中有一句是,React 元素是创建开销极小的普通对象,再精简一下就是 React 元素是对象
这个时候,有些朋友就有点懵了,这对象怎么长得和其他的不太一样啊,我们js的对象不是 一对花括号吗? 我们打印一下<h1 className="hello">Hello, world</h1>)
试试看 ,看看结果是什么
原来,果真是一个对象,但这个对象是babel直接生成的么,我们打开babel的官网来转一下试试
![image-20190706143042600](/Users/huax/Library/Application Support/typora-user-images/image-20190706143042600.png)
原来,babel生成的是```React.createElement(…props)``, 之后是调用React.createElement创建了这个对象
我们这一节,就是简单来实现一下React.createElement,我们目前只使用type和props属性
const React = {
createElement (type, config, ...children) {
let props = {};
// 将第二个参数config和第三个参数children合并成一个
if (config !== null) {
props = _.defaultsDeep({}, config);
}
if (children.length >= 1) {
props.children = children.length === 1 ? children[0] : children
}
return {type, props};
}
}
看一下效果
到这里,我们已经了解了react元素的创建过程,下一节,我们来讲下react组件