React中JSX转换为真实Dom的过程
可以从几个大体过程来看
- jsx语法解析
jsx语法解析成js代表的对象,即把jsx语法转换为基于js的React.createElement(args1,args2,args3),args1,args2,args3分别是标签类型、属性和标签内容,主要利用的是babel等库 - 虚拟dom构建
react基于js的对象构建虚拟dom。虚拟dom是个树形结构,用于描述页面的结构和属性 - 虚拟dom的diff
react会对比vdom更新操作前后的虚拟dom,找出两者差异 - 真实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树节点)