React中JSX转换为真实Dom的过程

可以从几个大体过程来看

1. jsx语法解析
   jsx语法解析成js代表的对象，即把jsx语法转换为基于js的React.createElement(args1,args2,args3)，args1,args2,args3分别是标签类型、属性和标签内容，主要利用的是babel等库
2. 虚拟dom构建
   react基于js的对象构建虚拟dom。虚拟dom是个树形结构，用于描述页面的结构和属性
3. 虚拟dom的diff
   react会对比vdom更新操作前后的虚拟dom，找出两者差异
4. 真实dom的操作
   对比出虚拟dom的差异后，将dom更新在真实dom上生效

React生命周期

• 挂载
  组件初始化

  • constructor 初始化state和props
  • static getDrivedStateFromProps
  • render 创建虚拟dom
  • didmount 第一次渲染后

• 更新
  state和props发生变化时更新组件

  • static getDrivedStateFromProps
  • shouldComponentUpdate 返回bool值，返回为true才会继续后面的生命周期
  • render
  • didupdate

• 卸载
  组件卸载时

• willUnmount

• static getDrivedStateFromProps

• render

React setState

setState是个异步方法，会把每次的state放在事件队列中，批量执行，核心是利用了Object.assign(oldState,newState)

fiber

产生由来

react18前，dom更新是通过深度遍历比较vdom的，这个过程是不可打断的（因为只记录的子节点，没有兄弟节点），当dom树深度较深时，就会导致栈深度较深，会占用主线程的渲染资源，所以出现了fiber。fiber其实就是进阶版虚拟dom，是一个含有多个dom属性的js对象，本质是一个含有三个指针的链表结构，分别指向父亲节点、兄弟节点和子节点，这个结构保证了fiber的遍历比较可以被中断（因为不需要重新去遍历dom树节点）

初始化

更新