深入 React 系列

阅读本文前建议先了解 React 渲染相关流程与基本原理，本文主要讲解 React Hooks 原理与源码实现

本文源码基于 React v17.0.2，阅读本文前需要先了解 React 渲染相关流程原理与重点概念

本文是关于 Reactv17 的源码解读，重点讲 React 在 render 阶段的 completeWork 流程

本文是关于 Reactv17 的源码解读，重点讲 React 在 render 阶段的 beginWork 流程

本文主要讲解 React 合成事件机制，从事件注册到事件执行的整个链路，让你更好的理解 React 事件原理

结合 React Context 的源码，解析实现原理，并解读关于 Context 的相关特性如何实现

在开发者角度，绝大部分写业务代码一般感知不到 React17 与 React18 的大变化，但也要详细了解清楚具体更新了什么。本文就来一次性梳理下 react17与react18的变化

本文作为自己深入学习 React Fiber (Reactv16.8.6)的理解，本篇仅介绍大致流程，Fiber 详细源码本文不作细节描述。 首先要知道的是，JavaScript 引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待。 在这样的机制下…

本篇写的 setState（涉及源码部分）是针对 React15 版本，即是没有 Fiber 介入的；为了方便看和写，所以选择旧版本，Fiber 写起来有点难，先留着将会写。setState 在 React 15 的原理能理解，16 版本的也是大同小异。 虽然已经用 React…

首先使用create-react-app新建个项目，然后在index.js写我们的代码，阅读本文前需要知道常用 React Hooks 的基本用法。 但到这里会有一个问题，就是当增加第二个 useState 的时候会发现改变两个 state 都是改同一个值，同步变化，于是，我们…

近期完成了公司新项目的开发，相关的技术栈都用到了最新版本，react router 也使用了 v6 的版本，所以借这个机会自己再梳理下 react router v5 与 v6 的区别

在写这篇文章的时候，React 已经出了 17.0.1 版本了，虽说还来讨论目前 React 新旧生命周期有点晚了，React 两个新生命周期虽然出了很久，但实际开发我却没有用过，因为 React 16 版本后我们直接 React Hook 起飞开发项目。 但对新旧生命周期的探…

在 React 中，我们都知道可以写 jsx 代码会被编译成真正的 DOM 插入到要显示的页面上。这具体是怎么实现的，今天我们就自己动手做一下。 返回的这个对象就是虚拟 DOM 了。 REACT_ELEMENT_TYPE 的值是一个 Symbol 类型，代表了一个独一无二的值。…