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调用
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/
