React面试

React渲染流程(重点)

jsx描述界面
jsx babel render function=>vdom
vdom fiber 在进行渲染
vdom 转换fiber reconcile
转换过程创建dom
commit 到dom

vdom React Element 对象, 只记录了子节点, 没有记录兄弟节点, 因为渲染不可中断

fiber fiberNode 对象, 是一个链表 父节点 兄弟节点子节点, 可以打断

React Fiber是什么(重点)

Fiber出现背景

React15 Stack Reconciler 同步递归过程, 不可中断
导致页面响应度变差

没有区别优先级

Fiber是什么

对核心调度过程重写
编码: 是一种树节点的数据结构
一个Fiber是一个节点对象

Fiber更新机制

1. 初始化流程
   创建fiberRoot
   rooterFiber(ReactDom.render 或者 ReactDom.createRoot)

2. beginwork

• wip内存中构建workinprogreess fiber
  第一次更新后 current树

current: 视图层渲染的树 current fiber树

3. 深度调和子节点渲染视图
   alernate树, 完成整个子节点便利, 包括fiber创建, wip树作为最新树, 完成初始化流程

更新
重新wip树

双缓存模式

减少页面抖动与卡顿,减少fiber节点性能损耗

为什么不能直接使用this.state改变数据

并不会重新触发render组件不重新渲染

this.state.message = ‘xxxxx’ // xx

不触发render
setState() // 触发render 页面响应

this.setState({