首页 > TAG信息列表 > workInProgress

React17 Hooks系列实现

1.前置说明 本次react版本采用react17.0.0版本  下载zip解压即可  https://github.com/facebook/react/tree/v17.0.0 2. 如何调试源码 代码调试方式（下载链接） 3.一些前置内容 关于fiber节点和fiber树 react运行的时候存在一个根节点FiberRootNode以及两颗树 current tree是

react17.x源码解析(2)——fiber树的构建与更新

下面我们结合源码，来看一下实际工作过程中fiber树的构建与更新过程。 mount过程 react首次mount开始执行时，以ReactDOM.render为入口函数，会经过如下一系列的函数调用： ReactDOM.render——> legacyRenderSubtreeIntoContainer——>legacyCreateRootFromDOMContainer——>createLegacy

react源码解析17.context

react源码解析17.context 视频讲解（高效学习）：进入学习 context流程图 cursor/valueStack react源码中存在一个valueStack和valueCursor用来记录context的历史信息和当前context，另外还有一个didPerformWorkStackCursor用来表示当前的context有没有变化 //ReactFiberNewContext.new.

react源码解析8.render阶段

react源码解析8.render阶段 视频讲解（高效学习）：进入学习 往期文章： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新

react源码解析7.Fiber架构

react源码解析7.Fiber架构 视频讲解（高效学习）：进入学习 往期文章： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 1

React源码解析————Render阶段（三）

React源码解析————Render阶段（三） 2021SC@SDUSCCompleteWork流程预览HostComponentcompleteUnitOfWork 小结 2021SC@SDUSC 2021SC@SDUSC CompleteWork 流程预览 类似beginWork，completeWork也是针对不同fiber.tag调用不同的处理逻辑。 function completeWork( current

react源码解析17.context

react源码解析17.context 视频讲解（高效学习）：进入学习 往期文章： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13

react源码解析7.Fiber架构

react源码解析7.Fiber架构 视频讲解（高效学习）：点击学习 往期文章： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 1

react源码解析8.render阶段

react源码解析8.render阶段 视频讲解（高效学习）：进入学习 往期文章： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程

[react] 请说说什么是useRef？

[react] 请说说什么是useRef？ 本质上 createRef 和 useRef（mountRef） 就是创建一个 {current: initialState} 对象然后返回 useRef 本身经历两个阶段：mountRef 和 updateRef，updateRef 就是把 memoziedState（上面创建的对象）返回。 在 reconciler 阶段，如果有 ref 绑定，会打一个 efftag：R

Fiber 树的构建

我们先来看一个简单的 demo： import * as React from 'react'; import * as ReactDOM from 'react-dom'; class App extends React.Component { render() { return ( <div className="container"> <div

react源码解析8.render阶段

react源码解析8.render阶段 视频课程（高效学习）：进入课程 课程目录： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程

react源码解析8.render阶段

react源码解析8.render阶段 视频课程（高效学习）：进入课程 课程目录： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 1

react源码解析7.Fiber架构

react源码解析7.Fiber架构 视频课程（高效学习）：进入课程 课程目录： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13

react源码解析7.Fiber架构

react源码解析7.Fiber架构 视频课程（高效学习）：进入课程 课程目录： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 1

React workInProgress Fiber 树存在的意义是什么

1. React 中使用双缓存的机制，来完成 Firber树的构建与替换，实现 Dom 对象的快速更新。 2. React 中会同时存在两个 Fiber 对象，当前在屏幕中显示的树是 CurrentFiber 树，当发生更新时，React会重新创建一颗新的Firber树是 WorkInProgress Firber树。 在双缓存技术中，workInProgress Fib