react中dom的渲染流程

1. react中的虚拟dom，本质上是一种对象形式到dom的描述，虚拟dom的操作是在js层面的计算，如果把js映射生成真实的dom
2. 调用生命周期中的render方法，生成虚拟dom，然后再调用reactDom.render方法，实现虚拟dom的真实dom转换
3. 组件的再次更新，会再次调用render方法生成新的虚拟dom，然后借助diff定位出两次虚拟dom的差异，从而针对变化的真实dom做出定向更新
4. react的diff算法，本质通过分层算法，节点前后位置的替换，会导致替换的节点全部被删除，然后重新生成新的节点挂载在上面。key的作用是确定唯一的ID，来让diff比较时确定是否需要重新生成
5. react的setState为异步操作，在内部通过添加一个锁机制，来实现值的批量更新，在setTimeout(fu, 0)中，fn中的setState为同步更新
6. 在使用ts时，js对应ts结尾文件，jsx对应tsx结尾文件
7. 什么是jsx
   1. jsx是JavaScript的一种语法扩展，和模板语法很接近，当时充分具备JavaScript的能力
8. jsx是怎么在JavaScript中生效的
   1. jsx是通过babel转换为JavaScript的
   2. babel会吧jsx代码转化为react.createElement调用
   3. jsx本质是React.createElement这个JavaScript调用的语法糖
   4. jsx语法糖允许前端开发者使用我们最熟悉的HTML标签语法来创建虚拟dom
9. 页面tree = dom tree + css tree
10. 页面的回流与重绘
11. 代码编译流程 => 词法解析 => 语法解析 => 生成AST语法树