react面经整理学习2.pdf

react⾯经

●react启动

○启动时创建3个全局对象，

■reactdomroot对象，属于react-dom，有render⽅法，引导react应⽤启动。

■fiberroot对象，属于react-reconciler，运⾏时的全局上下⽂，保存fiber构建过程中依赖的

全局状态。

■hostrootfiber对象，属于react-reconciler，react应⽤中第⼀个fiber，是fiber树根节点。

节点类型是hostroot。

●react-reconciler采⽤的fiber架构的优势

○⽀持增量渲染，将渲染任务拆分为⼩单元，分批执⾏。旧版本是⼀次性计算更新整个UI树，性

能瓶颈。

○fiber架构⽀持中断和恢复⼯作，且⽀持优先级任务处理。

○⽀持任务调度。旧版本没有。

○事务管理⽐较⽅便，将渲染任务拆分为独⽴的事务，可独⽴管理和控制。

●fiber架构原理

○fiber节点表示组件，指向⽗节点、⼦节点、兄弟节点。

○渲染过程分解为多个⼯作单元。⽀持增量操作。⽀持中断和恢复。

○⽀持任务调度，⽀持优先级。

○结合diff算法，计算新的fiber树，映射到dom。

●reactrender阶段，处理组件更新+⽣成虚拟DOM（fiber树）

○触发渲染，当⽤户交互/⽹络请求响应/内部状态变化，导致组件的状态属性变化，触发⼀次渲

染。

○fiber树的协调，为组件创建fiber节点，协调操作，遍历fiber树，对⽐新旧节点，计算最⼩更新

集合。更新fiber树。

○执⾏组件render⽅法，对每个fiber节点都执⾏render⽅法，返回虚拟DOM，包装成新的fiber节

点。代替旧的fiber节点，构建新fiber树。

○更新fiber节点，处理更新队列，标记更新类型。

○构建fiber树的副作⽤，搜集保存副作⽤，⽐如数据获取/事件监听，会在commit阶段应⽤到

DOM。

○完成render阶段，⽣成新的fiber树，提交到commit阶段进⾏实际DOM更新，包括副作⽤等实

际DOM操作。

1

●reactcommit阶段，将虚拟DOM应⽤到实际DOM+副作⽤操作。

○提交fiber树，准备处理更新。

○递归遍历fiber树，应⽤副作⽤操作。

■增删改实际DOM元素。effecttag。

■调⽤⽣命周期⽅法、执⾏副作⽤的回调。

●副作⽤回调在组件挂载和更新后执⾏，如数据获取/事件操作。

○更新fiber树，清理副作⽤标记。

■更新fiber节点属性，⽐如current指向新的fiber。

○浏览器进⾏布局计算和绘制，呈现⻚⾯内容。

●fiber的时间切⽚

○任务拆分为多个⼩的fiber处理单元，分配优先级。

○结合调度器scheduler，根据优先级和浏览器空闲时间进⾏调度。每个时间⽚结束会检查是否有

⾼优先级待处理。

○处理fiber节点的⼯作单元中⽀持中断（交互、滚动），⽀持恢复中断，继续处理。

●reactdom.createportal

○将元素渲染到指定dom节点上，元素依然在react组件树，遵守⽣命周期，也可以避免CSS影

响。⽀持顶层显示和避免层级⼲扰。

○适⽤于独⽴显示的组件，如模态框、下拉。

●context

○上下⽂，组件树中共享数据的⽅式，将数据传递给多个组件，避免层级传递。

○createcontext。创建上下⽂，返回对象，包含属性有provider、consumer。

■provider为组件，提供数据给后代组件。

■consumer⽤来订阅provider提供的数据的组件。

○usecontext，订阅createcontext创建的上下⽂。函数组件可以直