前瞻

本文将介绍 useReducer 的核心机制，在阅读之前，推荐先大致了解 React Reconcile 机制，想要从本文获益的话，至少应当理解 React Fiber, Work Loop, 单向、循环链表数据结构的概念，关于 React 源码解析可参考我的另一篇文章：React v17 源码解析

由于 React Hook 的复杂度较高，读一遍文章就想建立起结构化记忆是很困难的，所以我推荐先了解以下核心机制，待熟悉后，再参考我给出的完整代码，把以下概念串联起来：

1. Mount 与 Update 的区别
2. ReactCurrentDispatcher 运行时注入

• 系统：MacOS 15.2 Sequoia
• 工具：FileZilla Server 19.4(Apple Silicon)

下载与安装

下载系统所适配的FileZilla Server

前言

本文写于 25 年 1 月，杭州云谷，这两天气候干冷转暖，宜学习，我已断更大半年，恰逢手头无事，就借这个机会写点学习笔记吧。我将尝试以 React 开发者视角，去学习 Vue，找出二者的共性，形成框架，同时将区别填充在框架中。

代码组织形式

在 React 中，其实有一个事实标准，一个组件会将代码组织在单个 .jsx 或 .tsx 文件中，Vue 在这一点上是相同的，Vue 的单文件组件（Single-File Component）会将代码组织在 .vue 文件中。

1
2
3
4
5
6
7
8
9
10
11

// Counter.tsx
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      You clicked me {count} times.
    </button>
  );
}

1
2
3
4
5
6
7
8
9

<!-- Counter.vue -->
<script setup>
  import { ref } from "vue";
  const count = ref(0);
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

React 是一个用于构建用户界面的 JavaScript 库，自发布以来经历了多个主要版本的更新，每个版本都引入了新的特性和改进。以下是各主要版本的一些关键特性：

React 0.3 - 0.14 (2013-2015)

• 初始版本: React 0.3 是最初的发布版本，重点在于引入组件化和虚拟 DOM 的概念。
• JSX: 支持 JSX 语法，使得编写组件更直观。
• 生命周期方法: 提供了一系列生命周期方法（如 componentDidMount 和 componentWillUnmount）来管理组件的状态和行为。

定义

覆盖式：新版本会覆盖上一个版本；
非覆盖式：每个版本共存；

优缺点

覆盖式：节省存储空间，但不容易做版本回退；
非覆盖式：占用大量存储空间，无缝切换版本；

适用场景

覆盖式：强调系统一致性，不接受特定版本的定制、维护；
非覆盖式：强调风险控制，或者有版本定制的需求；

实现方式

覆盖式发布比较常见，一般是新版本验收后，推送到远端仓库，通过CI/CD或手动部署的方式，先清理服务器静态文件托管目录，再将构建后的资源移动到该目录。

非覆盖式的重点是多版本共存，一般以版本号来区分，确定用户想访问的版本的常见实现如下：