2021年520前夕。近一年来主要都在做业务，不过对不断提升Coding质量与速度的追求和思考一直没停过。机缘巧合之下，有幸着重花时间完善了一套稳定、易用的状态管理方案。

由于最近业务较忙，2020年搞懂React原理系列文章最终篇直到现在才在业余时间抽空完成。之前在公司内部已有过一次PPT形式的分享，但经过一段时间对hooks的深度使用，对其又有了更深一些了解，故本次加上新内容并以文章形式再分享一次。

若要高效阅读和理解React源码，搭建调试环境是必不可少的一步。而常规方法：使用react.development.js和react-dom.development.js调试，虽然方便，但无法知道每段代码属于哪个细分文件，所以本文将介绍一种取巧的方法搭建便于调试React源码的环境，支持断点调试细分文件，并且此方法理论上可应用于所有Reat版本。

自上一篇写关于diff的文章到现在已经过了二十天多，利用业余时间和10天婚假的闲暇，终于搞懂了React源码中的调度原理。当费劲一番周折终于调试到将更新与调度任务连接在一起的核心逻辑那一刻，忧愁的嘴角终于露出欣慰的微笑。

时隔2年，重新看React源码，很多以前不理解的内容现在都懂了。本文将用实际案例结合相关React源码，集中讨论React Diff原理。使用当前最新React版本：16.13.1。

若读者对“强缓存”，“协商缓存”字眼非常熟悉，但又不知道他们具体是什么，亦或有读者还不了解HTTP缓存，那么本文将为读者一一讲解。 欢迎Star和订阅我的博客。 HTTP缓存流程 在介绍什么是强缓存、协商缓存前，让我们先了解HTTP缓存的流程，因为强缓存、协商缓存只是其中2步。 强缓存 “检查缓存是否过期”一步即强缓存。若...

继React,Vue，这是第三个着重阅读源码的前端项目-Webpack。本文主要以： WHY: 为何要看Webpack源码 HOW: 如何阅读Webpack源码 WHAT: 看完源码后学到了什么 三个方向展开。 欢迎Star和订阅我的博客。 WHY 诚然Webpack这是一个前端工程化工具，理解容易， 使用简单，似乎没有深入研究的必要。那为什么还要费心费力阅读其源...

不知不觉已是2019年的7月，恍惚之间已工作四年。懵懵懂懂的成长，间歇性努力，实话说，对现在自己取得的成果不大满意。不过，好在时不时顿悟，知道适时作出改变。

核心在于使用React的接口React.createPortal(element, domContainer)。该接口将element渲染后的DOM节点嵌入domContainer(通常是document.body)，并保证只嵌入一次。

节流(分流)，与防抖（去抖）实现原理相似。本文主要讨论节流，镜像文章：防抖 - 理解，实践与实现。分开讨论防抖和节流，主要是为了让一些还不太了解节流防抖的读者能够有针对性地，逐一掌握它们。 如何用代码实现节流也是一个要点。本文采用循序渐进地方式，先绘制一个案例的流程图，再根据流程图的逻辑编写节流功能代码。

文章包含多个可交互案例，可通过博客原文实时查看案例 在学习了常用的排序算法之后，打算用动画Demo来生动形象的展现它们。 这里包含6种排序算法，其中一半是简单算法，另一半是高级算法: 冒泡排序 选择排序 插入排序 ~ 归并排序 希尔排序 快速排序 冒泡排序 这可能是最简单的一种，但是速度非常慢。 假设我们按照棒球运...