React中的组件化开发：
没有明确全局和局部的概念（可以理解为都是局部组件，不过可以把组件注册到React上，这样每个组件中只要导入React即可使用）
函数组件
创建：在SRC目录中，创建一个 xxx.jsx 的文件，就是要创建一个组件；我们在此文件中，创建一个函数，让函数返回JSX视图「或者JSX元素、virtualDOM虚拟DOM对象」；这就是创建了一个“函数组件”！！
调用：基于ES6Module规范，导入创建的组件「可以忽略.jsx后缀名」，然后像写标签一样调用这个组件即可！！
<Component/> 单闭合调用
<Component> ... </Component> 双闭合调用
命名：组件的名字，我们一般都采用PascalCase「大驼峰命名法」这种方式命名
调用组件的时候，我们可以给调用的组件设置(传递)各种各样的属性
<DemoOne title="我是标题" x={10} data={[100, 200]} className="box" style={{ fontSize: '20px' }} />
+ 如果设置的属性值不是字符串格式，需要基于“{}胡子语法”进行嵌套
+ 调用组件的时候，我们可以把一些数据/信息基于属性props的方式，传递给组件！！
渲染机制
@1 基于babel-preset-react-app把调用的组件转换为createElement格式
React.createElement(DemoOne, {
title: "\u6211\u662F\u6807\u9898",
x: 10,
data: [100, 200],
className: "box",
style: {
fontSize: '20px'
}
})
@2 把createElement方法执行，创建出一个virtualDOM对象！！
{
$$typeof: Symbol(react.element),
key: null,
props: {title: '我是标题', x: 10, data: 数组, className: 'box', style: {fontSize: '20px'}}, //如果有子节点「双闭合调用」，则也包含children！！
ref: null,
type: DemoOne
}
@3 基于root.render把virtualDOM变为真实的DOM
type值不再是一个字符串，而是一个函数了，此时：
+ 把函数执行 -> DemoOne()
+ 把virtualDOM中的props，作为实参传递给函数 -> DemoOne(props)
+ 接收函数执行的返回结果「也就是当前组件的virtualDOM对象」
+ 最后基于render把组件返回的虚拟DOM变为真实DOM，插入到#root容器中！！
