goClient1992

写在前面 网上有许多关于react源码解读的文章，其中有很多都只是单纯贴源码，罗列变量名。其实大家都知道这个英文怎么读，直译也大概知道意思，但是这个英文在react中起到什...

useState 解析 useState 使用 通常我们这样来使用 useState 方法, 这个代码有一个问题，在执行 useState 的时候每次都会 var _val...

前言 本次React源码参考版本为17.0.3。 React架构前世今生 查阅文档了解到， React@16.x是个分水岭。 React@15及之前 在16之前，React...

适合人群 本文适合0.5~3年的react开发人员的进阶。 讲讲废话： react的源码，的确是比vue的难度要深一些，本文也是针对初中级，本意让博友们了解整个react的...

转前端一年半了，平时接触最多的框架就是React。在熟悉了其用法之后，避免不了想深入了解其实现原理，网上相关源码分析的文章挺多的，但是总感觉不如自己阅读理解来得深刻。于是话...

热身准备 明确几个概念 在React@17.0.3版本中： 所有事件都是委托在id = root的DOM元素中（网上很多说是在document中，17版本不是了）； 在应用...

本文将讲解 hooks 的执行过程以及常用的 hooks 的源码。 hooks 相关数据结构 要理解 hooks 的执行过程，首先想要大家对 hooks 相关的数据结构有所...

热身准备 useCallback和useMemo是一样的东西，只是入参有所不同。 useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数； us...

React 的几种组件以及首次渲染实现 React 更新机制的实现以及 React diff 算法 React 的代码还是非常复杂的，虽然这里是一个简化版本。但是还是需要有...

为什么需要优先级 优先级机制最终目的是为了实现高优先级任务优先执行，低优先级任务延后执行。 实现这一目的的本质就是在低优先级任务执行时，有更高优先级任务进来的话，可以打断低...

这是我的剖析 React 源码的第二篇文章，如果你没有阅读过之前的文章，请务必先阅读一下 第一篇文章 中提到的一些注意事项，能帮助你更好地阅读源码。 文章相关资料 Reac...

热身准备 这里不再讲useLayoutEffect，它和useEffect的代码是一样的，区别主要是： 执行时机不同； useEffect是异步， useLayoutEff...

前两章讲到了，react 在 render 阶段的 completeUnitWork 执行完毕后，就执行 commitRoot 进入到了 commit 阶段，本章将讲解 c...

本文将讲解 hooks 的执行过程以及常用的 hooks 的源码。 hooks 相关数据结构 要理解 hooks 的执行过程，首先想要大家对 hooks 相关的数据结构有所...

setState执行之后会发生什么 setState 执行之后，会执行一个叫 enqueueSetState 的方法，这个主要作用是创建 Update 对象和发起调度，可以...

react16 版本之后引入了 fiber，整个架构层面的 调度、协调、diff 算法以及渲染等都与 fiber 密切相关。所以为了更好地讲解后面的内容，需要对 fiber...

本章将讲解 react 的核心阶段之一 —— render阶段，我们将探究以下部分内容的源码： 触发更新 触发更新的方式主要有以下几种：ReactDOM.render、se...

上一章中 react 的 render 阶段，其中 begin 时会调用 reconcileChildren 函数， reconcileChildren 中做的事情就是 r...

热身准备 在正式讲useState，我们先热热身，了解下必备知识。 为什么会有hooks 大家都知道hooks是在函数组件的产物。之前class组件为什么没有出现hooks...

准备工作 为了方便讲解，假设我们有下面这样一段代码： 在React项目中，这种jsx语法首先会被编译成: 这里不详说编译方法，感兴趣的可以参考： babel在线编译 新的j...