玉案轩窗的博客

随着组件化、响应式、虚拟DOM等技术思想引领着前端开发的潮流，相关的技术框架大行其道，就以目前主流的Vue、React框架来说，它们都基于组件化、响应式、虚拟DOM等技术思想的实现，但是具有不同开发使用方式以及实现原理，这里就不再赘述了相关内容，这里关注的焦点在于虚拟DOM。无论是Vue还是React都应用虚拟DOM，通过虚拟DOM从而来减少频繁的DOM操作，优化页面性能。

React有两种组件形式：class组件和函数组件，class组件代表面向对象的编程思想，函数组件代表着函数式编程的思想，React Hooks就是带有Hook的函数组件，Hook机制赋予函数组件具有状态变量以及生命周期的功能。使用React Hooks常见的问题就是闭包陷阱，从表现形式来看就是Hook内部使用的State数据不是最新状态而是旧的状态。本文旨在梳理清楚闭包陷阱产生的原因，React源码版本18.3.0.

React18版本的发布标志着并发模式的正式应用，实际上自React16引入Fiber架构后，之后的版本工作之一就是为了后续并发模式的引入做铺垫。串行：吃饭和看剧两件事存在先后顺序，即吃饭完后看剧并行：吃饭和看剧两件事同时执行，即吃饭的同时看剧并发：吃饭和看剧交替进行，即是一会吃饭一会看剧React并发模式实际上就是让渲染可以中断从而响应用户操作，之后再恢复执行之前的渲染逻辑，说起来简单但实际上很复杂需要考虑很多事情，例如任务拆分、执行时长把控、整体调度等等。

前言 将useMemo和useCallback放在一起来说，是因为这两个Hook都具有缓存效果，它们的返回值在依赖没有变化时总是返回旧值，通常作为优化手段来使用，特别是一些高性能的计算。useMemo类似于Vue中computed的作用，useEffect类似于Vue watch的作用，useMemo和useEffect的使用场景也可以类比。本文会梳理useMemo和useCallback的执行逻辑，加深对它们的认知和理解。

前言如果说useState可以类比class组件中的setState，那么useEffect就显得非常特殊。在class组件中存在这各种生命周期，例如render、componentDidMount（组件挂载后）、componentDidUpdate（更新后）、componentWillUnmount（卸载销毁前）等，使用React Hook就要忘掉这些生命周期，对于习惯了Vue/React等生命周期机制来说，React Hook无疑是颠覆性的方式，在实际使用React Hook的函数组件中，经常使用us

前言React Hook是16.8之后新增的新特性，在允许你在不编写class组件的情况下使用state和其他React特性，在16.8之前的版本中组件按照其定义方式可以分成class组件和函数组件，class组件可以使用内部状态state以及相关生命周期，函数组件数据来源只是外部prop。简单来说React Hook = 函数组件 + state/其他特性。关于为什么提供React Hook的相关介绍可以通过官网相关文章（Hook官网介绍）来了解，这里就不再赘述了。本文旨在了解React Hook相关

前言实际上在之前React v15相关原理的文章中就setState的几个特点有了较为清晰的梳理，虽然在React v16中引入了Fiber架构，但是setState整体的处理逻辑以及使用并没有什么区别，只是底层处理不同而已，为什么还有梳理v16 setState相关的逻辑呢？侧重点不同，本文不会主要去看setState的一些特点的形成原因（在前面的文章中就已经说明了再说就没有意义），主要想通过setState去看视图更新机制。setState以简单的实例来梳理整个源码运行流程，实例如下： c

React提供render API来实现将组件构成的视图渲染挂载到指定的DOM节点上，本文旨在梳理ReactDOM.render函数的执行逻辑，从而进一步理解React 16版本之后的Fiber以及相关处理过程（React版本是16.14.0）。

前言 React16之后引入了Fiber的架构，这个架构的处理过程是非常复杂的，在正式去学习了解Fiber的处理过程之前，打算去深入了解下v15版本时整个的处理过程，然后再结合Fiber要解决的问题从而更加深入的理解。本文要理解的相关原理有：

前言React特点的之一就是JSX，JSX是JavaScript的语法的扩展，使用JSX来开发UI内容。React开发不一定需要使用JSX，但是使用JSX会非常便捷。实际上JSX是React.createElement函数的语法糖，使用JSX需要使用Babel来将JSX转移成createElement函数调用。createElement具体执行逻辑JSX的具体使用可以查看React中文官网文档对其的介绍，这里就不赘述了。使用React JSX方式来创建的简单的实例如下：ReactDOM.rende

前言从本篇开始，会正式开始React源码的阅读。为什么要阅读React源码？实际上就是2点：更加了解React框架的使用和思想与Vue框架思想对比加深相关思考关于源码阅读关于源码阅读，会有人赞同也会有人反对，个人觉得这两种观点都有道理。我个人是倾向于阅读源码的，从事IT行业这几年，我的技能和意识方面的成长一部分就是来源于源码阅读的方式。个体是存在差异的，性格、思想意识、眼界等等方面都会决定你在所从事行业的成长高度。如何成长？答案是：努力，这是一个笼统的方向。具体到实际行动，可能不会存在标准的