Mini-React - 技术栈

jsx

jsx 是React中对于JavaScript的语法扩展，允许在JavaScript中去写类似于HTML的代码。使得开发者能够以一种更直观和声明式的方式去编写用户界面

vdom

vdom是React为了提高性能而去引入的一个虚拟的dom表示。

它是一个轻量级的 JavaScript 对象，用于描述真实 dom 树的结构。vdom 的核心思想是通过减少直接操作真实 dom 的次数来提高应用的渲染性能。

当react组件状态发生变化的时候，React会生成一个新的vdom树，与上一次的vdom树进行差异对比。并且找出实际发生变化的部分，并将这些变化去应用到真实的dom上，从而减少不必要的dom操作

我们写的jsx代码最终会被转换为JavaScript 对象，这些对象就是vdom的表示形式。有type,children,props等属性

createElement

React内部的一个方法。用于创建新的React元素，这个方法是jsx转换过程的一部分。当jsx代码被编译的时候，他会转换为React.createElement调用

js 复制代码

const createTextNode = (text) => {
    return {
        type: TEXT_NODE,
        props: {
            nodeValue: text,
            children: []
        },
    }
}
const createElement = (type, props, ...children) => {
    return {
        type,
        props: {
            ...props,
            children: children.map(child => {
                return typeof child === 'string' || typeof child === 'number' ? createTextNode(child) : child
            })
        }
    }
}

Render

将React元素渲染到DOM节点上的过程。负责将vdom转换成真实的DOM节点，并append到指定的容器中（根节点root）

执行过程：

通过type来创建不同的dom节点
遍历props给dom节点设置对应的attribute
遍历children去递归的创建dom节点，设置熟悉。重复上面两步
然后把创建好的dom节点append到父节点中
最后append到根节点中，也就是我们定义好的root节点。

但是整个过程是递归的，且递归不可中断，如果页面层级过多会导致 js占用线程时间过程，影响页面的渲染

React15架构的缺点

采用了递归去渲染更新页面。由于递归执行，所以更新一旦开始，中途就无法中断，当层级很深的时候，就会产生卡顿

如何解决的?

在 React16 中，将递归不可中断的更新改为了异步可中断更新

Fiber

fiber 节点表示一个最小的可执行工作单元。也就是一种新的数据结构，保存了 tag key type stateNode 等相关信息

React Fiber通过分片 slicing 和优先级调度 priority scheduling 来解决递归不可中断的问题

需要改为异步可中断的更新后，之前的 vdom 的数据结构就不太行了，这里就引出了 fiber 架构。采用链表的形式来表示当前的 dom 树

通过链表的 child sibling return 维护形成了一颗 fiber 树，这样我们就可以通过指针明确的知道当前执行到哪个 fiber 节点，当浏览器空闲的时候就去执行

...待完善function 组件，useState useEffect部分

感谢崔大的mini-react课程，下面是B站地址

https://space.bilibili.com/175301983/