- 博客(218)
- 收藏
- 关注
RSS订阅原创 看透react源码之感受react的进化
网上有许多关于react源码解读的文章，其中有很多都只是单纯贴源码，罗列变量名。其实大家都知道这个英文怎么读，直译也大概知道意思，但是这个英文在react中起到什么作用，并没有说的很通俗明白。对于刚刚接触源码或者想要了解react实现的人来说，没有起到引导作用，一堆函数变量反而劝退了很多人。所以打算开启一个系列的文章，用简单的代码片段代替源码，拆解react的时间分片、优先级调度、diff等核心模块，让大家一眼就能明白其中的原理。本文主要简述了react的进化历程和新react架构的基本构成。
2023-03-15 08:30:56
258
1
原创 React-Hooks源码深度解读
使用 hooks 几个月了。基本上所有类组件我都使用函数式组件来写。现在 react 社区的很多组件，都也开始支持hooks。大概了解了点重要的源码，做到知其然也知其所以然，那么在实际工作中使用他可以减少不必要的 bug，提高效率。
2023-03-15 08:30:48
196
1
原创 深入React源码揭开渲染更新流程的面纱
render会调用方法中，如果是第一次渲染，会先初始化FiberRoot，其为应用的起点。同时生成根节点的Fiber实例。这里Fiber;FiberRoot。调用会计算出此次更新的过期时间。并生成任务对象update，将其插入Fiber中的更新队列，然后调用触发任务调度会更新以该Fiber节点为根节点的整棵Fiber树的过期时间。然后调用进行调度中会绑定任务与具体执行函数。然后交由Scheduler处理。
2023-03-01 13:04:17
552
原创 手写一个react，看透react运行机制
return < div > 你好 < / div > < / div > } ReactDOM . render(< App / > , document . getElementById('root'))React负责逻辑控制，数据 -> VDOM首先，我们可以看到每一个js文件中，都一定会引入import React from ‘react’。但是我们的代码里边，根本没有用到React。但是你不引入他就报错了。为什么呢？可以这样理解，在我们上述的js文件中，我们使用了jsx。
2023-03-01 13:04:03
377
原创 深度分析React源码中的合成事件
说是讲React的合成事件，实际上讲了React的事件系统。React的事件系统分为几个部分：事件注册；事件监听；事件合成；事件派发；事件系统流程：在React代码执行时，内部会自动执行事件的注册；第一次渲染，创建fiberRoot时，会进行事件的监听，所有的事件通过委托在id=root的DOM元素上进行监听；在我们触发事件时，会进行事件合成，同类型事件复用一个合成事件类实例对象；最后进行事件的派发，执行我们代码中的事件回调函数；当然，由于篇幅问题，这里也是对React。
2023-03-01 13:03:58
456
原创 带你实现react源码的核心功能
先来看自定义元素的 receiveComponent 的实现/** * component 类 更新 * @param {*} nextElement * @param {*} newState */ ReactCompositeComponent . prototype . receiveComponent = function(nextElement , newState) {
2023-02-28 08:49:57
268
原创 从React源码来学hooks是不是更香呢
所以我们总结一下这个函数，它所做的事情如下：总结一下useState和useReducer的执行过程如下图：总结一下useEffect的大体流程如下：本章讲解了 react hooks 的源码，理解了 hooks 的设计思想和工作过程。其他 hook 平时用的比较少，就不在这里展开讲了，但通过上面几个 hook 的源码讲解，其他 hook 看源码你应该也能看得懂。
2023-02-28 08:48:21
64
原创 从React源码角度看useCallback，useMemo，useContext
这两个hook原理还是很简单的，因为是系列文章，很多内容和前面文章都重复了，所以导致这篇都没啥能写的了。总结下原理：这两个hook的做法就是通过将函数或者值存储在对应的上，在下次更新时，根据依赖项是否变化来决定是要用缓存值，还是新的传进来的值。虽然和useMemo是为了优化性能出现的，但是各位看官也不要盲目使用，毕竟这两个hook本身也会带来开销。和useMemo的区别？和useMemo的使用场景有哪些？和useMemo是做什么的？和useMemo是怎么实现优化性能的？useContext。
2023-02-28 08:48:03
118
原创 从React源码分析看useEffect
useEffect和的区别？useEffect是怎么判断回调函数是否需要执行的？useEffect是同步还是异步？useEffect是通过什么实现异步的？useEffect为什么要要优先选用实现异步？
2023-02-27 10:26:59
269
原创 React源码分析8-状态更新的优先级机制
以上就是本文的全部内容了，最后通过一张流程图总结一下这篇文章的内容。阅读源码是一个很枯燥的过程，但是收益也是巨大的。如果你在阅读的过程中有任何的问题，都欢迎你在评论区与我交流。下一篇文章还是 render 流程相关的内容。
2023-02-27 10:25:47
294
原创 React源码分析7-state计算流程和优先级
看到上面的原理解析是不是很复杂，我们可以忽略所有的实现细节，回归现象本质，state计算就是遍历 update对象 链表根据 payload 得到新的state。在此前提下，因为优先级机制，打断之后会还原节点，从而会引起 update对象 丢失问题 和 state计算连续性问题。解决这两个问题才是我们上面说的复杂的实现细节。
2023-02-21 11:14:59
312
原创 React源码分析6-hooks源码
所以我们总结一下这个函数，它所做的事情如下：总结一下useState和useReducer的执行过程如下图：总结一下useEffect的大体流程如下：本章讲解了 react hooks 的源码，理解了 hooks 的设计思想和工作过程。其他 hook 平时用的比较少，就不在这里展开讲了，但通过上面几个 hook 的源码讲解，其他 hook 看源码你应该也能看得懂。
2023-02-21 11:14:11
445
原创 React源码分析4-深度理解diff算法
react 的每次更新，都会将新的 ReactElement 内容与旧的 fiber 树作对比，比较出它们的差异后，构建新的 fiber 树，将差异点放入更新队列之中，从而对真实 dom 进行 render。简单来说就是如何通过最小代价将旧的 fiber 树转换为新的 fiber 树。经典的 diff 算法 中，将一棵树转为另一棵树的最低时间复杂度为 O(n^3)，其中 n 为树种节点的个数。
2023-02-20 12:07:17
454
原创 React源码分析2-深入理解fiber
本章讲解了 fiber 出现的主要原因、fiber 节点中主要的属性以及 fiber 树是如何构建与更新的。
2023-02-20 12:06:50
367
原创 React源码分析3-render阶段(穿插scheduler和reconciler)
当发生渲染或者更新操作时，react 去创建一系列的任务，任务带有优先级，然后构建 workInProgress fiber 树链表。遍历任务链表去执行任务。每一帧帧先执行浏览器的渲染等任务，如果当前帧还有空闲时间，则执行任务，直到当前帧的时间用完。如果当前帧已经没有空闲时间，就等到下一帧的空闲时间再去执行。如果当前帧没有空闲时间但是当前任务链表有任务到期了或者有立即执行任务，那么必须执行的时候就以丢失几帧的代价，执行这些任务。执行完的任务都会被从链表中删除。
2023-02-20 12:06:30
414
原创 React源码分析(三)：useState，useReducer
总结下useState初始化和setStateuseState会在第一次执行函数组件时进行初始化，返回。当我们通过setState也就是进行调度更新时，会创建一个update加入到hook.queue中。当更新过程中再次执行函数组件，也会调用useState方法，此时的useState内部会使用更新时的hooks。通过获取到创建的update。在通过遍历update链表完成setState合并。返回update后的。
2023-02-19 13:28:13
406
原创 React源码分析(二)渲染机制
React的渲染流程是怎样的？React的beginWork都做了什么？React的completeWork都做了什么？React的commitWork都做了什么？useEffect和useLayoutEffect的区别是什么？useEffect和useLayoutEffect的销毁函数和更新回调的调用时机？
2023-02-19 13:27:46
394
原创 React源码分析1-jsx转换及React.createElement
本章讲述了 jsx 在 react17 之前和之后的不同的转换，实际上 react17 之后 babel 的对 jsx 的转换就是比之前多了一步的动作：另外讲述了和的内部实现是怎样的。通过 babel及，将 jsx 转换为了浏览器能够识别的原生 js 语法，为 react 后续对状态改变、事件响应以及页面更新等奠定了基础。后面的章节中，将探究 react 是如何一步步将状态等信息渲染为真实页面的。
2023-02-19 13:27:06
368
原创 看透react源码之感受react的进化
网上有许多关于react源码解读的文章，其中有很多都只是单纯贴源码，罗列变量名。其实大家都知道这个英文怎么读，直译也大概知道意思，但是这个英文在react中起到什么作用，并没有说的很通俗明白。对于刚刚接触源码或者想要了解react实现的人来说，没有起到引导作用，一堆函数变量反而劝退了很多人。所以打算开启一个系列的文章，用简单的代码片段代替源码，拆解react的时间分片、优先级调度、diff等核心模块，让大家一眼就能明白其中的原理。本文主要简述了react的进化历程和新react架构的基本构成。
2023-02-14 12:48:06
411
原创 React-Hooks源码深度解读
使用 hooks 几个月了。基本上所有类组件我都使用函数式组件来写。现在 react 社区的很多组件，都也开始支持hooks。大概了解了点重要的源码，做到知其然也知其所以然，那么在实际工作中使用他可以减少不必要的 bug，提高效率。
2023-02-14 12:47:05
366
原创 手写一个react，看透react运行机制
return < div > 你好 < / div > < / div > } ReactDOM . render(< App / > , document . getElementById('root'))React负责逻辑控制，数据 -> VDOM首先，我们可以看到每一个js文件中，都一定会引入import React from ‘react’。但是我们的代码里边，根本没有用到React。但是你不引入他就报错了。为什么呢？可以这样理解，在我们上述的js文件中，我们使用了jsx。
2023-02-13 10:47:41
405
原创 深入React源码揭开渲染更新流程的面纱
render会调用方法中，如果是第一次渲染，会先初始化FiberRoot，其为应用的起点。同时生成根节点的Fiber实例。这里Fiber;FiberRoot。调用会计算出此次更新的过期时间。并生成任务对象update，将其插入Fiber中的更新队列，然后调用触发任务调度会更新以该Fiber节点为根节点的整棵Fiber树的过期时间。然后调用进行调度中会绑定任务与具体执行函数。然后交由Scheduler处理。
2023-02-13 10:47:02
566
原创 深度分析React源码中的合成事件
说是讲React的合成事件，实际上讲了React的事件系统。React的事件系统分为几个部分：事件注册；事件监听；事件合成；事件派发；事件系统流程：在React代码执行时，内部会自动执行事件的注册；第一次渲染，创建fiberRoot时，会进行事件的监听，所有的事件通过委托在id=root的DOM元素上进行监听；在我们触发事件时，会进行事件合成，同类型事件复用一个合成事件类实例对象；最后进行事件的派发，执行我们代码中的事件回调函数；当然，由于篇幅问题，这里也是对React。
2023-02-13 10:46:43
361
原创 从React源码来学hooks是不是更香呢
所以我们总结一下这个函数，它所做的事情如下：总结一下useState和useReducer的执行过程如下图：总结一下useEffect的大体流程如下：本章讲解了 react hooks 的源码，理解了 hooks 的设计思想和工作过程。其他 hook 平时用的比较少，就不在这里展开讲了，但通过上面几个 hook 的源码讲解，其他 hook 看源码你应该也能看得懂。
2023-02-07 09:43:27
2471
原创 从React源码来学hooks是不是更香呢
所以我们总结一下这个函数，它所做的事情如下：总结一下useState和useReducer的执行过程如下图：总结一下useEffect的大体流程如下：本章讲解了 react hooks 的源码，理解了 hooks 的设计思想和工作过程。其他 hook 平时用的比较少，就不在这里展开讲了，但通过上面几个 hook 的源码讲解，其他 hook 看源码你应该也能看得懂。
2023-02-07 09:43:03
254
原创 从React源码角度看useCallback，useMemo，useContext
这两个hook原理还是很简单的，因为是系列文章，很多内容和前面文章都重复了，所以导致这篇都没啥能写的了。总结下原理：这两个hook的做法就是通过将函数或者值存储在对应的上，在下次更新时，根据依赖项是否变化来决定是要用缓存值，还是新的传进来的值。虽然和useMemo是为了优化性能出现的，但是各位看官也不要盲目使用，毕竟这两个hook本身也会带来开销。和useMemo的区别？和useMemo的使用场景有哪些？和useMemo是做什么的？和useMemo是怎么实现优化性能的？useContext。
2023-02-07 09:42:33
499
原创 带你实现react源码的核心功能
先来看自定义元素的 receiveComponent 的实现/** * component 类 更新 * @param {*} nextElement * @param {*} newState */ ReactCompositeComponent . prototype . receiveComponent = function(nextElement , newState) {
2023-02-07 09:42:03
308
原创 React源码分析8-状态更新的优先级机制
以上就是本文的全部内容了，最后通过一张流程图总结一下这篇文章的内容。阅读源码是一个很枯燥的过程，但是收益也是巨大的。如果你在阅读的过程中有任何的问题，都欢迎你在评论区与我交流。下一篇文章还是 render 流程相关的内容。
2023-02-06 10:01:39
355
原创 React源码分析8-状态更新的优先级机制
react的优先级机制在源码中并不是一个独立的，解耦的模块，而是涉及到了react整体运行的方方面面，最后回归整理下优先级机制在源码中的使用，让大家对优先级机制有一个更加整体的认知。时间分片。涉及到任务打断、根据优先级计算分片时长setState 生成 Update 对象。每个 Update 对象里面都有一个 lane 属性，代表此次更新的优先级高优先级任务打断低优先级任务。每一次调度都会对正在进行任务和当前任务最高优先级做比较，如果不相等，就代表有高优先级任务进来，需要打断当前正在的任务。
2023-02-06 10:01:27
387
原创 从React源码分析看useEffect
useEffect和的区别？useEffect是怎么判断回调函数是否需要执行的？useEffect是同步还是异步？useEffect是通过什么实现异步的？useEffect为什么要要优先选用实现异步？
2023-02-06 10:00:35
391
原创 React源码分析5-commit
前两章讲到了，react 在 render 阶段的 执行完毕后，就执行 进入到了 commit 阶段，本章将讲解 commit 阶段执行过程源码。commit 阶段相比于 render 阶段要简单很多，因为大部分更新的前期操作都在 render 阶段做好了，commit 阶段主要做的是根据之前生成的 effectList，对相应的真实 dom 进行更新和渲染，这个阶段是不可中断的。commit 阶段大致可以分为以下几个过程：我们从 commit 阶段的入口函数 开始看：它调用了 函数，所要做的工作
2023-01-10 08:34:12
323
原创 React源码分析6-hooks源码
所以我们总结一下这个函数，它所做的事情如下：总结一下useState和useReducer的执行过程如下图：总结一下useEffect的大体流程如下：本章讲解了 react hooks 的源码，理解了 hooks 的设计思想和工作过程。其他 hook 平时用的比较少，就不在这里展开讲了，但通过上面几个 hook 的源码讲解，其他 hook 看源码你应该也能看得懂。
2023-01-10 08:33:34
360
原创 React源码分析7-state计算流程和优先级
看到上面的原理解析是不是很复杂，我们可以忽略所有的实现细节，回归现象本质，state计算就是遍历 update对象 链表根据 payload 得到新的state。在此前提下，因为优先级机制，打断之后会还原节点，从而会引起 update对象 丢失问题 和 state计算连续性问题。解决这两个问题才是我们上面说的复杂的实现细节。
2023-01-10 08:33:02
277
原创 React源码分析2-深入理解fiber
本章讲解了 fiber 出现的主要原因、fiber 节点中主要的属性以及 fiber 树是如何构建与更新的。
2023-01-09 08:23:57
1103
原创 React源码分析3-render阶段(穿插scheduler和reconciler)
当发生渲染或者更新操作时，react 去创建一系列的任务，任务带有优先级，然后构建 workInProgress fiber 树链表。遍历任务链表去执行任务。每一帧帧先执行浏览器的渲染等任务，如果当前帧还有空闲时间，则执行任务，直到当前帧的时间用完。如果当前帧已经没有空闲时间，就等到下一帧的空闲时间再去执行。如果当前帧没有空闲时间但是当前任务链表有任务到期了或者有立即执行任务，那么必须执行的时候就以丢失几帧的代价，执行这些任务。执行完的任务都会被从链表中删除。
2023-01-09 08:23:37
324
原创 React源码分析4-深度理解diff算法
react 的每次更新，都会将新的 ReactElement 内容与旧的 fiber 树作对比，比较出它们的差异后，构建新的 fiber 树，将差异点放入更新队列之中，从而对真实 dom 进行 render。简单来说就是如何通过最小代价将旧的 fiber 树转换为新的 fiber 树。经典的 diff 算法 中，将一棵树转为另一棵树的最低时间复杂度为 O(n^3)，其中 n 为树种节点的个数。
2023-01-09 08:23:08
323
原创 React源码分析(三)：useState，useReducer
总结下useState初始化和setStateuseState会在第一次执行函数组件时进行初始化，返回。当我们通过setState也就是进行调度更新时，会创建一个update加入到hook.queue中。当更新过程中再次执行函数组件，也会调用useState方法，此时的useState内部会使用更新时的hooks。通过获取到创建的update。在通过遍历update链表完成setState合并。返回update后的。
2023-01-06 07:34:49
356
原创 React源码分析(二)渲染机制
React的渲染流程是怎样的？React的beginWork都做了什么？React的completeWork都做了什么？React的commitWork都做了什么？useEffect和useLayoutEffect的区别是什么？useEffect和useLayoutEffect的销毁函数和更新回调的调用时机？
2023-01-06 07:33:17
262
原创 React源码分析1-jsx转换及React.createElement
本章讲述了 jsx 在 react17 之前和之后的不同的转换，实际上 react17 之后 babel 的对 jsx 的转换就是比之前多了一步的动作：另外讲述了和的内部实现是怎样的。通过 babel及，将 jsx 转换为了浏览器能够识别的原生 js 语法，为 react 后续对状态改变、事件响应以及页面更新等奠定了基础。后面的章节中，将探究 react 是如何一步步将状态等信息渲染为真实页面的。
2023-01-06 07:32:21
340
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人