- 综合排序
- 最热优先
- 最新优先
- 来自专栏QQ音乐前端团队专栏
React Hooks 源码解析（4）：useEffect
React 源码版本: v16.11.0 源码注释笔记：airingursb/react 1. useEffect 简介 1.1 为什么要有 useEffect 我们在前文中说到 React Hooks dependencies || hasChanged) { callback(); _deps = dependencies; }} 3. useEffect 源码解析 3.1 mountEffect 3.4 React Fiber 流程分析 看似源码到这里就结束了，但我们还存留几个问题没有解决： effect.tag 的那些二进制数是什么意思？ pushEffect 之后还有什么逻辑？ React Fiber 优秀的文章有很多，这里再推荐阅读几篇文章和视频来帮助有兴趣的同学来了解 A Cartoon Intro to Fiber - React Conf 2017 React Fiber 这里我们把 useEffect 的源码解释清楚了，但是遗留了一个问题：effect.tag 这个参数究竟有什么用？
3K30发布于 2019-12-24 - 来自专栏react源码分析
react源码解析17.context4
查看视频调试demo_7context流程图图片图片cursor/valueStackreact源码中存在一个valueStack和valueCursor用来记录context的历史信息和当前context calculateChangedBits = null; } else { //... } const context: ReactContext<T> = { $$typeof: REACT_CONTEXT_TYPE threadCount: 0, Provider: (null: any), Consumer: (null: any), }; context.Provider = { $$typeof: REACT_PROVIDER_TYPE result;});在简化之后的createContext中可以看到，context和Provider、Consumer的关系是这样的：context.Provider = { $$typeof: REACT_PROVIDER_TYPE
28630编辑于 2023-01-06 - 来自专栏进阶高级前端工程师
React源码分析(二)渲染机制4
转换jsx语法转换后，会通过creatElement或jsx的api转换为React element作为ReactDom.render()的第一个参数进行渲染。 在上一篇文章Fiber中，我们提到过一个React项目会有一个fiberRoot和一个或多个rootFiber。fiberRoot是一个项目的根节点。 这时React开始创建update,并将ReactDom.render()的第一个参数，也就是基于<App />创建的React element赋给update。 在这里有必要讲下这个队列的创建流程，这个创建操作在React有多次应用。 总结看完这篇文章， 我们可以弄明白下面这几个问题：React的渲染流程是怎样的？React的beginWork都做了什么？React的completeWork都做了什么？
34940编辑于 2023-01-06 - 来自专栏react源码分析
react源码解析18事件系统4
从一个bug说起下面这个demo_13在react17和react16中有什么不同吗？ 代码也很简单，模拟一个modal框，点击显示出现，点击其他地方，相当于点击了mask，modal消失，因为react事件都是委托到上层，所以需要在handleClick阻止冒泡，这样点击显示的时候不会触发 但是在react16上发现这样做还是不行，需要调用e.nativeEvent.stopImmediatePropagation()才能实现，而react17上没什么影响究其原因就是react16和17在委托事件的容器上做出了改变 ，react16的事件会冒泡的document上，而17则会冒泡到root容器上，也就是ReactDom.render的第二个参数export default class Demo13 extends React.Component { state = { show: false }; componentDidMount() { document.addEventListener("click
38320编辑于 2023-01-06 - 来自专栏高级前端工程师学习必备
react源码解析4.源码目录结构和调试
react源码解析4.源码目录结构和调试 视频课程（高效学习）：进入课程 课程目录： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 源码中主要包括如下部分 fixtures：为代码贡献者提供的测试React packages：主要部分，包含Scheduler，reconciler等 scripts：react构建相关 下面来看下packages render阶段用它来构建fiber节点 怎样调试源码 本课程使用的react版本是17.0.1，通过下面几步就可以调试源码了， 方法一：可以用现成的包含本课程所有demo的项目来调试，建议使用已经构建好的项目 /react.git 依赖安装：npm install or yarn build源码 npm run build react/index,react/jsx,react-dom/index,scheduler --type=NODE 为源码建立软链： cd build/node_modules/react npm link cd build/node_modules/react-dom npm link create-react-app
91630发布于 2021-06-03 - 来自专栏高级前端工程师必备
react源码解析4.源码目录结构和调试
react源码解析4.源码目录结构和调试 视频讲解（高效学习）：进入学习 往期文章： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件系统 19.手写迷你版react 20.总结&第一章的面试题解答 源码目录结构 源码中主要包括如下部分 怎样调试源码 本课程使用的react版本是17.0.1，通过下面几步就可以调试源码了， 方法一：可以用现成的包含本课程所有demo的项目来调试，建议使用已经构建好的项目，地址：https://github.com /xiaochen1024/react_code_build 方法二： clone源码：git clone https://github.com/facebook/react.git 依赖安装：npm install or yarn build源码 npm run build react/index,react/jsx,react-dom/index,scheduler --type=NODE 为源码建立软链
51870编辑于 2021-12-03 - 来自专栏用户8771298的专栏
react源码解析4.源码目录结构和调试
react源码解析4.源码目录结构和调试 视频课程（高效学习）：进入课程 源码目录结构 源码中主要包括如下部分 fixtures：为代码贡献者提供的测试React packages：主要部分，包含Scheduler : 数据请求相关 react-refresh: 热加载相关 scheduler：调度器相关 React-reconciler：在render阶段用它来构建fiber节点 怎样调试源码 本课程使用的 react版本是17.0.1，通过下面几步就可以调试源码了， 方法一：可以用现成的包含本课程所有demo的项目来调试，建议使用已经构建好的项目，地址：https://github.com/xiaochen1024 /react_source_demo 方法二： clone源码：git clone https://github.com/facebook/react.git 依赖安装：npm install or yarn build源码：npm run build react/index,react/jsx,react-dom/index,scheduler --type=NODE 为源码建立软链： cd build
41850编辑于 2021-11-29 - 来自专栏进阶高级前端工程师
React源码分析(三)：useState，useReducer4
答案是，React维护了两套hooks，一套用来在项目初始化mount时，初始化hooks。而在后续的更新操作中会基于初始化的hooks执行更新操作。 更新 update当我们以某种形式触发setState()时，React也会根据setState()的值来决定如何更新视图。 前面讲过，React维护了两套hooks，一套用于初始化， 一套用于更新。 这个在调度更新时就已经完成了切换。所以我们这次调用useState方法会和之前初始化有所不同。 React其实可以这么做，为什么没有这么做，因为每个setState都会触发更新，React出于性能考虑，会做一个合并操作。
93630编辑于 2023-01-06 - 来自专栏进阶高级前端工程师
React源码分析1-jsx转换及React.createElement4
jsx 的转换 我们从 react 应用的入口开始对源码进行分析，创建一个简单的 hello, world 应用： import React, { Component } from 'react'; React.createElement 源码 虽然现在 react17 之后我们可以不再依赖 React.createElement 这个 api 了，但是实际场景中以及很多开源包中可能会有很多通过 React.createElement 手动创建元素的场景，所以还是推荐学习一下React.createElement源码。 函数中会对参数进行一系列的解析，源码如下，对源码相关的理解都用注释进行了标记： export function createElement(type, config, children) { let 源码 我们回到上述 hello,world 应用程序代码中，创建类组件时，我们继承了从 react 库中引入的 Component，我们再看一下React.Component源码： function
1.1K30编辑于 2023-01-06 - 来自专栏进阶高级前端工程师
React源码分析4-深度理解diff算法
如下图左边的树想要转变为右边的树： 图片实际经过的变换如下：将 root 节点下 A 子节点移动至 B 子节点之后在 root 节点下新增 E 子节点将 root 节点下 C 子节点删除图片结合源码看 renderLanes, ); }}因为我们主要是要学习 diff 算法，所以我们暂时先不关心 mountChildFibers 函数，主要关注 reconcileChildFibers ，我们来看一下它的源码 (returnFiber, currentFirstChild, element); created.return = returnFiber; return created; }}根据源码我们可以得知 再来看 placeSingleChild 的源码：function placeSingleChild(newFiber: Fiber): Fiber { if (shouldTrackSideEffects placeSingleChild 前面说过了，我们主要看 reconcileSingleTextNode 的源码：function reconcileSingleTextNode( returnFiber
69530编辑于 2022-10-06 - 来自专栏进阶高级前端工程师
React源码分析4-深度理解diff算法
如下图左边的树想要转变为右边的树： 图片实际经过的变换如下：将 root 节点下 A 子节点移动至 B 子节点之后在 root 节点下新增 E 子节点将 root 节点下 C 子节点删除图片结合源码看 renderLanes, ); }}因为我们主要是要学习 diff 算法，所以我们暂时先不关心 mountChildFibers 函数，主要关注 reconcileChildFibers ，我们来看一下它的源码 (returnFiber, currentFirstChild, element); created.return = returnFiber; return created; }}根据源码我们可以得知 再来看 placeSingleChild 的源码：function placeSingleChild(newFiber: Fiber): Fiber { if (shouldTrackSideEffects placeSingleChild 前面说过了，我们主要看 reconcileSingleTextNode 的源码：function reconcileSingleTextNode( returnFiber
56920编辑于 2022-12-19 - 来自专栏进阶高级前端工程师
React源码分析4-深度理解diff算法
如下图左边的树想要转变为右边的树： 图片实际经过的变换如下：将 root 节点下 A 子节点移动至 B 子节点之后在 root 节点下新增 E 子节点将 root 节点下 C 子节点删除图片结合源码看 renderLanes, ); }}因为我们主要是要学习 diff 算法，所以我们暂时先不关心 mountChildFibers 函数，主要关注 reconcileChildFibers ，我们来看一下它的源码 (returnFiber, currentFirstChild, element); created.return = returnFiber; return created; }}根据源码我们可以得知 再来看 placeSingleChild 的源码：function placeSingleChild(newFiber: Fiber): Fiber { if (shouldTrackSideEffects placeSingleChild 前面说过了，我们主要看 reconcileSingleTextNode 的源码：function reconcileSingleTextNode( returnFiber
50020编辑于 2022-11-30 - 来自专栏用户9715713的专栏
React源码--React Fiber
facebook为什么要使用重构ReactReact Fiber是什么React Fiber的核心算法 - react是如何中断重启任务的react fiber部分源码简化版前言该文章涉及的源码部分基于 甚至可能会超过16ms（在React官网就显示49.9ms）因为requestIdleCallback的一些限制原因，React源码中未使用requestIdleCallback，而是自己实现了一套类似的机制 下面是在React源码中Fiber的数据对象。其实说到底，Fiber就是一个对象。 Fiber数据结构下面是React源码中的Fiber对象的属性，具体可以直接看注释。 源码 ---太长不看系列下面是React中关于Fiber的一些核心源码---已删除了很多跟此次文章无关的代码，大家可以自行选择是否服用。
82431编辑于 2022-12-08 - 来自专栏进阶高级前端工程师
React源码分析4-深度理解diff算法5
如下图左边的树想要转变为右边的树： 图片实际经过的变换如下：将 root 节点下 A 子节点移动至 B 子节点之后在 root 节点下新增 E 子节点将 root 节点下 C 子节点删除图片结合源码看 renderLanes, ); }}因为我们主要是要学习 diff 算法，所以我们暂时先不关心 mountChildFibers 函数，主要关注 reconcileChildFibers ，我们来看一下它的源码 (returnFiber, currentFirstChild, element); created.return = returnFiber; return created; }}根据源码我们可以得知 再来看 placeSingleChild 的源码：function placeSingleChild(newFiber: Fiber): Fiber { if (shouldTrackSideEffects placeSingleChild 前面说过了，我们主要看 reconcileSingleTextNode 的源码：function reconcileSingleTextNode( returnFiber
53020编辑于 2023-01-09 - 来自专栏前端工程师提升
react源码解析3.react源码架构
react源码解析3.react源码架构 视频讲解（高效学习）：进入学习 往期文章： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14. react源码架构和各个模块。 在真正的代码学习之前，我们需要在大脑中有一个react源码的地图，知道react渲染的大致流程和框架，这样才能从上帝视角看react是怎么更新的，来吧少年。 React.createElement，React.createElement方法返回virtual-dom对象（内存中用来描述dom阶段的对象），所有jsx本质上就是React.createElement
69440编辑于 2021-12-13 - 来自专栏高级前端工程师必备
react源码解析3.react源码架构
react源码解析3.react源码架构 这一章的目的是让我们认识一下react源码架构和各个模块。 在真正的代码学习之前，我们需要在大脑中有一个react源码的地图，知道react渲染的大致流程和框架，这样才能从上帝视角看react是怎么更新的，来吧少年。 （渲染器）： 将Reconciler中打好标签的节点渲染到视图上 一图胜千言： react源码3.1 jsx jsx是js语言的扩展，react通过babel词法解析（具体怎么转换可以查阅babel 相关插件），将jsx转换成React.createElement，React.createElement方法返回virtual-dom对象（内存中用来描述dom阶段的对象），所有jsx本质上就是React.createElement 的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.
57040编辑于 2021-12-03 - 来自专栏进阶高级前端工程师
react源码解析3.react源码架构
这一章的目的是让我们认识一下react源码架构和各个模块。 在真正的代码学习之前，我们需要在大脑中有一个react源码的地图，知道react渲染的大致流程和框架，这样才能从上帝视角看react是怎么更新的，来吧少年。 react的核心可以用ui=fn(state)来表示，更详细可以用const state = reconcile(update);const UI = commit(state);上面的fn可以分为如下一个部分 相关插件），将jsx转换成React.createElement，React.createElement方法返回virtual-dom对象（内存中用来描述dom阶段的对象），所有jsx本质上就是React.createElement react17会在每一帧分配一个时间（时间片）给js执行，如果在这个时间内js还没执行完，那就要暂停它的执行，等下一帧继续执行，把执行权交回给浏览器去绘制。
49830编辑于 2022-09-24 - 来自专栏用户8771298的专栏
react源码解析3.react源码架构
react源码解析3.react源码架构 视频讲解（高效学习）：进入学习 往期文章： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api react源码架构和各个模块。 在真正的代码学习之前，我们需要在大脑中有一个react源码的地图，知道react渲染的大致流程和框架，这样才能从上帝视角看react是怎么更新的，来吧少年。 （渲染器）： 将Reconciler中打好标签的节点渲染到视图上 一图胜千言： react源码3.1 react源码3.2 jsx jsx是js语言的扩展，react通过babel词法解析（具体怎么转换可以查阅 源码1.2 开启concurrent react源码3.3
63450编辑于 2021-12-10 - 来自专栏react源码分析
react源码解析3.react源码架构
这一章的目的是让我们认识一下react源码架构和各个模块。 在真正的代码学习之前，我们需要在大脑中有一个react源码的地图，知道react渲染的大致流程和框架，这样才能从上帝视角看react是怎么更新的，来吧少年。 react的核心可以用ui=fn(state)来表示，更详细可以用const state = reconcile(update);const UI = commit(state);上面的fn可以分为如下一个部分 React.createElement，React.createElement方法返回virtual-dom对象（内存中用来描述dom阶段的对象），所有jsx本质上就是React.createElement react17会在每一帧分配一个时间（时间片）给js执行，如果在这个时间内js还没执行完，那就要暂停它的执行，等下一帧继续执行，把执行权交回给浏览器去绘制。
51820编辑于 2023-01-10 - 来自专栏用户8771298的专栏
react源码解析3.react源码架构
react源码解析3.react源码架构 视频课程（高效学习）：进入课程 这一章的目的是让我们认识一下react源码架构和各个模块。 在真正的代码学习之前，我们需要在大脑中有一个react源码的地图，知道react渲染的大致流程和框架，这样才能从上帝视角看react是怎么更新的，来吧少年。 （渲染器）： 将Reconciler中打好标签的节点渲染到视图上 一图胜千言： [react源码3.1] [react源码3.2] jsx jsx是js语言的扩展，react通过babel词法解析（具体怎么转换可以查阅 [react源码15.2] Lane模型 react之前的版本用expirationTime属性代表优先级，该优先级和IO不能很好的搭配工作（io的优先级高于cpu的优先级），现在有了更加细粒度的优先级表示方法 源码1.2] 开启concurrent [react源码3.3]
56240编辑于 2021-11-29
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号