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