- 博客(226)
- 收藏
- 关注
RSS订阅原创 React Context源码是怎么实现的呢
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。一个顶层数据，想要传递到某些深层组件，通过props逐层传递将会非常繁琐，使用 Context 可避免显式地通过组件树逐层传递props。
2023-03-15 08:41:03
208
原创 从react源码看hooks的原理
本文主要讲解了部分hooks的使用与原理，对hook使用更加熟悉了，还有一部分React内置hook的使用请查看官网，还有基于React的扩展ahooks都是值得学习的。
2023-03-01 13:17:46
454
1
原创 从recat源码角度看setState流程
setState()将对组件 state 的更改排入队列批量推迟更新，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。其实setState实际上不是异步，只是代码执行顺序不同，有了异步的感觉。使用方法使用setState()改变状态之后，立刻通过this.state拿不到最新的状态可以使用或者中的回调函数callback保证在应用更新后触发，通常建议使用多次setState()函数调用产生的效果会合并为了更好的感知性能，React 会在同一周期内会对多个。
2023-03-01 13:17:30
463
1
原创 从源码角度看React-Hydrate原理
React 渲染过程，即render阶段以及commit阶段。渲染过程和差不多，两者之间最大的区别就是，在render阶段，会尝试复用(hydrate)浏览器现有的 dom 节点，并相互关联 dom 实例和 fiber，以及找出 dom 属性和 fiber 属性之间的差异。
2023-03-01 13:15:47
319
原创 react源码分析：深度理解React.Context
通常，一个组件的更新可通过执行内部 setState 来生成，其方式也是标记Fiber.lane让组件不进入 bailout；对于Context，当 Provider.value 发生更新后，它会查找子树找到消费组件，为消费组件的 Fiber 节点标记 lane。当组件（函数组件）进入阶段进行处理时，不满足bailout，就会重新被调用进行重渲染，这时执行useContext，就会拿到最新的。这就是实现过程。
2023-02-28 08:58:36
113
原创 react的useState源码分析
简单说下为什么React选择函数式组件，主要是class组件比较冗余、生命周期函数写法不友好，骚写法多，functional组件更符合React编程思想等等等。更具体的可以拜读dan大神的blog。其中这句十分精辟的道出函数式组件的优势。但是在16.8之前react的函数式组件十分羸弱，基本只能作用于纯展示组件，主要因为缺少state和生命周期。本人曾经在hooks出来前负责过纯函数式的react项目，所有状态处理都必须在reducer中进行，所有副作用都在saga中执行，可以说是十分艰辛的经历了。
2023-02-28 08:57:40
179
原创 react源码分析：组件的创建和更新
本章从开始讲解了，初始化的时候，根节点的创建与更新流程，以及在类组件原型上挂载的一些更新的方法，但是为什么这一章不直接把他更新流程讲完呢？因为下一章要讲一下fiberNode这个东西，简而言之他只是一个架构概念，并不是React独有的，但是现在很有必要一起来看一看这个，那么下一章我们来一起揭开FiberNode的神秘面纱吧。
2023-02-28 08:56:29
262
原创 react源码分析：babel如何解析jsx
不管是类组件还是函数组件，最终我们写的jsx都被babel转化成了可识别的元素，其中我们也看了Component等内部实现，了解到了作为他是怎么被创建的，但是远远没有完，因为我们知道我们在写React的时候，会在后面带上一个，没错我们下一章节就要去探索一下方法了。
2023-02-27 10:46:33
408
原创 react源码分析：实现react时间分片
上文提到过，时间分片其实就是一个固定而连续且有间隔的时间区间固定：时间分片是工作时长是固定的连续：分片之间是连续的，当前分片内有工作没做完，会留到下个分片继续有间隔：在进入下一个分片前，会有一定时间的间隔这些解释比较抽象，可以更加通俗去理解固定：每天固定工作8小时连续：每天都要上班有间隔：明天上班前会休息一段时间读完这篇文章估计你可能对时间分片的概念已经有所有了解了，是不是觉得react16的新特性之一时间分片，也并没有想象中的神秘。分片开启分片中断、重启延迟执行时间分片是。
2023-02-27 10:46:16
383
原创 react源码中的fiber架构
这一章讲述了整个的fiber架构与fiber树的创建与更新，那么这里从React应用的初始化挂载到React更新就形成了一部分的闭环完结，之后我们便是沿着流程走到了更新这里。
2023-02-21 11:25:24
492
原创 react源码中的hooks
今天，让我们一起深入探究 React Hook 的实现方法，以便更好的理解它。但是，它的各种神奇特性的不足是，一旦出现问题，调试非常困难，这是由于它的背后是由复杂的堆栈追踪（stack trace）支持的。因此，通过深入学习 React 的新特性：hook 系统，我们就能比较快地解决遇到的问题，甚至可以直接杜绝问题的发生。React hook 系统概要示意图。
2023-02-21 11:24:37
487
原创 react源码中的协调与调度
React通过获取事件的优先级，处理具有同样优先级的事件，创建更新对象并与fiber的更新队列关联起来。到这一步这个流程就走完了，也下面就是开始他的协调阶段了。本文讲了React在状态改变的时候，会根据当前任务优先级，等一些列操作去创建链表树，在协调阶段，会根据浏览器每一帧去做比较，假如浏览器每一帧执行时间戳高于当前时间，则表示当前帧没有空闲时间，当前任务则必须要等到下一个空闲帧才能去执行的可中断的策略。还有关于beginWork的遍历执行更新fiber的节点。
2023-02-21 11:24:07
420
原创 React源码解读之任务调度
React设计体系如人类社会一般，拨动时间轮盘的那一刻，你便成了穿梭在轮片中的一粒细沙，角逐过程处处都需要亮出你的属性，你重要吗？你无可替代吗？你有特殊权限吗？没有，那不好意思，请继续在轮片中循环。属于你的生命之火殆尽，前来悼念之人很多，这幕，像极了出生时的场景。干啥玩意儿，这是技术文章不是抒情散文！下面进入正题。创建的准备上一节已经说明了，主要定义与更新相关的数据结构和变量，计算过期时间等。
2023-02-20 12:21:42
516
原创 React源码解读之更新的创建
React的鲜活生命起源于，这个过程会为它的一生储备好很多必需品，我们顺着这个线索，一探婴儿般React应用诞生之初的悦然。更新创建的操作我们总结为以下两种场景。
2023-02-20 12:21:25
399
原创 react hook 源码完全解读
从React Hooks发布以来，整个社区都以积极的态度去拥抱它、学习它。期间也涌现了很多关于React Hooks 源码解析的文章。本文就以笔者自己的角度来写一篇属于自己的文章吧。希望可以深入浅出、图文并茂的帮助大家对React Hooks的实现原理进行学习与理解。本文将以文字、代码、图画的形式来呈现内容。主要对常用Hooks中的进行学习，尽可能的揭开Hooks的面纱。看到这里我们在回头看看最初的一些疑问：React 如何管理区分Hooks？React通过单链表来管理Hooks。
2023-02-20 12:20:55
463
原创 ReactDOM.render在react源码中执行之后发生了什么？
作用：主要是判断是否为服务端渲染，如果是的话就会复用存在的dom节点进行协调（reconciliation）提高性能，如果不是则会清空container中的子元素，最后传入container和shouldHydrate返回createLegacyRoot函数。作用：返回了一个ReactDOMBlockingRoot实例，这里传入了LegacyRoot是一个常量=0代表着现在使用的同步渲染模式，是为了后续的Concurrent可中断渲染模式做准备。: 渲染React的DOM容器。: 渲染完成后的回调函数。
2023-02-19 14:26:49
370
原创 从源码角度看React-Hydrate原理
React 渲染过程，即render阶段以及commit阶段。渲染过程和差不多，两者之间最大的区别就是，在render阶段，会尝试复用(hydrate)浏览器现有的 dom 节点，并相互关联 dom 实例和 fiber，以及找出 dom 属性和 fiber 属性之间的差异。
2023-02-14 13:09:46
446
原创 深入react源码看setState究竟做了什么？
上文只是描述了一个最简单的使用场景，各位可以根据本文配合源码，进行以下两个尝试：Q1. 多个state的时候有什么变化？// ... }A1. 将会构建一个上文所提到的hook链Q2. 对同个state多次调用setState时有什么变化？A2. 将会构建一个上文所提到的update链。
2023-02-14 13:08:26
401
原创 react的useState源码分析
简单说下为什么React选择函数式组件，主要是class组件比较冗余、生命周期函数写法不友好，骚写法多，functional组件更符合React编程思想等等等。更具体的可以拜读dan大神的blog。其中这句十分精辟的道出函数式组件的优势。但是在16.8之前react的函数式组件十分羸弱，基本只能作用于纯展示组件，主要因为缺少state和生命周期。本人曾经在hooks出来前负责过纯函数式的react项目，所有状态处理都必须在reducer中进行，所有副作用都在saga中执行，可以说是十分艰辛的经历了。
2023-02-13 11:07:48
274
原创 从react源码看hooks的原理
本文主要讲解了部分hooks的使用与原理，对hook使用更加熟悉了，还有一部分React内置hook的使用请查看官网，还有基于React的扩展ahooks都是值得学习的。
2023-02-13 11:07:11
667
原创 从recat源码角度看setState流程
setState()将对组件 state 的更改排入队列批量推迟更新，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。其实setState实际上不是异步，只是代码执行顺序不同，有了异步的感觉。使用方法使用setState()改变状态之后，立刻通过this.state拿不到最新的状态可以使用或者中的回调函数callback保证在应用更新后触发，通常建议使用多次setState()函数调用产生的效果会合并为了更好的感知性能，React 会在同一周期内会对多个。
2023-02-13 11:06:38
396
原创 react源码分析：实现react时间分片
上文提到过，时间分片其实就是一个固定而连续且有间隔的时间区间固定：时间分片是工作时长是固定的连续：分片之间是连续的，当前分片内有工作没做完，会留到下个分片继续有间隔：在进入下一个分片前，会有一定时间的间隔这些解释比较抽象，可以更加通俗去理解固定：每天固定工作8小时连续：每天都要上班有间隔：明天上班前会休息一段时间读完这篇文章估计你可能对时间分片的概念已经有所有了解了，是不是觉得react16的新特性之一时间分片，也并没有想象中的神秘。分片开启分片中断、重启延迟执行时间分片是。
2023-02-07 10:02:01
224
原创 react源码分析：深度理解React.Context
通常，一个组件的更新可通过执行内部 setState 来生成，其方式也是标记Fiber.lane让组件不进入 bailout；对于Context，当 Provider.value 发生更新后，它会查找子树找到消费组件，为消费组件的 Fiber 节点标记 lane。当组件（函数组件）进入阶段进行处理时，不满足bailout，就会重新被调用进行重渲染，这时执行useContext，就会拿到最新的。这就是实现过程。
2023-02-07 10:01:19
255
原创 react源码分析：组件的创建和更新
本章从开始讲解了，初始化的时候，根节点的创建与更新流程，以及在类组件原型上挂载的一些更新的方法，但是为什么这一章不直接把他更新流程讲完呢？因为下一章要讲一下fiberNode这个东西，简而言之他只是一个架构概念，并不是React独有的，但是现在很有必要一起来看一看这个，那么下一章我们来一起揭开FiberNode的神秘面纱吧。
2023-02-07 10:00:55
379
原创 react源码中的协调与调度
React通过获取事件的优先级，处理具有同样优先级的事件，创建更新对象并与fiber的更新队列关联起来。到这一步这个流程就走完了，也下面就是开始他的协调阶段了。本文讲了React在状态改变的时候，会根据当前任务优先级，等一些列操作去创建链表树，在协调阶段，会根据浏览器每一帧去做比较，假如浏览器每一帧执行时间戳高于当前时间，则表示当前帧没有空闲时间，当前任务则必须要等到下一个空闲帧才能去执行的可中断的策略。还有关于beginWork的遍历执行更新fiber的节点。
2023-02-06 10:42:24
333
原创 react源码中的生命周期和事件系统
这一章主要是介绍组件在mountupdatedestroy阶段的生命周期执行顺序与React事件系统的注册，绑定，调度更新等。
2023-02-06 10:41:56
368
原创 react源码分析：babel如何解析jsx
不管是类组件还是函数组件，最终我们写的jsx都被babel转化成了可识别的元素，其中我们也看了Component等内部实现，了解到了作为他是怎么被创建的，但是远远没有完，因为我们知道我们在写React的时候，会在后面带上一个，没错我们下一章节就要去探索一下方法了。一章我想跟大家探讨的是React的生命周期与事件系统。这一章主要是介绍组件在mountupdatedestroy阶段的生命周期执行顺序与React事件系统的注册，绑定，调度更新等。
2023-02-06 10:41:21
565
1
原创 react hook 源码完全解读
从React Hooks发布以来，整个社区都以积极的态度去拥抱它、学习它。期间也涌现了很多关于React Hooks 源码解析的文章。本文就以笔者自己的角度来写一篇属于自己的文章吧。希望可以深入浅出、图文并茂的帮助大家对React Hooks的实现原理进行学习与理解。本文将以文字、代码、图画的形式来呈现内容。主要对常用Hooks中的进行学习，尽可能的揭开Hooks的面纱。看到这里我们在回头看看最初的一些疑问：React 如何管理区分Hooks？React通过单链表来管理Hooks。
2023-01-10 14:06:40
455
原创 react源码中的fiber架构
这一章讲述了整个的fiber架构与fiber树的创建与更新，那么这里从React应用的初始化挂载到React更新就形成了一部分的闭环完结，之后我们便是沿着流程走到了更新这里。
2023-01-10 14:06:04
139
原创 react源码中的hooks
今天，让我们一起深入探究 React Hook 的实现方法，以便更好的理解它。但是，它的各种神奇特性的不足是，一旦出现问题，调试非常困难，这是由于它的背后是由复杂的堆栈追踪（stack trace）支持的。因此，通过深入学习 React 的新特性：hook 系统，我们就能比较快地解决遇到的问题，甚至可以直接杜绝问题的发生。React hook 系统概要示意图。
2023-01-10 14:03:44
160
原创 React源码解读之任务调度
React设计体系如人类社会一般，拨动时间轮盘的那一刻，你便成了穿梭在轮片中的一粒细沙，角逐过程处处都需要亮出你的属性，你重要吗？你无可替代吗？你有特殊权限吗？没有，那不好意思，请继续在轮片中循环。属于你的生命之火殆尽，前来悼念之人很多，这幕，像极了出生时的场景。干啥玩意儿，这是技术文章不是抒情散文！下面进入正题。创建的准备上一节已经说明了，主要定义与更新相关的数据结构和变量，计算过期时间等。
2023-01-09 08:34:22
331
原创 React源码解读之更新的创建
React的鲜活生命起源于，这个过程会为它的一生储备好很多必需品，我们顺着这个线索，一探婴儿般React应用诞生之初的悦然。更新创建的操作我们总结为以下两种场景。
2023-01-09 08:33:25
257
原创 React Context源码是怎么实现的呢
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。一个顶层数据，想要传递到某些深层组件，通过props逐层传递将会非常繁琐，使用 Context 可避免显式地通过组件树逐层传递props。
2023-01-06 07:47:17
230
原创 ReactDOM.render在react源码中执行之后发生了什么？
作用：主要是判断是否为服务端渲染，如果是的话就会复用存在的dom节点进行协调（reconciliation）提高性能，如果不是则会清空container中的子元素，最后传入container和shouldHydrate返回createLegacyRoot函数。作用：返回了一个ReactDOMBlockingRoot实例，这里传入了LegacyRoot是一个常量=0代表着现在使用的同步渲染模式，是为了后续的Concurrent可中断渲染模式做准备。: 渲染React的DOM容器。: 渲染完成后的回调函数。
2023-01-06 07:46:42
342
原创 从recat源码角度看setState流程
setState()将对组件 state 的更改排入队列批量推迟更新，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。其实setState实际上不是异步，只是代码执行顺序不同，有了异步的感觉。使用方法使用setState()改变状态之后，立刻通过this.state拿不到最新的状态可以使用或者中的回调函数callback保证在应用更新后触发，通常建议使用多次setState()函数调用产生的效果会合并为了更好的感知性能，React 会在同一周期内会对多个。
2023-01-05 09:01:48
331
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人