引言

OpenAI发布了ChatGPT，就像是给平静许久的互联网湖面上扔了一颗重磅炸弹，刹那间所有人都在追捧学习它。究其原因，它其实是一款真正意义上的人工智能对话机器人。它使用了深度学习技术，通过大量的训练数据和自监督学习方法进行训练，以模拟人类的对话能力和生成自然语言回应。日常生产、学习中利用好ChatGPT这个工具，是绝对能够提升我们工作效率的，这一点对于我们程序员来说，感受应该尤为明显。我们最常用的开发工具VSCode，已经有许多的插件集成了ChatGPT功能，这篇文章将从零开始，介绍这些插件的实现原理与思路，希望对你有所帮助。

基本需求

实现一款可以跟ChatGPT对话的插件，可以通过一问一答的形式来进行对话，并且可以将我们选中的代码发送给ChatGPT，让其可以对代码进行优化。当然如果要访问ChatGPT，首先需要绑定我们在OpenAI后台申请的ApiKey.

VSCode 插件基本配置

首先简单介绍一下VSCode插件开发的基本流程

1. 安装脚手架

1

npm install -g yo generator-code

然后cd到你的工作目录，运行yo code,根据向导一步步选择即可，没啥好说的，运行完后就生成了一个干净的可以运行的插件工程了。
2. 工程目录介绍

查看当前目录，工程的核心是package.json与extension.js.首先看下package.json的配置文件：

• name:工程名称

• displayName: 应用市场名称

• description: 应用描述

• version: 当前插件版本

• engines: 表示插件最低支持的vscode版本

• categories: 插件应用市场分类

• main: 程序的主入口文件

• activationEvents:重要，扩展的激活事件数组，表示可以被哪些事件激活当前插件。比如：

1
2
3
4
5
6
7
8
9

"activationEvents": [
    "onView:chatgpt-for-vscode.view",
    "onCommand:chatgpt-for-vscode.setAPIKey",
    "onCommand:chatgpt-for-vscode.askGPT",
    "onCommand:chatgpt-for-vscode.whyBroken",
    "onCommand:chatgpt-for-vscode.optimizeCode",
    "onCommand:chatgpt-for-vscode.explainCode",
    "onCommand:chatgpt-for-vscode.refactor"
  ],

onView:表示 通过视图触发,chatgpt-for-vscode.view是视图Id。当触发这个视图时，唤起当前插件
onCommand: 表示通过命令触发，后面是命令Id,这些都是我们自定义的命令。在VSCode中按下快捷键：Command + Shift + P 输入命令title后唤起插件，命令title在contributes,commands模块里面定义，后面介绍。
除了这两个还有：onLanguage、onUri、onDebug、workspaceContains、onFileSystem等，如果设置为*，只要一启动VSCode，插件就会被激活，当然为了用户体验，官方不推荐这么做。

• contributes: 重要，配置插件的主要功能点。比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

"contributes": {
    "commands": [
      {
        "command": "chatgpt-for-vscode.setAPIKey",
        "title": "GPT:绑定APIKey"
      },
      {
        "command": "chatgpt-for-vscode.askGPT",
        "title": "GPT:询问 GPT"
      },
      {
        "command": "chatgpt-for-vscode.whyBroken",
        "title": "GPT:说明这段代码存在的问题"
      },
      {
        "command": "chatgpt-for-vscode.optimizeCode",
        "title": "GPT:优化这段代码"
      },
      {
        "command": "chatgpt-for-vscode.explainCode",
        "title": "GPT:解释这段代码"
      },
      {
        "command": "chatgpt-for-vscode.refactor",
        "title": "GPT:重构这段代码"
      }
    ],
    "menus": {
      "editor/context": [
        {
          "command": "chatgpt-for-vscode.askGPT",
          "group": "navigation@1"
        },
        {
          "command": "chatgpt-for-vscode.whyBroken",
          "group": "navigation@2"
        },
        {
          "command": "chatgpt-for-vscode.optimizeCode",
          "group": "navigation@3"
        },
        {
          "command": "chatgpt-for-vscode.explainCode",
          "group": "navigation@4"
        },
        {
          "command": "chatgpt-for-vscode.refactor",
          "group": "navigation@5"
        },
        {
          "command": "chatgpt-for-vscode.setAPIKey",
          "group": "navigation@6"
        }
      ]
    },
    "viewsContainers": {
      "activitybar": [
        {
          "id": "chatgpt-for-vscode",
          "title": "ChatGPT",
          "icon": "images/ChatGPT.png"
        }
      ]
    },
    "views": {
      "chatgpt-for-vscode": [
        {
          "type": "webview",
          "id": "chatgpt-for-vscode.view",
          "name": "ChatGPT"
        }
      ]
    }
  },

• commands: command: 命令Id，这个命令Id跟activationEvents中配置的命令Id相同。title:输入的命令的名称。Command + Shift + P 输入这个命令title后找到对应的命令。
  

• menus: editor/context:配置编辑器右键展示内容。command是命令Id，group:右键后展示看板的命令位置。这里navigation表示展示在模块的顶部。@*表示排序。
  

• viewsContainers: activitybar:配置右侧工具栏视图入口，配置后展示,注意这里的id,要跟后面的
  views模块里面的视图key值保持一致,表示点击右侧icon后展示那个视图,icon是你本地的图片路径。
  

• views: 配置视图，这里使用webview展示自定义视图

3. 配置完成package.json后右键命令展示，左侧状态栏Icon，顶部命令行选择输入命令，已经可以展示了。运行npm run test 后会打开默认安装你插件的VSCode面板,接下来就是完善触发命令后的代码逻辑了，核心在extension.ts中实现。

extension.ts模块开发

extension.ts 是程序的入口文件，里面有两个核心方法：

1
2

export function activate(context: vscode.ExtensionContext) {}
export function deactivate() {}

看字面意思很好理解，分别表示插件被激活与释放调用的生命周期方法.

1. 绑定APIKey命令逻辑

要想使用OpenAI的api，首先需要将自己的ApiKey与插件进行关联。这里使用VSCode自有APIvscode.window.showInputBox来获取用户输入.

1
2
3
4
5
6
7
8
9

this.apiKey = await this.context.globalState.get('chatgpt-api-key');
if (!this.apiKey) {
   const apiKeyInput = await vscode.window.showInputBox({
       prompt: "请输入你的API Key",
       ignoreFocusOut: true,
   });
   this.apiKey = apiKeyInput;
   this.context.globalState.update('chatgpt-api-key', this.apiKey);
}

• 使用上下文的globalState来持久化保存ApiKey
• 如果要让这个命令生效，需要在activate中进行注册

  1 2 3 4 5 6 7 8

  context.subscriptions.push(vscode.commands.registerCommand('chatgpt-for-vscode.setAPIKey', resetToken)) async function resetToken() { await vscode.window.showInputBox({ prompt: "请输入OpenAI API Key", ignoreFocusOut: true, }); }

  执行command + shift + p 输入命令titleGPT:绑定APIKey后，展示效果如下：
  这样就完成了对用户ApiKey的绑定逻辑.

