当前位置: 首页 > 工具软件 > fiber > 使用案例 >

Fiber

谷彦君
2023-12-01

什么是fiber

  • Fiber 是一个执行单元。

fiber是react16 对核心算法的依次重写,fiber会使原本同步的渲染过程变成异步的。
同步渲染的递归调用栈是非常深的,且是漫长而不可打断的更新过程。因此将会带来很大的风险:同步渲染一旦开始将会牢牢的抓住主线程不放,直到递归完成。这段时间浏览器无法处理任何渲染之外的事情,会进入一种无法处理用户交互的状态

  • Fiber 是一种数据结构,支撑 Fiber 构建任务的运转。
    当某一个 Fiber 任务执行完成后,怎样去找下一个要执行的 Fiber 任务呢?
    React 通过链表结构找到下一个要执行的任务单元。
    要构建链表结构,需要知道每一个节点的父级节点是谁,要知道他的子级节点是谁,要知道他的下一个兄弟节点是谁。
    Fiber 其实就是 JavaScript 对象,在这个对象中有 child 属性表示节点的子节点,有 sibling 属性表示节点的下一个兄弟节点,有 return 属性表示节点的父级节点。
type Fiber = {
  // 组件类型 div、span、组件构造函数
  type: any,
  // DOM 对象
  stateNode: any,  
  // 指向自己的父级 Fiber 对象
  return: Fiber | null,
  // 指向自己的第一个子级 Fiber 对象
  child: Fiber | null,
  // 指向自己的下一个兄弟 iber 对象
  sibling: Fiber | null,

Fiber 的作用

Filter 会将一个大的更新任务拆分成很多小的任务。每当执行完成一个小的任务时,filber会将主线程交回去,看看有没有优先级更高的任务需要处理。
react 将生命周期划分为render 和 commit 两个阶段,commit又被划分为pre-commit和commit

  • pre-commit:读取dom
  • commit:使用dom,运行副作用,安排更新

副作用:如果一个函数需要依赖外部状态就无法保证输出相同,从而让函数变得不纯,就会带来副作用

render阶段可以被打断,commit阶段需要同步执行。因为render阶段的操作对用户来说是不可见的,就算打断重启,对用户来说也是无感知的。而commit阶段涉及到操作真实dom,所以不可被打断

react16 组件的生命周期更改

在fiber机制下,render阶段是允许被暂停,终止,重启的,因此render阶段的生命周期有可能被重复执行

  • componentWillMount
  • componentWillUpdate
  • componentWillReceiveProps
    这些生命周期函数都是处于render阶段,都有可能被重复执行
 类似资料:

相关阅读

相关文章

相关问答