前言 作为 React 的使用者，在尝试对现有代码进行优化的时候，我们可能会尝试使用 useMemo 以及 useCallback 来进行优化，对数据或者函数进行缓存，在下次组件更新时，如果对应的依赖

两个 effect hook 是 React 提供给用户处理副作用逻辑的一个窗口，比如改变 DOM、添加订阅、设置定时器、记录日志以及执行其他各种渲染过程中不允许出现的操作。 这样会每次组件更新后都会执行，有点类似于 componentDidUpdate，但请不要用 class…

Hook 使用规则 在官方文档Hook 概览 – React (docschina.org)中，对于 Hook 使用规则叙述如下： 可以看到，官方文档中明确说明了，不要在循环、条件判断或者子函数中调用

Reactv17、v18在v16的基础上做了哪些该改变？在v17中事件系统又是如何绑定，如何收集，如何触发的？...如果你对以上有疑问，那么这篇将会完全解决你的疑问

壹 ❀ 引 虚拟DOM（Virtual DOM）在前端领域也算是老生常谈的话题了，若你了解过vue或者react一定避不开这个话题，因此虚拟DOM也算是面试中常问的一个点，那么通过本文，你将了解到如下

虚拟 DOM 虚拟 DOM 节点是一个 JS 对象，用这个 JS 对象可以表示 DOM 节点、组件节点等。有了虚拟 DOM，能提高整体研发体验和效率，同时也能解决跨平台问题。

在线demo：React useState Demo 参考文章：React Hook useState复杂数据更新机制踩坑 - 简书 (jianshu.com) React组件的更新机制对state只

React的虚拟DOM和Diff算法是React的非常重要的核心特性，这部分源码也非常复杂，理解这部分知识的原理对更深入的掌握React是非常必要的。 本来想将虚拟DOM和Diff算法放到一篇文章，写完虚拟DOM发现文章已经很长了，所以本篇只分析虚拟DOM。 本篇文章从源码出发…

createElement方法也是vue和react用来创建虚拟DOM的方法，我们也叫这个名字，方便记忆。接收三个参数，分别是type，props和children 到目前为止，已经轻而易举的实现了创建虚拟DOM。那么，接下来进行下一步，将其渲染为真实的DOM，别犹豫，继续回到…