2. 命令触发逻辑

与绑定用户ApiKey类似，其他命令的执行也是同样的流程，这里以onCommand:chatgpt-for-vscode.askGPT命令来说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 注册命令
vscode.commands.registerCommand('chatgpt-for-vscode.askGPT', askChatGPT)
// 命令实现
async function askChatGPT(userInput: string) {
  let editor = vscode.window.activeTextEditor;
  if (editor) {
      const selectedCode = editor.document.getText(vscode.window.activeTextEditor?.selection);
      if(selectedCode.length) {
        chatViewProvider.sendOpenAiApiRequest(userInput, selectedCode);
        vscode.window.showInformationMessage(selectedCode);
      }else {
        vscode.window.showInformationMessage(`请选中一段代码`);
      }
  }
}

• 注册命令后 使用editor.document.getText(vscode.window.activeTextEditor?.selection)来获取选中的代码段落，并判空.
• 利用chatViewProvider.sendOpenAiApiRequest(userInput, selectedCode);利用这个方法用户输入的Prompt
  与选中的代码端传递出去，这个方法的实现后面介绍，注册所有的命令后，activate方法是这样的

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

  export function activate(context: vscode.ExtensionContext) { const chatViewProvider = new view_provider.default(context); context.subscriptions.push( vscode.commands.registerCommand('chatgpt-for-vscode.askGPT', askChatGPT), vscode.commands.registerCommand('chatgpt-for-vscode.whyBroken', askGPTWhyBroken), vscode.commands.registerCommand('chatgpt-for-vscode.explainCode', askGPTToExplain), vscode.commands.registerCommand('chatgpt-for-vscode.refactor', askGPTToRefactor), vscode.commands.registerCommand('chatgpt-for-vscode.optimizeCode', askGPTToOptimize), vscode.commands.registerCommand('chatgpt-for-vscode.setAPIKey', resetToken), vscode.window.registerWebviewViewProvider("chatgpt-for-vscode.view", chatViewProvider, { webviewOptions: { retainContextWhenHidden: true }}) ); async function askGPTWhyBroken() { await askChatGPT('说明下面的代码会出现什么问题?'); } async function askGPTToExplain() { await askChatGPT('请帮我解释一下下面的代码?'); } async function askGPTToRefactor() { await askChatGPT('帮我重构下面的代码'); } async function askGPTToOptimize() { await askChatGPT('帮我优化下面的代码'); } async function resetToken() { await chatViewProvider.ensureApiKey(); } async function askChatGPT(userInput: string) { let editor = vscode.window.activeTextEditor; if (editor) { const selectedCode = editor.document.getText(vscode.window.activeTextEditor?.selection); if(selectedCode.length) { chatViewProvider.sendOpenAiApiRequest(userInput, selectedCode); vscode.window.showInformationMessage(selectedCode); }else { vscode.window.showInformationMessage(`请选中一段代码`); } } } }

3.webView与chatViewProvider

上面的代码除了注册命令的APIregisterCommand,还有一个注册自定义webview视图的API，registerWebviewViewProvider,作用是展示我们自定义的webview,它有三个参数：

