React-StepPitGuide
  • 封面
  • 前言
  • 基础知识
    • 环境配置
      • WebPack 前端打包工具
      • Babel 编译器
      • Node 环境配置
    • 版本说明
    • JSX
    • 组件
    • Child组件
    • 多组件嵌套
    • 组件生命周期
      • 组件生命周期(React16之前)
    • State属性
    • Props属性
    • 类组件
      • React PropTypes
      • React 可复用组件
      • React 事件与数据的双向绑定
      • React 组件DOM操作
      • React 独立组件间共享 Mixins ⚠
      • React 高阶组件(HOC)
        • 继承方式的高阶组件
        • 代理方式的高阶组件
      • React 无状态组件与PureComponent
      • React 容器组件和展示组件
      • setState
    • 函数组件
      • React 函数子组件
      • React Hook
        • useState
        • useEffect
    • 组件样式
      • CSS內联式样
      • CSS模块化
    • 受控与非受控组件
  • 进阶知识
  • React Context
  • React 顶级API
  • React Portal 传送门
  • 应用知识
    • 路由
      • React-Router2
      • React-router4
        • React-router4 结合React-Redux
    • 服务端渲染
    • 性能优化
      • React 组件优化
        • 定制shouldComponentUpdate
        • PureComponent
        • immutablejs存在的意义和使用
      • Redux性能优化
      • React同构
    • 项目应用
      • React 文件组织方式
      • React 模块接口
      • React 合并reducer
      • React 问题
  • 状态管理
    • Flux
    • Redux
      • Redux 使用
      • Redux 异步
      • Redux Chrome插件使用
      • Redux React-Redux
      • Redux applyMiddleware
      • Redux 结合React
      • Redux 自制Redux
      • Redux 自制React-Redux
      • Redux 自制thunk中间件
      • Redux 自制arr中间件
    • Mobx
      • Mobx 思想
    • RXJS
    • immutable
  • 源码思考
    • 简述
    • SimpleReact
    • 虚拟DOM
      • 虚拟DOM概念(React 16前)
      • 虚拟DOM思考(React 16前)
    • 生命周期
    • 事件
    • Fiber
      • 数据结构
      • Scheduler 调度
      • Concurrent 异步渲染
    • Hooks
      • useState
由 GitBook 提供支持
在本页
  • Fiber出现原因
  • stack reconciler困局
  • Fiber 架构设计
  • 增量渲染
  • 生命周期影响
  • Fiber执行原理

这有帮助吗?

  1. 源码思考

Fiber

上一页事件下一页数据结构

最后更新于3年前

这有帮助吗?

React 从 原有的stack reconciler 变成了现有的 Fiber reconciler。

Fiber出现原因

js引擎和页面渲染引擎是在同一个渲染线程之内,两者是互斥关系。

stack reconciler困局

Fiber 架构设计

增量渲染

可中断,可恢复与优先级

React 之前的方式 :

Reconciler(找不同) -> Renderer(渲染不同)

React改为Fiber以后:增加了调度层和修改了Reconciler层

Scheduler(调度更新优先级) -> Reconciler(找不同) -> Renderer(渲染不同)

生命周期影响

render 的工作单元有着不同的优先级

React可以根据优先级高低去实现工作单元的打断和恢复

Fiber执行原理

从根节点开始渲染和调度的过程可以分为两个阶段:render 阶段、commit 阶段。

  • render 阶段:这个阶段是可中断的,会找出所有节点的变更

  • commit 阶段:这个阶段是不可中断的,会执行所有的变更

React 组件,元素和实例 – React Blog
协调 – React
GitHub - reactjs/react-basic: A description of the conceptual model of React without implementation burden.GitHub
GitHub - acdlite/react-fiber-architecture: A description of React's new core algorithm, React FiberGitHub
走进React Fiber的世界 - 掘金
走进React世界
Logo
Logo
Logo
Logo
Logo