函数组件（声明式编程）

创建：在 SRC 目录中，创建一个 xxx.jsx 的文件，就是要创建一个组件；我们在此文件中，创建一个函数，让函数返回 JSX 视图「或者 JSX 元素、virtualDOM 虚拟 DOM 对象」；这就是创建了一个“函数组件”！！

调用：基于 ES6Module 规范，导入创建的组件「可以忽略。jsx 后缀名」，然后像写标签一样调用这个组件即可！！

jsx

<Component/> // 单闭合调用
<Component> ... </Component> // 双闭合调用

1
2

命名：组件的名字，我们一般都采用 PascalCase「大驼峰命名法」这种方式命名

jsx

//  调用组件的时候，我们可以给调用的组件设置（传递）各种各样的属性
<DemoOne title="我是标题" x={10} data={[100, 200]} className="box" style={{ fontSize: '20px' }} />

1
2

如果设置的属性值不是字符串格式，需要基于“{}胡子语法”进行嵌套
调用组件的时候，我们可以把一些数据 / 信息基于属性 props 的方式，传递给组件！！

渲染机制

① 基于 babel-preset-react-app 把调用的组件转换为 createElement 格式

jsx

    React.createElement(DemoOne, {
        title: "\u6211\u662F\u6807\u9898",
        x: 10,
        data: [100, 200],
        className: "box",
        style: {
            fontSize: '20px'
        }
    })

1
2
3
4
5
6
7
8
9

② 把 createElement 方法执行，创建出一个 virtualDOM 对象！！

jsx

    {
        $$typeof: Symbol(react.element),
        key: null,
        props: {title: '我是标题', x: 10, data: 数组，className: 'box', style: {fontSize: '20px'}}, // 如果有子节点「双闭合调用」，则也包含 children！！
        ref: null,
        type: DemoOne
    }

1
2
3
4
5
6
7

③ 基于 root.render 把 virtualDOM 变为真实的 DOM

type 值不再是一个字符串，而是一个函数了，此时：

把函数执行 -> DemoOne()
把 virtualDOM 中的 props，作为实参传递给函数 -> DemoOne(props)
接收函数执行的返回结果「也就是当前组件的 virtualDOM 对象」
最后基于 render 把组件返回的虚拟 DOM 变为真实 DOM，插入到#root 容器中！！

扫盲知识点：关于对象的规则设置

冻结冻结对象：Object.freeze(obj) 检测是否被冻结：Object.isFrozen(obj) =>true/false
- 被冻结的对象：不能修改成员值、不能新增成员、不能删除现有成员、不能给成员做劫持「Object.defineProperty」
密封密封对象：Object.seal(obj) 检测是否被密封：Object.isSealed(obj)
- 被密封的对象：可以修改成员的值，但也不能删、不能新增、不能劫持！！
扩展把对象设置为不可扩展：Object.preventExtensions(obj) 检测是否可扩展：Object.isExtensible(obj)
- 被设置不可扩展的对象：除了不能新增成员、其余的操作都可以处理！！被冻结的对象，即是不可扩展的，也是密封的！！同理，被密封的对象，也是不可扩展的！！

函数组件 （声明式编程） #

渲染机制 #

扫盲知识点：关于对象的规则设置 #

函数组件（声明式编程）

渲染机制

扫盲知识点：关于对象的规则设置