• chatgpt-for-vscode.view是视图Id，跟package.json中views模块对应的Id相同，表示为那个视图Id注册provider.
• chatViewProvider 视图提供者.
• 第三个参数：webview的属性配置，retainContextWhenHidden: true表示：webview被隐藏时保持状态，避免被重置.
  接下来重点来看chatViewProvider:
  作为自定义视图的provider首先需要继承vscode.WebviewViewProvider这个接口

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  export interface WebviewViewProvider { /** * Revolves a webview view. * * `resolveWebviewView` is called when a view first becomes visible. This may happen when the view is * first loaded or when the user hides and then shows a view again. * * @param webviewView Webview view to restore. The provider should take ownership of this view. The * provider must set the webview's `.html` and hook up all webview events it is interested in. * @param context Additional metadata about the view being resolved. * @param token Cancellation token indicating that the view being provided is no longer needed. * * @return Optional thenable indicating that the view has been fully resolved. */ resolveWebviewView(webviewView: WebviewView, context: WebviewViewResolveContext, token: CancellationToken): Thenable<void> | void; }

  这个接口只有一个方法，resolveWebviewView在视图首次可见时被调用。这可能发生在视图第一次加载时，或者当用户隐藏然后再次显示视图时。在这个方面里面设置webview的html与视图属性。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

  export default class ChatGptViewProvider implements vscode.WebviewViewProvider { private webView?: vscode.WebviewView; private apiKey?: string; private message?: any; constructor(private context: vscode.ExtensionContext) { } public resolveWebviewView( webviewView: vscode.WebviewView, _context: vscode.WebviewViewResolveContext, _token: vscode.CancellationToken, ) { this.webView = webviewView; // webview属性设置 webviewView.webview.options = { enableScripts: true, localResourceRoots: [this.context.extensionUri] }; // 返回Html代码 webviewView.webview.html = this.getHtml(webviewView.webview); // 接收 webviewView.webview.onDidReceiveMessage(data => { if (data.type === 'askChatGPT') { this.sendOpenAiApiRequest(data.value); } }); if (this.message !== null) { this.sendMessageToWebView(this.message); this.message = null; } } }

4. 通信机制

自定义的webview和普通网页非常类似，都不能直接调用任何VSCodeAPI，但是，它唯一特别之处就在于多了一个名叫acquireVsCodeApi的方法，执行这个方法会返回一个超级阉割版的vscode对象.利用这个对象，可以实现webview与插件也就是provider的通信。

• provider给webview发送消息：

  1	this.webView?.webview.postMessage(message);

• webview端接收消息：

  1 2 3 4

  window.addEventListener('message', event => { const message = event.data; console.log('Webview接收到的消息：', message); }

• webview主动发送消息给provider：

  1 2	const vscode = acquireVsCodeApi(); vscode.postMessage({text: '你好，我是Webview啊！'});

• provider接收消息：

  1 2 3 4 5

  this.webView?.webview.onDidReceiveMessage(data => { if (data.type === 'askChatGPT') { this.sendOpenAiApiRequest(data.value); } });

  了解完双方的通信机制后，基本逻辑是：当点击webview上的发送按钮后，将用户输入发送给ChatGPT，ChatGPT处理完成后将返回信息发送给webview，webview将回答信息展示出来，完成一次对话逻辑。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  // 按钮绑定点击事件 document.getElementById("ask-button")?.addEventListener("click", submitHandler); let submitHandler = function (e) { e.preventDefault(); e.stopPropagation(); const input = document.getElementById("question-input"); if (input.value?.length > 0) { // 发送消息给 插件，使其完成ChatGPT请求 vscode.postMessage({ type: "askChatGPT", value: input.value, }); input.value = ""; } };

5. 调用OPenAI接口

要想完成一次对话，需要调用OPenAI的API.具体的API你可以在官网找到：

• 参数model是你要对话的ChatGPT模型代码，不同模型针对同一个问题的答案会有所区别。具体模块区别可以参考下面图片：
  
  更多模型可以点击这里去查看

• 参数messages: 你的问题信息

• 参数temperature: 它是一个用于控制生成文本的创造性的参数，其值介于0到2之间。值为1意味着模型将使用其默认采样策略，而值低于1.0将导致更保守和可预测的响应，值大于1.0将导致更有创造性和多样化的响应。

• 参数max_tokens: 生成对话的最大token数量。这里的token可以理解为模型的构建块。了解完成上面的参数，可以利用fetch发起请求了：

  1 2 3 4 5 6 7 8 9 10 11 12 13

  let completion = await fetch('https://api.openai.com/v1/chat/completions', { method: 'POST', body: JSON.stringify({ model: "text-davinci-003", messages: [{ role: "user", content: question }], temperature: 0.7 }), headers: { // eslint-disable-next-line @typescript-eslint/naming-convention "Content-Type": 'application/json', Authorization: 'Bearer ' + this.apiKey, }, }) as any;

  根据返回的数据结构，解析响应数据，并将结果发送给webview进行展示，完成开发。
  

发布插件

• 扩展安装
  通过以上步骤基本完成了插件的开发，接下来有两种方式发布我们的插件，如果你的插件只是在内网使用，可以通过命令：vsce package, 将插件打包为vsix插件包，通过VSCode的扩展，从VSIX安装.
  当然首先要安装vsce这个工具

  1	npm i vsce -g

  

• 上传到应用VSCode插件市场

  插件上传到VSCode应用市场，需要有应用市场的publisher账号,具体的账号创建流程这里不再涉及，创建账号后，登录当前账号，执行vsce publish,发布成功后大概需要过几分钟才能在应用市场搜到.发布账号有几个注意事项：

• README.md文件默认会显示在插件主页；

• README.md中的资源必须全部是HTTPS的，如果是HTTP会发布失败；

• CHANGELOG.md会显示在变更选项卡；

• 如果代码是放在git仓库并且设置了repository字段，发布前必须先提交git，否则会提示Git working directory not clean

• 发布后需要等待几分钟应用市场才会更新；

• 当然你可以在插件市场里面搜索chatgpt-for-vscode 来试用这个插件;

  

总结

以上就是一个ChatGPT插件的基本创建流程，核心是对VSCode API以及ChatGPT API的了解与使用。当然你所需要的功能都可以在对应的官方文档中找到。

参考文献：

https://code.visualstudio.com/api/extension-guides/overview
https://platform.openai.com/docs/api-reference/chat/create
http://blog.haoji.me/vscode-plugin-publish.html

一. 了解几个概念

什么是响应式

在开始响应式原理与源码解析之前，需要先了解一下什么是响应式？首先明确一个概念：响应式是一个过程，它有两个参与方：

• 触发方：数据
• 响应方：引用数据的函数

当数据发生改变时，引用数据的函数会自动重新执行，例如，视图渲染中使用了数据，数据改变后，视图也会自动更新，这就完成了一个响应的过程。

副作用函数

在Vue与React中都有副作用函数的概念，什么是副作用函数？如果一个函数引用了外部的数据，这个函数会受到外部数据改变的影响，我们就说这个函数存在副作用，也就是我们所说的副作用函数。初听这个名字不太好理解，其实 副作用函数就是引用了数据的函数或是与数据相关联的函数。举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
    <div id="app"></div>
    <script>
        const obj = {
            name: 'John',
        }
        // 副作用函数 effect
        function effect() {
            app.innerHTML = obj.name
            console.log('effect', obj.name)
        }

        effect()

        setTimeout(() => {
            obj.name = 'ming'
            // 手动执行 effect 函数
            effect()
        }, 1000);
    </script>
</body>
</html>

在上面例子中，effect函数里面引用了外部的数据obj.name,如果这个数据发生了改变，则会影响到这个函数，类似effect的这种函数就是副作用函数。

实现响应式的基本步骤

在上面的例子中,当obj.name发生了改变，effect是我们手动执行的，如果能监听到obj.name的变化，让其自动执行副作用函数effect，那么就实现了响应式的过程。其实无论是 Vue2 还是 Vue3 ，响应式的核心都是 数据劫持/代理、依赖收集、依赖更新，只不过由于实现数据劫持方式的差异从而导致具体实现的差异。

• Vue2响应式：基于Object.defineProperty()实现的数据的劫持

• Vue3响应式：基于Proxy实现对整个对象的代理

关于Vue2的响应式这里不做重点讲解，这篇文章主要关注Vue3响应式原理的实现。

二. Proxy 与 Reflect

在解析Vue3的响应式原理之前，首先需要了解两个ES6新增的API:Porxy与Reflect。

Proxy

Proxy: 代理，顾名思义主要用于为对象创建一个代理，从而实现对对象基本操作的拦截和自定义。可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。基本语法：

1

let proxy = new Proxy(target, handler);

• target: 需要拦截的目标对象

• handler: 也是一个对象，用来定制拦截行为
  举个例子：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  const obj = { name: 'John', age: 16 } const objProxy = new Proxy(obj,{}) objProxy.age = 20 console.log('obj.age',obj.age); console.log('objProxy.age',objProxy.age); console.log('obj与objProxy是否相等',obj === objProxy); // 输出 [Log] obj.age – 20 [Log] objProxy.age – 20 [Log] obj与objProxy是否相等 – false

  这里objProxy的handler为空，则直接指向被代理对象,并且代理对象与数据源对象并不全等.如果需要更加灵活的拦截对象的操作，就需要在handler中添加对应的属性。例如：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

  const obj = { name: 'John', age: 16 } const handler = { get(target, key, receiver) { console.log(`获取对象属性${key}值`) return target[key] }, set(target, key, value, receiver) { console.log(`设置对象属性${key}值`) target[key] = value }, deleteProperty(target, key) { console.log(`删除对象属性${key}值`) return delete target[key] }, } const proxy = new Proxy(obj, handler) console.log(proxy.age) proxy.age = 20 console.log(delete proxy.age) // 输出 [Log] 获取对象属性age值 (example01.html, line 22) [Log] 16 (example01.html, line 36) [Log] 设置对象属性age值 (example01.html, line 26) [Log] 删除对象属性age值 (example01.html, line 30) [Log] true (example01.html, line 38)

  上面的例子，我们在捕获器中定义了set()、get()、deleteProperty()属性，通过对proxy的操作实现了对obj的操作拦截。这些属性的触发方法有如下参数：

• target —— 是目标对象，该对象被作为第一个参数传递给new Proxy

• key —— 目标属性名称

• value —— 目标属性的值

• receiver —— 指向的是当前操作 正确的上下文。如果目标属性是一个 getter 访问器属性，则 receiver 就是本次读取属性所指向的 this 对象。通常，receiver这就是 proxy 对象本身,但是如果我们从 proxy 继承，则receiver指的是从该 proxy 继承的对象

• 当然除了以上三个还有一些常用的属性操作方法：

  • has()，拦截：in操作符.
  • ownKeys(),拦截：

Object.getOwnPropertyNames(proxy) Object.getOwnPropertySymbols(proxy) Object.keys(proxy)

• construct(),拦截：new 操作等

Reflect

Reflect: 反射，就是将代理的内容反射出去。Reflect与Proxy一样，也是 ES6 为了操作对象而提供的新 API。它提供拦截JavaScript操作的方法，这些方法与Proxy handlers 提供的的方法是一一对应的，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。且 Reflect 不是一个函数对象，即不能进行实例化，其所有属性和方法都是静态的。还是上面的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const obj = {
    name: 'John',
    age: 16
}

const handler = {
    get(target, key, receiver) {
        console.log(`获取对象属性${key}值`)
        return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
        console.log(`设置对象属性${key}值`)
        return Reflect.set(target, key, value, receiver)
    },
    deleteProperty(target, key) {
        console.log(`删除对象属性${key}值`)
        return Reflect.deleteProperty(target, key)
    },
}

const proxy = new Proxy(obj, handler)
console.log(proxy.age)
proxy.age = 20
console.log(delete proxy.age)

上面的例子中

• Reflect.get()代替target[key]操作
• Reflect.set()代替target[key] = value操作
• Reflect.deleteProperty()代替delete target[key]操作
  当然除了上面的方法还有一些常用的Reflect方法：

  1 2 3 4 5

  Reflect.construct(target, args) Reflect.has(target, name) Reflect.ownKeys(target) Reflect.getPrototypeOf(target) Reflect.setPrototypeOf(target, prototype)

三. reactive、ref源码解析

了解了Proxy与Reflect，看下Vue3是如何通过porxy实现响应式的。其核心是下面要介绍的两个方法：reactive、ref.这里依照Vue3.2版本的源码进行解析。

reactive的源码实现

打开源文件，找到文件packages/reactivity/src/reactive.ts 查看源码。

1
2
3
4
5
6
7
8
9
10
11
12
13

export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

• 刚开始对target进行响应式只读判断，如果为true，则直接返回target，reactive实现的核心方法是createReactiveObject()：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

  function createReactiveObject( target: Target, isReadonly: boolean, baseHandlers: ProxyHandler<any>, collectionHandlers: ProxyHandler<any>, proxyMap: WeakMap<Target, any> ) { if (!isObject(target)) { if (__DEV__) { console.warn(`value cannot be made reactive: ${String(target)}`) } return target } // target is already a Proxy, return it. // exception: calling readonly() on a reactive object if ( target[ReactiveFlags.RAW] && !(isReadonly && target[ReactiveFlags.IS_REACTIVE]) ) { return target } // target already has corresponding Proxy const existingProxy = proxyMap.get(target) if (existingProxy) { return existingProxy } // only a whitelist of value types can be observed. const targetType = getTargetType(target) if (targetType === TargetType.INVALID) { return target } const proxy = new Proxy( target, targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers ) proxyMap.set(target, proxy) return proxy }

• createReactiveObject()方法有五个参数：
  • target： 传入的原始目标对象
  • isReadonly: 是否是只读的标识
  • baseHandlers: 为普通对象创建proxy时的第二个参数handler
  • collectionHandlers: 为collection类型对象创建proxy时的第二个参数handler
  • proxyMap: WeakMap类型的map，主要用于存储 target与他的proxy之间的对应关系

    1 2 3 4 5 6 7 8 9 10 11 12 13 14

    function targetTypeMap(rawType: string) { switch (rawType) { case 'Object': case 'Array': return TargetType.COMMON case 'Map': case 'Set': case 'WeakMap': case 'WeakSet': return TargetType.COLLECTION default: return TargetType.INVALID } }

• 源码可以看到，他将对象分为COMMON对象（Object和Array）与COLLECTION类型对象(Map、Set、WeakMap、WeakSet),这样区分的主要目的是为了根据不通的对象类型，来定制不同的handler
• 在createReactiveObject()的前几行，进行了一系列的判断：
  • 首先判断target是否是对象，如果为false,直接return
  • 判断target是否是响应式对象，如果为true,直接return
  • 判断是否已经为target创建过proxy了，如果为true,直接return
  • 判断target是否是刚才上面提到的6种对象类型，如果为false,直接return
  • 如果以上条件都满足，则为target创建proxy,并return这个proxy

接下来就是根据不同的对象类型，传入不同的handler的逻辑处理了，主要关注baseHandlers，里面存在五个属性操作方法，这重点解析get与set方法。

源码位置：packages/reactivity/src/baseHandlers.ts

1
2
3
4
5
6
7

export const mutableHandlers: ProxyHandler<object> = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys
}

get与依赖收集

• 可以看到mutableHandlers里面就是我们熟悉的各种钩子函数。当我们对proxy对象进行访问或是修改时，调用相应的函数进行处理。首先看get里面是如何对访问target的副作用函数进行收集的：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

  function createGetter(isReadonly = false, shallow = false) { return function get(target: Target, key: string | symbol, receiver: object) { if (key === ReactiveFlags.IS_REACTIVE) { return !isReadonly } else if (key === ReactiveFlags.IS_READONLY) { return isReadonly } else if ( key === ReactiveFlags.RAW && receiver === (isReadonly ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap ).get(target) ) { return target } const targetIsArray = isArray(target) if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) { return Reflect.get(arrayInstrumentations, key, receiver) } const res = Reflect.get(target, key, receiver) if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) { return res } if (!isReadonly) { track(target, TrackOpTypes.GET, key) } if (shallow) { return res } if (isRef(res)) { // ref unwrapping - does not apply for Array + integer key. const shouldUnwrap = !targetIsArray || !isIntegerKey(key) return shouldUnwrap ? res.value : res } if (isObject(res)) { // Convert returned value into a proxy as well. we do the isObject check // here to avoid invalid value warning. Also need to lazy access readonly // and reactive here to avoid circular dependency. return isReadonly ? readonly(res) : reactive(res) } return res } }

• 如果key值为__v_isReactive、__v_isReadonly进行相应的返回，如果key==='__v_raw'并且WeakMap中key为target的值不为空，则返回target

• 如果target是数组，则 重写/增强 数组对应的方法

  • 数组元素的查找方法：includes、indexOf、lastIndexOf
  • 修改原数组 的方法：push、pop、unshift、shift、splice

  在这些方法里面调用track()进行依赖收集

• 对Reflect.get()方法的返回值，也就是当前数据对象的属性值res进行判断，如果res是普通对象且非只读，则调用track()进行依赖收集

• 如果res是浅层响应，直接返回，如果res是ref对象，则返回其value值

• 如果res是 对象类型并且是只读的，则调用readonly(res),否则递归调用reactive(res)方法

• 如果以上都不满足，直接向外返回对应的 属性值

那么核心方法就是如果利用**track()**进行依赖收集的处理了,源码在``packages/reactivity/src/effect.ts`

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

export function track(target: object, type: TrackOpTypes, key: unknown) {
  if (!isTracking()) {
    return
  }
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = createDep()))
  }

  const eventInfo = __DEV__
    ? { effect: activeEffect, target, type, key }
    : undefined

  trackEffects(dep, eventInfo)
}

• 首先进行是否正在进行依赖收集的判断处理

• const targetMap = new WeakMap<any, KeyToDepMap>()创建一个targetMap容器，用于保存和当前响应式对象相关的依赖内容，本身是一个 WeakMap类型

• 将对应的 响应式对象 作为 targetMap 的 键，targetMap的Value是一个depsMap（属于 Map 实例）， depsMap 存储的就是和当前响应式对象的每一个 key 对应的具体依赖

• depsMap的键是响应式数据对象的key，Value是一个deps（属于 Set 实例），这里之所以使用Set是为了避免副作用函数的重复添加，避免重复调用

以上就是整个**get()**捕获器以及依赖收集的核心流程。

set与依赖更新

我们在回到baseHandlers中看Set捕获器中是如何进行依赖更新的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

function createSetter(shallow = false) {
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    let oldValue = (target as any)[key]
    if (!shallow) {
      value = toRaw(value)
      oldValue = toRaw(oldValue)
      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
        oldValue.value = value
        return true
      }
    } else {
      // in shallow mode, objects are set as-is regardless of reactive or not
    }

    const hadKey =
      isArray(target) && isIntegerKey(key)
        ? Number(key) < target.length
        : hasOwn(target, key)
    const result = Reflect.set(target, key, value, receiver)
    // don't trigger if target is something up in the prototype chain of original
    if (target === toRaw(receiver)) {
      if (!hadKey) {
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

• 首先进行旧值的保存oldValue
• 如果不是浅层响应，target是普通对象，并且旧值是个响应式对象，则执行赋值操作：oldValue.value = value ,返回true，表示赋值成功
• 判断是否存在对应key值hadKey
• 执行Reflect.set设置对应的属性值
• 判断对象是原始原型链上的内容（非自定义添加），则不触发依赖更新
• 根据目标对象不存在对应的 key, 调用trigger,进行依赖更新

以上就是整个baseHandlers关于依赖收集与依赖更新的核心流程。

ref的源码实现

我们知道ref可以定义基本数据类型、引用数据类型的响应式。来看下它的源码实现：packages/reactivity/src/ref.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

export function ref(value?: unknown) {
  return createRef(value)
}

function createRef(rawValue: unknown, shallow = false) {
  if (isRef(rawValue)) {
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}

class RefImpl<T> {
  private _value: T
  private _rawValue: T

  public dep?: Dep = undefined
  public readonly __v_isRef = true

  constructor(value: T, public readonly _shallow = false) {
    this._rawValue = _shallow ? value : toRaw(value)
    this._value = _shallow ? value : convert(value)
  }

  get value() {
    trackRefValue(this)
    return this._value
  }

  set value(newVal) {
    newVal = this._shallow ? newVal : toRaw(newVal)
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal
      this._value = this._shallow ? newVal : convert(newVal)
      triggerRefValue(this, newVal)
    }
  }
}

• 从上面的函数调用流程可以看出，实现ref的核心就是实例化了一个RefImpl对象。为什么这里要实例化一个RefImpl对象呢，其目的在于 Proxy 代理的目标也是对象类型，无法通过为基本数据类型创建proxy的方式来进行数据代理。只能把基本数据类型包装为一个对象，通过自定义的 get、set 方法进行 依赖收集 和 依赖更新
• 来看RefImpl对象属性的含义：
  • _ value：用于保存ref当前值，如果传递的参数是对象，它就是用于保存经过reactive函数转化后的值，否则_value与_rawValue相同
  • _ rawValue：用于保存当前ref值对应的原始值，如果传递的参数是对象，它就是用于保存转化前的原始值，否则_value与_rawValue相同。这里toRaw()函数的作用就是将的响应式对象转为普通对象
  • dep：是一个Set类型的数据，用来存储当前的ref值收集的依赖。至于这里为什么用Set上面我们有阐述，这里也是同样的道理
  • _v_isRef ：标记位，只要被ref定义了，都会标识当前数据为一个Ref，也就是它的值标记为true
  • 另外可以很清楚的看到RefImpl类暴露给实例对象的get、set方法是value，所以对于ref定义的响应式数据的操作我们都要带上**.value**
• 如果传入的值是对象类型，会调用convert()方法，这个方法里面会调用reactive()方法对其进行响应式处理
• RefImpl实例关键就在于trackRefValue(this)和triggerRefValue(this, newVal)的两个函数的处理，我们大概也知道它们就是依赖收集、依赖更新,原理基本与reactive处理方式类似，这里就不在阐述了

五. 总结

• 对于基础数据类型只能通过ref来实现其响应式，核心还是将其包装成一个RefImpl对象，并在内部通过自定义的 get value() 与 set value(newVal)实现依赖收集与依赖更新。
• 对于对象类型，ref与reactive都可以将其转化为响应式数据，但其在ref内部，最终还是会调用reactive函数实现转化。reactive函数，主要通过创建了Proxy实例对象，通过Reflect实现数据的获取与修改。

一些参考：

https://github.com/vuejs/vue

https://zh.javascript.info/proxy#reflect

一. 概述

我们知道React支持两种形式来创建组件，一种是 class 组件，一种是函数组件。在 React16.8 推出之前，如果要为组件添加状态，那么只能使用 class 组件来实现，并通过 setState 来修改状态值，达到更新组件的目的。在 React16.8 推出 Hook 后，可以利用 useState 来为函数组件添加状态，这让我们的状态管理更加容易。

前端开发的核心在于状态管理，在实际项目开发中，特别是对新手React开发人员而言，对setState和useState Hook 的使用上仍有一些容易犯的错误和注意事项，在本文中，我们将探讨如何避免这些问题。

二. Class 组件中的 setState 的使用

在 class 组件中添加一个构造函数constructor，然后在该函数中为 this.state赋初值添加状态.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

class ClassComponent extends Component {
    
    constructor(props) {
        super(props)
        this.state = {
            count: 0,
            otherCount: 100
        }
        this.addCount = this.addCount.bind(this);
    }

    addCount(params) {
       this.setState({count:this.state.count + 1})
    }

    render() {
        return (
            <div>
                class组件
                <div>
                    count: {this.state.count}<br></br>
                    otherCount: {this.state.otherCount}
                </div>
                <div>
                    <button onClick={this.addCount}>+1</button>
                </div>
            </div>
        );
    }
}

export default ClassComponent;

​

通过this.setState({count:this.state.count + 1})改变 state 里面 count 的值。这样操作是可以达到预期效果，但是再次添加一行同样的代码看会发生什么

1
2
3
4

addCount(params) {
   this.setState({count:this.state.count + 1})
   this.setState({count:this.state.count + 1})
}

​

count 的值并没有像我们预想的那样每次点击+2。是什么原因导致的呢？
State 的更新可能是异步的，出于性能考虑，React 可能会把多个setState()调用合并成一个调用，要解决这个问题，可以让 setState() 接收一个函数而不是一个对象。再来重新认识一下setState

setState()

1. setState(stateChange,[callback])

第一个参数是你要改变的 state 对象，第二个是可选的回调函数。这种形式的setState()是异步的，并且在同一周期内会对多个 setState进行批处理。后调用的 setState() 将覆盖同一周期内先调用 setState 的值，因此count数仅增加一次。如果要解决这个问题，我们需要为setState传入一个函数.

2. setState(updater,[callback])

第一个参数是带有形参的updater函数

1

(state, props) => stateChange

state对应变化时组件状态的引用，也就是最新的state，此次更新被应用时的props是第二个参数(可选)。因此可以使用这种方式来解决我们上面遇到的问题.

1
2
3
4
5
6
7
8

addCount(params) {
    this.setState((state) => ({
        count: state.count + 1
    }))
    this.setState((state) => ({
        count: state.count + 1
    }))
 }

[callback]是setState()的第二个参数，为可选的回调函数,它将在setState完成合并并重新渲染组件后执行。因此我们也可以在这个回调函数中获取到最新的state值.

对State赋值

State里面的状态数据可能是值类型或是引用类型，对于基本数据类型（String(字符串)，Number(数值)，Boolean(布尔值)，Undefined，Null）可以直接对其赋值。对于引用类型的数据（Array，Object）赋值时要特别注意：不要直接修改原始引用类型的值。例如：为数组增加一项

1
2
3
4
5
6
7
8

// 错误，不要直接修改this.state的值
this.setState({
    listData: this.state.listData.push(100)
})
// 错误
this.setState(preSate => ({
    listData: preSate.listData.push(100)
}))

正确的做法是使用concat或是ES6的扩展语法：

1
2
3
4
5
6
7
8

// 正确
this.setState(preSate => ({
    listData: preSate.listData.concat(100)
}))
// 正确
this.setState(preSate => ({
    listData: [...preSate.listData,100]
}))

注意：在修改数组类型的状态时不要使用push、pop、shift、unshift等方法,因为这些方法都是在原数组的基础上修改,取而代之的是使用concat、slice、splice、filter或是ES6的扩展语法，返回一个新的数组。

对于对象类型的状态而言可以这样赋值：

1
2
3
4
5
6
7
8

// 使用ES6 的Object.assgin方法
this.setState(preState => ({
    mapData: Object.assign({},preState.mapData,{name:'React'})
}))
// 使用对象扩展语法
this.setState(preState => ({
    mapData: {...preState.mapData,name:'React'}
}))

三. 函数组件中的useState

Hook 是 React 16.8 的新增特性，它可以让你在不编写 class 组件的情况下使用 state 以及其他的 React 特性。useState 是允许你在 React 函数组件中添加 state 的 Hook.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import React, { memo, useState } from 'react';

const HookComponent = () => {    
    const [data,setData] = useState({
        count:0,
        otherCount: 100
    })
    
    const addCount = () => {
        // wrong
        // setState({count:state.count+1})
        // correct
         setData(Object.assign({},{...data,count:data.count+1}))
         setData(Object.assign({},{...data,count:data.count+1}))
         console.log('data.count=====',data.count); // 0
    }
  
    return (
            <div>
                函数组件
                <div>
                    count: {data.count}<br></br>
                    otherCount: {data.otherCount}
                </div>
                <div>
                    <button onClick={addCount}>+1</button>
                </div>
            </div>
        );
}
export default memo(HookComponent);

更新state

useState的唯一参数是初始 state，返回值为：当前 state 以及更新 state 的函数。如果我们也像在 class 组件中使用对象对其进行赋值，并调用更新 state 函数，那么一定要注意：class 组件中的 this.setState是合并state，而函数组件中更新 state 的函数是替换当前的 state。例如要对count执行 +1 操作，以下写法是错误的：

1
2

// 错误
setData({count:data.count+1})

otherCount 的值变为了 undefined.

正确写法：

1

setData(Object.assign({},{...data,count:data.count+1}))

上面的写法这和预期的一样。但是，直接更新状态是一种不好的做法, 同样如果连续调用两次，count的值并没有像预期的那样改变.

1
2

setData(Object.assign({},{...data,count:data.count+1}))
setData(Object.assign({},{...data,count:data.count+1}))

与 class 组件状态更新原理不同，这里setData()是替换当前的 state,只执行最后一次+1的操作。如果要解决这个问题需要传递给 setState() 一个回调函数，在这个回调函数中我们获取该实例的当前状态，例如 setState(currentState => currentState + newValue)。

1
2
3
4
5
6
7
8

setData(data => ({
    ...data,
    count:data.count + 1
}))
setData(data => ({
    ...data,
    count:data.count + 1
}))

获取State的最新值

我们知道State 的更新可能是异步的，但有时候的业务场景需要我们同步拿到变量的最新变化值，以便做下一步操作，可以用一下几种方式获取：

1. 回调函数内获取

在setXXX中使用回调函数更新

1
2
3
4
5
6
7
8

setData(data => {
    const count = data.count + 1
    console.log('count====>>>',count); // 获取最新值,执行后续逻辑
    return {
        ...data,
        count:count
    }
})

2. 直接使用useEffect 获取

1
2
3
4
5
6
7
8
9

... 
const addCount = () => {
    setData(Object.assign({},{...data,count:data.count+1}))
}
// 使用 useEffect 解决数据同步问题
useEffect(() => {
  // 获取最新值，执行后续逻辑
    console.log('count====',data.count);
}, [data]);

3.使用Promise实现

1
2
3
4
5
6
7
8
9
10

 new Promise((resolve) => {
    const newData = {
        ...data,
        count:data.count + 1
    }
   setData(Object.assign({},newData))
   resolve(newData)
}).then(data => {
    console.log('data====',data); // 获取到最新值，进行后续逻辑处理
});

四. 小结

需要注意的是，在 React18 之前，在非 React 调度流程如setTimeout setInterval ，直接在 DOM 上绑定原生事件等，setState 是同步的，除了这些，setState都是异步执行。从react18开始, 使用了createRoot创建应用后, 所有的更新都会自动进行批处理，也就是异步合并。后续文章中我们在探讨 React 的自动批处理流程，本文不再涉及。

一些参考：

React

State 和生命周期指南
深入学习：何时以及为什么 setState() 会批量执行？
深入：为什么不直接更新 this.state？

一. 概述

在 React16.8推出之前，我们使用react-redux并配合一些中间件，来对一些大型项目进行状态管理，React16.8推出后，我们普遍使用函数组件来构建我们的项目，React提供了两种Hook来为函数组件提供状态支持，一种是我们常用的useState,另一种就是useReducer, 其实从代码底层来看useState实际上执行的也是一个useReducer,这意味着useReducer是更原生的，你能在任何使用useState的地方都替换成使用useReducer.

Reducer的概念是伴随着Redux的出现逐渐在JavaScript中流行起来的,useReducer从字面上理解这个是reducer的一个Hook，那么能否使用useReducer配合useContext 来代替react-redux来对我们的项目进行状态管理呢？答案是肯定的。

二. useReducer 与 useContext

1. useReducer

在介绍useReducer这个Hook之前，我们先来回顾一下Reducer，简单来说 Reducer是一个函数(state, action) => newState：它接收两个参数，分别是当前应用的state和触发的动作action，它经过计算后返回一个新的state.来看一个todoList的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

export interface ITodo {
    id: number
    content: string
    complete: boolean
}

export interface IStore {
    todoList: ITodo[],
}

export interface IAction {
    type: string,
    payload: any
}

export enum ACTION_TYPE {
    ADD_TODO = 'addTodo',
    REMOVE_TODO = 'removeTodo',
    UPDATE_TODO = 'updateTodo',
}

import { ACTION_TYPE, IAction, IStore, ITodo } from "./type";

const todoReducer = (state: IStore, action: IAction): IStore => {
    const { type, payload } = action
    switch (type) {
        case ACTION_TYPE.ADD_TODO: //增加
            if (payload.length > 0) {
                const isExit = state.todoList.find(todo => todo.content === payload)
                if (isExit) {
                    alert('存在这个了值了')
                    return state
                }
                const item = {
                    id: new Date().getTime(),
                    complete: false,
                    content: payload
                }
                return {
                    ...state,
                    todoList: [...state.todoList, item as ITodo]
                }
            }
            return state
        case ACTION_TYPE.REMOVE_TODO:  // 删除 
            return {
                ...state,
                todoList: state.todoList.filter(todo => todo.id !== payload)
            }
        case ACTION_TYPE.UPDATE_TODO: // 更新
            return {
                ...state,
                todoList: state.todoList.map(todo => {
                    return todo.id === payload ? {
                        ...todo,
                        complete: !todo.complete
                    } : {
                        ...todo
                    }
                })
            }
        default:
            return state
    }
}
export default todoReducer

上面是个todoList的例子，其中reducer可以根据传入的action类型（ACTION_TYPE.ADD_TODO、ACTION_TYPE.REMOVE_TODO、UPDATE_TODO）来计算并返回一个新的state。reducer本质是一个纯函数，没有任何UI和副作用。接下来看下useReducer:

1

const [state, dispatch] = useReducer(reducer, initState);

useReducer 接受两个参数：第一个是上面我们介绍的reducer，第二个参数是初始化的state，返回的是个数组，数组第一项是当前最新的state，第二项是dispatch函数,它主要是用来dispatch不同的Action，从而触发reducer计算得到对应的state.

利用上面创建的reducer,看下如何使用useReducer这个Hook：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

const initState: IStore = {
  todoList: [],
  themeColor: 'black',
  themeFontSize: 16
}

const ReducerExamplePage: React.FC = (): ReactElement => {
  const [state, dispatch] = useReducer(todoReducer, initState)
  const inputRef = useRef<HTMLInputElement>(null);

  const addTodo = () => {
    const val = inputRef.current!.value.trim()
    dispatch({ type: ACTION_TYPE.ADD_TODO, payload: val })
    inputRef.current!.value = ''
  }
  
  const removeTodo = useCallback((id: number) => {
    dispatch({ type: ACTION_TYPE.REMOVE_TODO, payload: id })
  }, [])

  const updateTodo = useCallback((id: number) => {
    dispatch({ type: ACTION_TYPE.UPDATE_TODO, payload: id })
  }, [])

  return (
    <div className="example" style={{ color: state.themeColor, fontSize: state.themeFontSize }}>
      ReducerExamplePage
      <div>
        <input type="text" ref={inputRef}></input>
        <button onClick={addTodo}>增加</button>
        <div className="example-list">
          {
            state.todoList && state.todoList.map((todo: ITodo) => {
              return (
                <ListItem key={todo.id} todo={todo} removeTodo={removeTodo} updateTodo={updateTodo} />
              )
            })
          }
        </div>
      </div>
    </div>
  )
}
export default ReducerExamplePage

ListItem.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import React, { ReactElement } from 'react';
import { ITodo } from '../typings';

interface IProps {
    todo:ITodo,
    removeTodo: (id:number) => void,
    updateTodo: (id: number) => void
}
const  ListItem:React.FC<IProps> = ({
    todo,
    updateTodo,
    removeTodo
}) : ReactElement => {
    const {id, content, complete} = todo
    return (
        <div> 
            {/* 不能使用onClick,会被认为是只读的 */}
            <input type="checkbox" checked={complete} onChange = {() => updateTodo(id)}></input>
            <span style={{textDecoration:complete?'line-through' : 'none'}}>
                {content}
            </span>
            <button onClick={()=>removeTodo(id)}>
                删除
            </button>
        </div>
    );
}
export default ListItem;

useReducer利用上面创建的todoReducer与初始状态initState完成了初始化。用户触发增加、删除、更新操作后，通过dispatch派发不类型的Action，reducer根据接收到的不同Action，调用各自逻辑，完成对state的处理后返回新的state。

可以看到useReducer的使用逻辑，几乎跟react-redux的使用方式相同，只不过react-redux中需要我们利用actionCreator来进行action的创建，以便利用Redux中间键(如redux-thunk)来处理一些异步调用。

那是不是可以使用useReducer来代替react-redux了呢？我们知道react-redux可以利用connect函数，并且使用Provider来对<App />进行了包裹，可以使任意组件访问store的状态。

1
2
3

<Provider store={store}>
  <App />
</Provider>

如果想要useReducer到达类似效果，我们需要用到useContext这个Hook。

2. useContext

useContext顾名思义，它是以Hook的方式使用React Context。先简单介绍 Context。
Context设计目的是为了共享那些对于一个组件树而言是“全局”的数据,它提供了一种在组件之间共享值的方式，而不用显式地通过组件树逐层的传递props。

1

const value = useContext(MyContext);

useContext:接收一个context对象（React.createContext 的返回值）并返回该context的当前值,当前的 context值由上层组件中距离当前组件最近的<MyContext.Provider>的 value prop 决定。来看官方给的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

上面的例子，首先利用React.createContext创建了context,然后用ThemeContext.Provider标签包裹需要进行状态共享的组件树，在子组件中使用useContext获取到value值进行使用。

利用useReducer、useContext这两个Hook就可以实现对react-redux的替换了。

三. 代替方案

通过一个例子看下如何利用useReducer+useContext代替react-redux,实现下面的效果:

react-redux实现

这里假设你已经熟悉了react-redux的使用，如果对它不了解可以去 查看.使用它来实现上面的需求：

• 首先项目中导入我们所需类库后，创建Store

  Store/index.tsx

  1 2 3 4 5 6 7 8 9 10

  import { createStore,compose,applyMiddleware } from 'redux'; import reducer from './reducer'; import thunk from 'redux-thunk';// 配置 redux-thunk const composeEnhancers = compose; const store = createStore(reducer,composeEnhancers( applyMiddleware(thunk)// 配置 redux-thunk )); export type RootState = ReturnType<typeof store.getState> export default store;

• 创建reducer与actionCreator

  reducer.tsx

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

  import { ACTION_TYPE, IAction, IStore, ITodo } from "../../ReducerExample/type"; const defaultState:IStore = { todoList:[], themeColor: '', themeFontSize: 14 }; const todoReducer = (state: IStore = defaultState, action: IAction): IStore => { const { type, payload } = action switch (type) { case ACTION_TYPE.ADD_TODO: // 新增 if (payload.length > 0) { const isExit = state.todoList.find(todo => todo.content === payload) if (isExit) { alert('存在这个了值了') return state } const item = { id: new Date().getTime(), complete: false, content: payload } return { ...state, todoList: [...state.todoList, item as ITodo] } } return state case ACTION_TYPE.REMOVE_TODO: // 删除 return { ...state, todoList: state.todoList.filter(todo => todo.id !== payload) } case ACTION_TYPE.UPDATE_TODO: // 更新 return { ...state, todoList: state.todoList.map(todo => { return todo.id === payload ? { ...todo, complete: !todo.complete } : { ...todo } }) } case ACTION_TYPE.CHANGE_COLOR: return { ...state, themeColor: payload } case ACTION_TYPE.CHANGE_FONT_SIZE: return { ...state, themeFontSize: payload } default: return state } } export default todoReducer

  actionCreator.tsx

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

  import {ACTION_TYPE, IAction } from "../../ReducerExample/type" import { Dispatch } from "redux"; export const addCount = (val: string):IAction => ({ type: ACTION_TYPE.ADD_TODO, payload:val }) export const removeCount = (id: number):IAction => ({ type: ACTION_TYPE.REMOVE_TODO, payload:id }) export const upDateCount = (id: number):IAction => ({ type: ACTION_TYPE.UPDATE_TODO, payload:id }) export const changeThemeColor = (color: string):IAction => ({ type: ACTION_TYPE.CHANGE_COLOR, payload:color }) export const changeThemeFontSize = (fontSize: number):IAction => ({ type: ACTION_TYPE.CHANGE_FONT_SIZE, payload:fontSize }) export const asyncAddCount = (val: string) => { console.log('val======',val); return (dispatch:Dispatch) => { Promise.resolve().then(() => { setTimeout(() => { dispatch(addCount(val)) }, 2000); }) } }

最后我们在组件中通过useSelector,useDispatch这两个Hook来分别获取state以及派发action：

1
2
3

const todoList = useSelector((state: RootState) => state.newTodo.todoList)
const dispatch = useDispatch()
......

useReducer + useContext 实现

为了实现修改颜色与字号的需求，在最开始的useReducer我们再添加两种action类型，完成后的reducer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const todoReducer = (state: IStore, action: IAction): IStore => {
    const { type, payload } = action
    switch (type) {
        ...
        case ACTION_TYPE.CHANGE_COLOR: // 修改颜色
            return {
                ...state,
                themeColor: payload
            }
        case ACTION_TYPE.CHANGE_FONT_SIZE: // 修改字号
            return {
                ...state,
                themeFontSize: payload
            }
        default:
            return state
    }
}
export default todoReducer

在父组件中创建Context,并将需要与子组件共享的数据传递给Context.Provider的Value prop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

const initState: IStore = {
  todoList: [],
  themeColor: 'black',
  themeFontSize: 14
}
// 创建 context
export const ThemeContext = React.createContext(initState);

const ReducerExamplePage: React.FC = (): ReactElement => {
  ...
  
  const changeColor = () => {
    dispatch({ type: ACTION_TYPE.CHANGE_COLOR, payload: getColor() })
  }

  const changeFontSize = () => {
    dispatch({ type: ACTION_TYPE.CHANGE_FONT_SIZE, payload: 20 })
  }

  const getColor = (): string => {
    const x = Math.round(Math.random() * 255);
    const y = Math.round(Math.random() * 255);
    const z = Math.round(Math.random() * 255);
    return 'rgb(' + x + ',' + y + ',' + z + ')';
  }

  return (
    // 传递state值
    <ThemeContext.Provider value={state}>
      <div className="example">
        ReducerExamplePage
        <div>
          <input type="text" ref={inputRef}></input>
          <button onClick={addTodo}>增加</button>
          <div className="example-list">
            {
              state.todoList && state.todoList.map((todo: ITodo) => {
                return (
                  <ListItem key={todo.id} todo={todo} removeTodo={removeTodo} updateTodo={updateTodo} />
                )
              })
            }
          </div>
          <button onClick={changeColor}>改变颜色</button>
          <button onClick={changeFontSize}>改变字号</button>
        </div>
      </div>
    </ThemeContext.Provider>
  )
}
export default memo(ReducerExamplePage)

然后在ListItem中使用const theme = useContext(ThemeContext); 获取传递的颜色与字号，并进行样式绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 引入创建的context
import { ThemeContext } from '../../ReducerExample/index'
...
// 获取传递的数据
const theme = useContext(ThemeContext);
 
return (
    <div>
        <input type="checkbox" checked={complete} onChange={() => updateTodo(id)} style={{ color: theme.themeColor, fontSize: theme.themeFontSize }}></input>
        <span style={{ textDecoration: complete ? 'line-through' : 'none', color: theme.themeColor, fontSize: theme.themeFontSize }}>
            {content}
        </span>
        <button onClick={() => removeTodo(id)} style={{ color: theme.themeColor, fontSize: theme.themeFontSize }}>
            删除
        </button>
    </div>
);