在我的上篇文章中，展示了很多与硬件相关的小项目，如《创造音乐与灯光的魔幻组合》是在WEB网页上对硬件的交互，还有《使用 嘿，Siri 开灯！轻松点亮你的空间》语音控制灯光，本质上是Siri发送了一个 HTTP 的请求对硬件进行交互来实现的，还有一个特别酷的《创意互动游戏-探索车》特别酷是因为它的前端页面和探索车的造型特别酷，这个也是 WEB 前端对硬件的交互。刚刚这些项目呢，它们有一个最大的共同点，就是每个项目都使用了某种网络通信协议来与硬件进行沟通的呢。

开始之前，先放一段VCR，看一下你将要实现的成果吧！

从视频中可以看出，我们可以隔空操作面前的灯带，不同的姿态会解锁不同的灯光

准备工作

隔空操纵硬件这个事情，听起来是不是感觉制作起来很难？但我相信，你一定可以的，在开始之前我们先清点一下接下来你将要使用的道具有哪些吧！

• ESP-32 开发板
• 杜邦线 公对母
• WS2812B LED 灯带
• 数据线 Micro-USB（安卓数据线）
• 计算机（Win / Mac）
• 浏览器（Chrome）

项目整体思路

我们先看一看该项目的大致思路，隔空操控硬件，首先先是使用视觉计算的识别技术调用我们电脑的摄像头，会识别我们的人体姿态，识别到特定的姿态后，会给硬件发送一个特定的信号，硬件这边收到信号之后，将会分析信号，根据信号特征决定点亮或熄灭，我们灯带上所对应的各个灯珠。

姿态识别 - 姿态大模型

视觉计算-姿态识别

看到这，你一定在想视觉计算的姿态识别是什么？怎么来识别我们人体不同的姿态呢？哈哈，我已经想到你的疑问啦！

视觉计算：视觉计算是利用计算机和算法处理图像和视频数据的领域。它涵盖了图像处理、计算机视觉、图像分析等技术，旨在使计算机能够理解、分析和处理图像数据。

姿态识别：姿态识别是视觉计算的一个重要应用，它专注于检测、识别和跟踪物体或人体在图像或视频中的姿态、动作或位置。姿态识别技术可用于识别人体姿态，例如检测人体关节的位置、姿势的变化，以及人体在图像或视频中的运动状态。

视觉计算是涵盖了多个领域的计算机视觉范畴，而姿态识别是其中的一个具体应用，利用视觉计算技术来识别和理解图像或视频中的姿态信息。

好，现在相信你对视觉计算以及姿态识别有了一定的了解，接下来我们面临了一个问题，这个姿态识别技术看起来好厉害啊，But 我还是个初学者！怎么实现这个技术呢？

当然，我知道一个姿态识别的训练平台，我们可以在这里训练我们的姿态大模型，姿态大模型是针对姿态识别而设计和训练的复杂深度学习模型。该模型通过使用大量不同姿态的样本数据进行训练，以学习和理解人体在图像或视频中的不同姿态，并具备识别这些姿态的能力。

Teachable Machine

Train a computer to recognize your own images, sounds, & poses. A fast, easy way to create machine learning models for your sites, apps, and more – no expertise or coding required.

Teachable Machine

有了这个平台，我们的任务是不是一下子就简单多啦！接下来我们就通过这个平台来识别我们的四个姿态动作（伸左手｜伸右手｜伸左右手｜不伸任何手）

首先我们先来简单设置一下，先将 Class 1 重命名一个有意义的名字，比如我这里的为 left ，因为这里我们会先录入我们伸左手的姿态样本，先点击摄像头按钮，再点击设置按钮就可以看到下图中画面，将摄像头的 FPS 帧率设置为 60 ，也就是说，每秒会捕捉 60 帧图像，这样捕捉的样本不仅会更加流畅，还会捕捉到更多的样本。延迟设置到 2 秒，就是说点击开始录制，2 秒后平台才会开始收集样本。下面的时间就是连续收集 18 秒姿态样本，理论上也就是说我们录入一次会收集 1080 张样本，实际收集的样本数量可能会因为电脑性能有所差异。

接下来我们开始录入我们的姿态样本，在录入左手的样本的时候，我们先伸起左手，在点击录制按钮，录制的时候我们的胳膊可以做一些上下轻微浮动的动作，来提高姿态模型的识别度。

录完伸左手之后，然后我们依次创建和录入（伸右手、伸左右手、不伸任何手）的姿态样本，录入完之后呢，我们点击训练模型，就可以开始训练我们的姿态大模型啦！因为我们的姿态样本比较多，所以我们训练大模型的时间会长一点，训练时长会在10～15分钟左右，当然啦，这样我们姿态大模型的训练结果也会更加的精准。

大模型训练完之后，我们来测试下，现在试试刚刚的录入的四种姿态的精准度是否在 90% 以上，如果你的每种姿态的精准度都在 90% 以上，那太棒了！

如果不在的话，那么可能需要重新录入姿态样本来改进模型的精准度。

中间件 - CodeLab 创作平台

到这里，我们已经完成了我们姿态识别的部分啦！这个其实就是我们的一个实时检测姿态的后台，这时候就需要一个中间人负责分析当前姿态并将对应的数据告诉给硬件的一个角色，中间人会这样问后台的大模型：“请告诉我现在是怎样的姿势？是举着左手还是举着右手？”

这个中间人呢在编程中也叫做中间件，在该项目中，它负责的工作是实时分析当前姿态，并将当前的姿态的数据发送给硬件。接下来我们就来测试一下我们的这个中间件朋友机不机灵吧！

我们就拿 CodeLab 创作平台来做这个中间件，点击开始创作，在左下角，新增一个扩展， 在搜索框里搜索 训练平台 ，点击它进行导入扩展。

CodeLab - Imagine, Program, Share

传递编程的乐趣，鼓励孩子成为数字时代的创作者。

Imagine, Program, Share

棒！导入扩展之后，我使用图形化编程编写一段下图中这样的程序，我先翻译一段，大家应该都就懂了，当接收到 left > 0.9 时就会执行 说：“ left ”。

哎！这个 left > 0.9 是什么意思呢？这个 left 是不是有点眼熟？好像刚刚在哪里用到过是不是？其实这是刚刚我们在姿态大模型训练平台中写到的 left 姿态，是伸左手。0.9 是精准度，也就是 90% 小数形式。我猜你们应该也猜出了这段代码的意思了吧！它会一直接收大模型发来的消息，但是呢，只会在精准度大于 90% 的时候说 left 。

大家试试？哎呀，怎么回事？为什么我在姿态大模型那里试了精准度都已经 100% ，为什么这里还是不显示对应的文字呢？

嗯哈哈，忘记跟大家说了，这里还需要一个连接器，用于连接姿态训练平台与 CodeLab 创作平台之间的通讯，它叫 CodeLab Adapter ，大家可以根据下方卡片链接进行安装。

Teachable Machine - CodeLab Adapter

the docs

CodeLab Adapter

安装完成之后启动 CodeLab Adapter ， 现在再次回到我们的姿态大模型训练平台这里，我们看到在页面的顶端有一行居中的文字，已连接 Adapter ，这就说明成功了啦！

不信？你现在回到 CodeLab 创作平台的页面，然后对着摄像头做伸右手，看看是不是会说 right 了，像这样 ，棒 ！🎉

好，现在这个中间件已经知道如何分辨我们不同的姿态啦！

了解 MQTT 通信协议基本原理

接着，下一个任务就是把我们的姿态告诉硬件。你是不是也有同样的疑问？怎么告诉硬件呢？而且时延要做到很低。嗯... 这让我想起一位在通信协议上的好友 MQTT 通信协议，不止我非常喜欢它，很多做物联网的开发工程师也非常喜欢它，为什么这么招人喜欢呢？

我来举一个例子，假设我们有一个大型的活动或聚会，人们希望在这个活动中能够方便地发送和接收消息。这里的 MQTT 通信可以类比为一个群发消息的场景。

1. 群组（Topic）： 想象一下，我们把这个聚会分成了几个不同的群组，比如“音乐爱好者”、“美食探索家”和“户外运动迷”。这些群组就好比MQTT中的主题（Topics），每个主题代表一个特定的消息类别或话题。
2. 发送消息（Publish）： 现在，如果有人想分享一些关于音乐的信息，比如告诉大家一个音乐会的信息。他可以把这条消息发送到“音乐爱好者”这个群组中。这个动作就好比在MQTT中使用发布（Publish）功能，将消息发送到特定的主题。
3. 接收消息（Subscribe）： 与此同时，对于那些对音乐感兴趣的人，他们可能在“音乐爱好者”这个群组中订阅（Subscribe）了消息。这意味着他们会收到所有在这个主题下发布的消息，比如音乐会信息。
4. 多个订阅者（Subscribers）： 这个活动中可能有很多人都对音乐感兴趣，所以许多人都订阅了“音乐爱好者”主题。这就好比在MQTT中有多个订阅者同时关注同一个主题，他们都能收到发布到该主题的消息。
5. 即时通信和异步性： 这种方式可以让大家实现即时通信，无需每个人都互相交流。同时，每个人可以自己决定在哪个群组中发布消息或者订阅消息，这就是异步通信的特点。

在这个比喻中，群消息的发送和接收就像MQTT中的发布和订阅。主题（Topics）类似于不同的聚会群组，而发布者（Publisher）发送消息到群组，订阅者（Subscriber）则接收并阅读群组中发布的消息。

现在想必你对 MQTT 通信协议的基本原理有一些了解了，现在我们新增一个 MQTT 扩展，刚刚我稍微修改了一下 CodeLab 创作平台的代码，嗯... 我又有点看不懂了，小编给大家再翻译一下，上面的那一大段的代码可以理解为打开微信 APP ，打开之后创建了一个群聊，名字叫做 junyan ，下面的四大块代码变动不大，只新增了一个：“广播主题（ junyan ）消息（ left ）”。它的意思也很简单，可以理解为在 junyan 这个群聊里发送了一个消息 叫做 left ，是不是很简单。

接下来，就是硬件这部分啦，硬件这部分可能很多人没有接触过，我是一位WEB全栈工程师，之前也没有接触过嵌入式硬件开发这方面，也是因为一个偶然的机会还有公司的发展才接触到的。

认识 ESP32 开发板

我们先来认识一下ESP32吧，可以把它想象成一个小而强大的电脑芯片。它有点像你手机或电脑里的大脑，但比较小巧。这个芯片可以让各种东西像玩具一样变得“聪明”。比如，它可以帮助灯泡变成可以远程控制的智能灯，让传感器收集环境数据，或者连接到互联网以与其他设备通信。

这个芯片拥有很多功能，比如能够连接无线网络（就像手机连Wi-Fi一样），还可以连接到其他设备，比如手机、传感器或者其他电子设备。它的作用有点像是电子世界的“通信员”，可以让各种东西互相“交流”。

我们先进行拼装，将 ESP32 连接到 WS2812B LED 灯带，现在需要用到一条 WS2812B LED 灯带、一个 ESP32 开发板以及三根杜邦线，接下来我们先使用杜邦线连接引脚：

• WS2812B 的 DIN（数据输入）引脚连接到 ESP32 的某一个 D引脚（通用输入输出）引脚。比如D15。
• WS2812B 的 VCC（电源正极）连接到 ESP32 的 3V3引脚（或者另外一个标有 5V 的引脚）。
• WS2812B 的 GND（电源负极）连接到 ESP32 的 GND 引脚（接地引脚）。

注意！！确保连接时极性正确，即 VCC 连接到正极、GND 连接到负极，以避免损坏灯带。

到这里我们已经将硬件组装完成，尝试点亮一下灯带吧！

首先使用我们的安卓数据线连接 ESP32 ，USB那一头插入电源适配器中。夷？ 灯带怎么没有点亮呢？那当然啦，因为我们还没有给 ESP32 写程序呢！接下来我来为大家讲解如何给 ESP 32 编写一段程序使灯带亮起来。

使用 Microblocks 对硬件编程

当然，我们全程不会使用任何 IDE 开发工具来对硬件进行编程，我们使用 Microblocks 平台的实时编程环境，点击积木，程序就会在主板上运行。是不是很神奇，现在，我们就使用 Microblocks 的实时编程环境来点亮我们的灯带！

Home

MicroBlocks is a blocks programming language for physical computing inspired by Scratch.

MicroBlocks

使用 Micro-USB （安卓）数据线将 ESP32 连接到你的计算机。然后点击上层卡片链接进入 Microblocks 主页（浏览器推荐 Chrome / Edge ），然后 Run ，便到了他的实时编程环境中，第一次使用开发版我们需要先给 ESP32 刷入一个编程环境，操作如下图：

点击设置图标 -> 升级主板固件 -> ESP32 -> 连接主板 -> 选择我们的主板 -> 连接

完成之后，将数据线从计算机上拔下来在重新连接计算机，接着连接主板，当 USB 图标后有一个圆圆的绿色背景，说明我们已经连接成功啦！

正式我们我们的编程环节，接着从左侧的积木库，找到 NeoPixel 库并添加，这个库是支持对我们的 WS2812B 灯带进行控制。

我先写一段程序（如下图）

• 我的 WS2812B 灯带 有 30 个灯珠
• 我的 WS2812B 的 DIN（数据输入）引脚连接到 ESP32 的 D15 引脚

现在我想你应该知道下图中的程序是什么意思了吧！

当程序启动时，将一个 30 个 LED 灯珠的 WS2812B 灯带的数据输入引脚（DIN）连接到 ESP32 微控制器的 D15 引脚上，接着有控制所有的灯珠颜色设置为红色。

这下，灯带不仅亮了，还有颜色。如果你想做一个更炫酷的灯带，可以研究一下左边侧边栏的控制与运算，祝你调效出来一个满意的效果。

现在成功实现了点亮灯带，但是，硬件的任务还不止于此，他还要接收并分析中间件通过 MQTT 传输给它的消息，然后在点亮对应的相对应的灯珠。

程序我已经写好啦，程序看起来有些复杂，我就讲的简单易懂一点了哈，首先先让 ESP32 开发板连接上互联网，然后设置LED NeoPixel灯带的参数，连接上网络之后显示自己的 IP 地址，然后启动 GO 程序，请接着往下看。

当 Go 程序启动时，会将所有的灯珠颜色设置为绿色，是为了告诉我们它已经成功连上网络啦。下面的代码我就讲的稍微抽象一点，还记得刚刚我在讲 MQTT 与微信群聊发消息的案例吗？如果你不记得，快往上翻一翻。

这个和上面的微信群聊案例一模一样，只不过硬件这边它更像一个观察者，他的工作内容是检测其它人是否在群内发送了特殊消息，如果检测到了特殊消息，他会迅速的做出反应，比如检测到你的消息中是否包含 left ，如果是它就会广播 左 ，也就是启动 左 程序，左程序是什么呢？我们在接着往下看。

左 程序在这里，这里除了左，还有（右、所有、null），我先来讲一讲 左 程序做了什么事情吧！先是将所有的灯珠关闭，定义一个变量 left 并将其初始化为 0； 当 left 不等于 15 时，重复执行以下操作： 将 left 的值加 1，也就是说 left 会递增，每执行一次 left 的数值都不一样，直到 left 等于15 时，才会不满足重复执行条件，这段程序才会结束。那灯带的变化是将第 0-15 个灯珠点亮并将颜色设置为深蓝色。 右 程序也异曲同工之妙。

现在你需要整合一下整篇文章，我相信你应该基本了解这个隔空操作硬件是怎么秀起来的吧！我将在 Microblocks 环境编程的代码文件放到了GitHub 上，下载该文件并将该文件拖动到网页内即可直接复现上面的代码块！快去试试吧～

Microblocks AI_Light_Strip 代码文件在 GitHub 上的地址：https://github.com/wonderland-club/AI_Light_Strip

我在 GitHub 上有一个关于 React + MQTT + ESP32 实现低延迟多人操控不同 ESP32 小车的项目。该项目在前端页面利用 MQTT 通信协议控制硬件，是一个实现低延迟多人控制 ESP32 小车的原型。如果您对此项目感兴趣，欢迎访问仓库链接：https://github.com/wonderland-club/Aim-joinEsp32-mqtt，并给它点个 Star。

如果您对此文章有任何问题，欢迎通过chenswonderland123@gmail.com与我联系🤩

在新的一年来临之际，先祝大家新年快乐！希望新的一年里大家在技术的道路上获得更多成就，遇到更多有趣的挑战，也能够享受到更多的喜悦和成功。愿新的一年给大家带来健康、幸福和充满创意的时光！祝大家2024年元旦快乐！

继ChatGPT爆火后，我开始思考作为一个程序员是否还需要继续学习编程。毕竟，ChatGPT能够快速生成优质的代码，提高我的工作效率和学习效率，甚至可以帮我快速了解新技能，对我来说是一种便利。然而，这让我思考，我们是否还需要学习编程呢？

我决定将这个问题抛给ChatGPT，它给出了以下回复，让我感到意外。它说虽然ChatGPT能够提供帮助，但学习编程仍然非常有价值。它列举了几个原因：

以最小原型分享基于编程开发的创新、好玩和有趣项目

继 ChatGPT 出现后，我曾考虑不再写有关技术的博客。然而，当我看到这个问题的回答时，我重新点燃了对技术性文章写作的热情。我计划重新开始写作，但与以往的文章有所不同。我打算分享使用编程开发创新、好玩和有趣项目的最小原型。

我希望能够展示使用编程技术创造的项目的精华部分。不同于过去，我将重点关注项目的原始形态，将其演示为一个最小可行的原型。这种方式可以激发读者的兴趣，让他们了解项目的核心思想和潜力，同时也为他们提供了参考和启发。

我相信这种新的写作风格将吸引更多读者，并鼓励他们参与到自己的项目中。同时，我也期待通过这些文章与读者们分享我的创意和技术见解，促进技术社区的发展和创新。

总的来说，我决定重启技术性文章写作，专注于分享基于编程开发的创新、好玩和有趣项目的最小原型。这将是一个令人期待的新篇章，希望能为读者带来更多的启发和乐趣。

然而，要创作出这些项目，仍然需要探索新技术的支持。学习编程对个人和社会仍然具有重要的价值。它能够提升创造性思维和设计能力，使我们不仅仅成为代码的书写者和功能实现者，更成为问题解决者、创新者和技术驱动者。

通过学习编程，我们能够拓展自己的思维边界，并从不同的角度来解决问题。我们可以设计出更加高效和可靠的系统，优化算法，以及创造出前所未有的应用和产品。学习编程还培养了我们的逻辑思维能力和解决复杂问题的能力，这对我们在各个领域中都非常有用。

探索前端与硬件的奇妙结合，创新项目的最新分享

我将在技术分享中拓展更多领域，不仅涉及前端开发，还将与硬件结合进行创新。我已经完成了一些项目的原型，并且已经有一些项目正在实际落地。用户反馈显示，这些项目非常有趣，令人兴奋，包括听话的温馨台灯、数字键盘灯带、AI探索车、像素书包等与硬件相关的项目。

在实现这些项目时，我主要使用了MicroBlocks，这是一个图形化的硬件编程环境。通过简单地拖拽积木，即可实时运行代码在主板上进行测试。使用指令积木来实时查看和绘制传感器的数值，无需等待代码编译和下载过程。

项目一：创造音乐与灯光的魔幻组合

它是一个数字键盘灯带。通过按下键盘上的 0-9 数字键，每个数字键对应着灯带上的三个灯珠，并以绿色显示。每次点击数字键都会伴随着一个声音，类似于钢琴的声音。我的灵感来源于 2019 年参观北京 Google 展示台上的钢琴，钢琴的键可以自己演奏。当然，我已经有了模仿 Google 自动演奏钢琴的思路，需要使用与钢琴键相同数量的舵机来实现。我需要一些物资支持，如果有实力的同学愿意和我一起完成这个项目，那将非常棒！哈哈哈～

项目二：照亮你的夜晚，轻松导航回家

当你在夜晚躺在床上，突然想去厕所，但路上一片漆黑，你需要打开好几个灯才能找到厕所。这时候，一个家庭场景灯光系统就能帮助到你了。如果你想去厕所，那通往厕所的路上的灯都会亮起来；如果你想去客厅，通往客厅的路上的灯也会亮起来。在校园里，如果你怕迷路，你可以使用不同颜色的灯光来进行区分。我已经制作了一个最小原型，如果添加了灯带，效果将更加出色、更加亮丽！

项目三：使用 嘿，Siri 开灯！轻松点亮你的空间

当你已经躺在床上，不想下床去开灯时，如果你正好使用苹果全家桶的设备，如 iPad、iPhone、Mac、HomePod 等，你可以通过语音助手“嘿 Siri”接管硬件控制权。利用舵机实现物理控制灯的开关，将灯板作为台灯使用。只需说出“嘿 Siri，打开/关闭客厅的灯”，或者“嘿 Sir，打开/关闭台灯”，你就可以通过调试和优化使灯光平滑过渡，避免给眼睛带来不适感，这将非常方便实用并具有很不错用户体验。

项目四：创意互动游戏，与探索车共同踢足球

这个项目使用不同的硬件元素（如舵机、马达、灯带等）与乐高积木相互配合组装而成。通过一个基于 WBE 框架构建的应用程序，可以控制小车的前后移动、左右旋转、抬起和降落，以及抓取和放开等动作。每位操作者在应用程序中只能选择一辆无人操控的车辆进行操作。这是一个多人参与的游戏，类似于“踢足球”，胜利的条件是将足球踢进球框。这个创意互动游戏非常有趣，布展在广场中非常吸引小朋友们来积极参互动游戏。

以上的四个项目，我已经完成了它们的原型，并将在未来的博客文章中进行详细的分享。请大家静候佳音，我将分享这些项目的详细内容和技术细节。期待与大家一起探索和交流。

题外话："开放日策划，chatGPT助力实务学堂展示学员风采！"

我还使用 chatGPT 协助策划活动内容，更高效地进行策划和准备。

实务学堂支持青少年自立，使命与愿景：“探索农村青少年职业发展新路径，为好的社会培养珍贵的普通人。非常期待您的加入！了解更多关于实务学堂的课程、学习方式和报名信息，请从微信公众号搜索“实务学堂”。

最后，如果您也使用编程开发出有趣好玩或解决实际问题的项目等，并且愿意与我分享，我将非常欢迎。请将项目相关信息发送至我的邮箱，我期待与您交流并探讨更多创意和技术见解。谢谢！我的邮箱是 chenswonderland123@gmail.com。

与 Diffing 算法关联的两个前端经典面试题

1. react/vue 中的 key 有什么作用？（ key 的内部原理是什么？）
2. 为什么遍历列表时，key 最好不要用 index ?

在开篇之前，先简介什么是 React 虚拟 DOM

1. 虚拟 DOM 本质是 Object 类型的对象（ JS 中一般对象）。
2. 虚拟 DOM 比较“轻”（属性少），真实DOM比较“重”（属性很多），因为虚拟 DOM 是 React 内部在用，无需真实 DOM 那么多的属性。
3. 虚拟 DOM 最终会被 React 转化为真实 DOM ，呈现在页面上。

虚拟 DOM 中 key 的作用

简单地说，key 是虚拟 DOM 对象的标识，在更新显示时 key 起着极其重要的作用。

详细地说: 当状态中的数据发生变化时，React 会根据“新数据”生成“新的虚拟 DOM”,随后 React 进行“新虚拟 DOM”与“旧虚拟 DOM”的 Diffing  比较。

Diffing 比较规则

• 旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key：
  1. 若虚拟 DOM 中内容没变，直接使用之前的真实 DOM 。
  2. 若虚拟 DOM 中内容变了，则生成新的真实 DOM，随后替换掉页面中之前的真实 DOM。
• 旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key：
  1. 根据数据创建新的真实 DOM ，随后渲染到到页面。

React 实现与 Dom Diffing 算法

React 不是每一次更新都把页面上的真实 DOM 作出修改，每一个真实 DOM 都对应着一个虚拟 DOM，当新增或修改一个数据，新的虚拟 DOM 就会和旧的虚拟 DOM 进行 Diffing 算法。

案例 1 ：旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key

如下图中有两份数据，旧的数据添加了一条数据得到一份新的数据，在进行更新遍历时，新旧虚拟 DOM 进行比较，这时 Diffing 算法发现 id 为 1 和 id 为 2 对应的新旧虚拟 DOM 内容没有任何改变，多了一条 id 为 3 的虚拟 DOM，页面上前两条真实 DOM 不做改变，只把 id 为 3 的虚拟 DOM 映射成页面真实 DOM 。

案例  2 ：旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key

如下图，旧数据经过修改得到一份新的数据，通过 Diffing 算法更新遍历来修改页面上的真实DOM，新旧虚拟DOM进行比较，发现新旧虚拟 DOM 的 Key 值没有任何改变，但 id 为 2 对应的新旧虚拟的内容发生了改变，则生成新的真实 DOM ，随后替换掉页面中之前的真实 DOM 。

为什么遍历列表时 key 最好不要用 index ?

在 React/Vue 中，我们通常遍历列表，其目的时保证 key 在同级是唯一的。在 React Diffing 算法中 React 会借助元素的 Key 值来判断该元素，从而减少不必要的元素重新渲染。

这个 key 很重要，如果赋值不当会导致：错误更新、性能下降、出 BUG 等问题，有些人习惯在遍历列表时，给 key 赋值列表的索引值 index ，我们来看一看给 key 赋值 index 可能出现的问题吧！

如上代码 Person Class ，State（状态）内有一个长度为 2 的 persons 对象数组，在虚拟 DOM 中 map 遍历 persons 对象数组内容， button 按钮 onClick （点击事件） add (事件函数) 来实现添加新用户，通过 setState 调用 render 根据 Diffing 算法来重新渲染页面。

慢动作回放——使用 index 索引值作为 key （如何导致的性能浪费？）

问题来了：添加用户 Eric 前后， key 有什么变化？慢动作回放一下刚刚的操作。

1. 初始数据：

{id:1,name:'junYan',age:18},
{id:2,name:'Yan',age:19}

1. 初始的虚拟 DOM ：

<li key=0>junYan---18</li>
<li key=1>Yan---19</li>

1. 更新后的数据：

{id:3,name:'Eric',age:20},
{id:1,name:'junYan',age:18},
{id:2,name:'Yan',age:19}

1. 更新数据后的虚拟 DOM （注意 key 值更新前后的变化）：

<li key=0>Eric---20</li>
<li key=1>junYan---18</li>
<li key=2>Yan---19</li>

我们发现初始的虚拟 DOM 和更新后的虚拟 DOM 内容发生了变化，添加新用户操作，虚拟 DOM 内容更新前后的 key = 0 完全不一样。

按照 Diffing 算法，新旧所有的虚拟 DOM 内容完全不一样，需要替换页面上的所有真实 DOM 和增加新的 DOM ，有没有感觉这很浪费性能？如果你有 1000 条用户数据，添加一个用户数据，这是不是要操作 1001 次页面真实 DOM 呀！

但是，如果使用 id 唯一标识作为 key，我们看看会不会优化性能？

慢动作回放——使用 id 唯一标识作为 key （是如何优化性能的？）

1. 初始数据：

{id:1,name:'junYan',age:18},
{id:2,name:'Yan',age:19}

1. 初始的虚拟 DOM：

<li key=1>junYan---18</li>
<li key=2>Yan---19</li>

1. 更新后的数据：

{id:3,name:'Eric',age:20},
{id:1,name:'junYan',age:18},
{id:2,name:'Yan',age:19}

1. 更新数据后的虚拟 DOM （注意 key 值更新前后的变化）：

<li key=3>Eric---20</li>
<li key=1>junYan---18</li>
<li key=2>Yan---19</li>

我们发现，这次更新前后的虚拟 DOM ，按照 Diffing 算法来说，虚拟 DOM 只新增一条数据，只需把 key = 3 数据创建新的真实 DOM ，随后渲染到到页面就可以了，这样只操作一次页面的真实 DOM 就可以了。

总结： key 最好不要用 index

1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实 DOM 更新，界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的 DOM ：会产生错误 DOM 更新 ，同时界面也有问题。
3. 如果只是单纯的展示信息，不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的。

总结：在开发中如何选择 key？

1. 最好使用每条数据的唯一标识作为 key , 比如 id、手机号、身份证号、学号等唯一值。
2. 如果确定只是简单地展示数据，不做其他的操作，用 index 也是可以的。

个人主页及联系方式，更多交流请联系我：https://chenjunyan1.github.io。

• 内网穿透，简单地说就是内网的数据让外网可以获取，可以映射到公共网络上，这样就可以在公共网络上访问内网的数据。
• 内网是不能被外网直接访问的，只能通过一些中转技术，如 DingTalk Design CLI、花生壳、Natap 等工具，让内网“假装”成外网，就是内网穿透。
• 外网主机的 IP 地址的一个端口映射到内网中一台机器，提供相应的服务。当用户访问该 IP 的这个端口时，服务器自动将请求映射到对应局域网内部的机器上。
• 内网穿透扩展了我们之前的工作场景和范围，让使用者可以不局限在内网环境中就可以做到局域网才能做的事情，大大提高了我们的效率。

内网穿透可以实现什么？

• 实现外网访问树莓派
• 教授远程访问学校的服务器
• 搭建个恋爱单页面站点，记录他跟她的恋爱故事
• 开发调试 web 站点
• 开发调试手机移动 APP
• 搭建一个临时的演示站点给客户看
• 微信小程序开发方便调试
• 搭建“我的世界”私服

Come on ，让你的 WEB 项目实现内网穿透

Wonderland：“创建一个能跑起来的网站，所以第一步就是把网站搭建起来。”

YOU：“这简单呀！我三年前的时候就玩过，写个 index.html 然后在浏览器里打开不就完事了？”

Wonderland：“那是在本地打开。你换别人电脑，还能访问吗？”

YOU：“弄到 Gitee 或者 GitHub 不就行了……”

Wonderland：“那 Gitee 用的什么你知道吗？”

YOU：“这…… 不太懂欸”

Wonderland：“打开浏览器的开发者工具，访问 Gitee，看看 Gitee.com 返回的 response，headers 里面，server 部分填的是什么？”

You：“啥？开发者工具？Response header？跟不上了……”

Wonderland：“哎，年轻人，程序员的修炼之路任重而道远啊……告诉你，是 NGINX” 。

Wonderland：“NGINX 是最流行的轻高性能 web 服务器，常常用来做反向代理、负载均衡等等。利用了 epoll API，异步模型，简直是高并发的最佳拍档……”

You：“这……”

Wonderland：“呃……是不是扯太多了？没关系，这些也不太重要，用得多了你就了解了。暂时就先从最简单的网站搭起吧——安装 NGINX”

安装及配置 NGINX

1. NGINX 下载地址 https://nginx.org，选择下载 nginx-1.22.0 稳定版

2. 配置 NGINX 访问本地资源

修改 nginx.conf 配置文件，在 conf 目录下，基本上所有的配置都在这里面做。不同的版本或者不同的操作系统路径可能不一样 。

Windows 操作系统一般在这里：nginx-> conf -> nginx.conf

打开 nginx.conf 之后，看到 root 后面的是 html，把 html 修改成你想要展示的前端项目的绝对路径。

像我这样修改 root , Nginx 会默认访问 C:\Users\Wonderland\Desktop\shen-zhen 下面的 index.html。

2.  启动 Nginx

• Windows 启动 Nginx

Win + R 运行 cmd 命令窗口，切换到 nginx 目录下，输入命令 nginx.exe 或 start nginx。

• Mac OS 启动 Nginx

打开终端窗口，切换到 nginx 目录下，输入命令 sudo nginx。

4.  访问 localhost

在浏览器输入 localhost 就可以访问你刚刚在 root 里配置的前端项目

注意： 在 nginx.conf 文件内，nginx 默认配置的监听的端口为 80，如果 80 端口被占用，则会出现端口冲突。

You：“我专门留着公司电脑没关机，但是一回家用自己的 Windows 笔记本还是访问不了，是哪设置得有问题吗？”

Wonderland：“嗨，localhost 是本地主机，就是当前电脑的意思。别说回家用你的 Windows，就算换个同事的电脑，访问 localhost 也不可能行得通啊。”

You：“我想到了这一点，所以专门提前看了主机的 IP 地址，是 192.168……”

Wonderland：“那也不行的。192.168.xxx.xxx 这种都是内网 IP。在咱们公司内部别的电脑上，通过 IP 访问你电脑上的网站倒还行，但是出了公司就不行了。”

You：“啊？为什么会这样呢？”

Wonderland：“说来话长啊。一方面当然是安全的考虑，但其实也有历史原因。IP 地址总量是有限的，最早美国人研发出来的时候，没人知道这玩意将来会成为重要的资源，所以分配得很随意，后来才发现，有些不需要那么多 IP 的人攒了一大堆闲置的 IP，需要 IP 的人反而分配得远远不够。”

You：“啊？不够？那怎么上网呢？”

Wonderland：“后来为了解决这个问题，就发明了 NAT 技术，对外一个公网 IP，对内可以变成好多个内网 IP，相互之间做好转换就行了。”

You：“唔……有点懵……”

Wonderland：“嗯……反正你知道结果就行了——咱们的电脑都是没有公网 IP 的，只有内网IP，从外面访问不了。”

You：“那怎么办呢？”

Wonderland：“一般来说肯定不能让人随随便便进公司内网啊，安全起见嘛。不过……你要真想内网穿透的话，钉钉了解一下？”

内网穿透

使用 DingTalk Design CLI 启动内网穿透，执行以下命令，下载 DingTalk Design CLI 工具。

1. 安装

npm install dingtalk-design-cli@latest -g

执行以下命令，检测是否成功安装

ding -v

执行以下命令，启动钉钉内网穿透 这里最后的 80 是 Nginx 代理本地的端口号 80

ding ngrok --subdomain xxxx --port 80
/*xxxxx可以写成任意字母*/

我写的是 ding ngrok --subdomain chen --port 80（xxxx在我这里就是 chen）。

执行完该命令后，访问 xxxxx.vaiwan.cn 都会映射到 localhost（127.0.0.1:80）

注意：访问 xxxxx.vaiwan.cn 的时候使用 http 协议不是 https 协议。

2.  可能会遇到的问题

如果出现这个就是服务器分配隧道失败，说明你的 xxxxx 已经被别人抢先占用了！换个名字就好了。

3.  映射

现在你在本地修改项目文件，在本地上执行的所有修改也会映射到公共网络上。

4.  React 项目内网

我们先运行 react 项目文件 npm start，React 的 localhost 的默认端口是 :3000，可以借助钉钉内网穿透开发工具，就可以这样写，把后面的端口号改为 3000。

ding ngrok --subdomain xxxxx --port 3000

实务学堂是一个面向 16-18 岁农民（工）子女或城市边缘青少年的非学历职业教育公益项目，2018 年 3 月创立于北京，2020 年迁址广州市海珠区小洲村，以「培养珍贵的普通人」为使命，创立全新的「实务教育」体系。「珍贵的普通人」，核心是自立、利他的人。「实务教育」包括三个维度：健康的身心、「像入职三个月职场新人」的职业素养、可以就业的一技之长。——摘自《实务学堂 2021 年秋季招生简章》

我先后在这里学习了 Java、C++、HTML、CSS、JavaScript、React 等编程技能，目前担任编程课助教，正在带领 5 位同龄人学习编程。

今天我演讲的主题是《利用线上和线下的开源社区，从没有学习机会的青少年，成为编 程学习者》。

我是如何开始学习编程并进入开源世界的

三年前，我对自己未来要做什么感到很迷茫，一开始我打算去玩音乐，当时看了很多的音乐节目，感觉很不错。后来我的爸爸给我推荐实务学堂，第一次我是拒绝的， 后来我也不知道自己想要干什么，第二次爸爸又来问我，我感觉自己对未来的计划还没有详细的打算，于是我就选择了来到实务学堂。

这里面有好多的专业课程， 比如编程、平面设计等等。我先去试着去接触编程。我接触的第一门编程语言是 Java，老师使用斯坦福大学的课程资源，线上给我们授课，用循环打印一个火箭，用函数来做处理数据，做一个签到程序，等等…...我还自己一个人去搞了一 个电影购票系统项目。我每天把大部分时间花在了这个项目上，一边复习学到的知识，一边探索新的知识，每天去不断的升级，解决 bug。记得我当时写了一千 多行代码，就这样，我的兴趣萌芽逐渐开始生长。

疫情过后，真正的进入开源世界

为什么是疫情过后？2020 年，在疫情期间，我们的全部课程改成了线上。那个学期我们学习 Web 前端编程，因为是上网课，我就对着屏幕，注意力非常容易不集中，然后越往后就越听不懂了，当时我就想退课了。一直到学期末回顾了一下这整个学期，好像 Web 开发什么也没有学会。

接着就到了小学期。小学期像是一个集训，巩固上学期学过的知识。因为当时小学期不是必须要上的，我就没有选择去上小学期，而是选择了去一个洗车店打工，当时是想自己挣钱买一台电脑，也正好体验一下生活。然后假期结束，爸爸给我买了一台电脑，我在洗车店挣的钱就当是我的零花钱了。

2020 年 9 月初， 疫情好转了好多，秋季学期也随之开始了。同学们都已经学有所成，老师也要讲新的知识了，可是我还什么都不会。之前和我在深夜并肩作战 debug 的 Eric 鼓励我说“加油，这些很简单”，我准备重振旗鼓，在最短的时间内和 Eric 到一个起跑线上。

我开始每周制定计划，去执行，一开始我从 w3school 里面去学习，在 freeCodeCamp里做练习。当然我在学习时会遇到很多的问题，我先会在搜索引擎上去搜索， 然后去找同学们和老师们讨论。好几次我和陈一帅老师讨论到深夜，他不仅帮我解决了 bug，还给了我新的思路。渐渐的，我追赶上老师讲课的进度，甚至进行了突破，这个学期我学得很充实。

希望大家不要轻易放弃任何一件事情，不去试试，怎么知道自己不可以？学会利用各种开源社区，想象将变为现实。

在今年的小学期，我去了一个图书馆，任图书管理员一职，因为来这里的人很少，我就有很多的时间去学习编程。

我的领导看到我在学习编程，也支持我，她和我说“你可以给我们做一个官网吗？”我的领导也就是我们学堂曾经的性教育课老师韩雪梅老师。我想都没有想张口就来，就回了句“可以的”，然后我的领导把有关的资料给了我。我看了一下，是北京希希儿童关爱中心的资料，更多的可能是性教育方面的。我就在想最近在学习 React，那就试着用 React 开发吧，原子化组件式开发，想实现一个什么样的效果，就使用搜索引擎看很多社区的讨论，多看多参与几个社区的讨论就了解得更多。

在这个小学期，我通过实习和开源社区，学到了很多新的技能，并开发了一个初版的公益网站，之后我会持续更新。

利用线上和线下的开源社区，从没有学习机会的青少年，成为编程学习者

线上，对我来说这几个资源的意义比较大：

• freeCodeCamp 有一套全面的系统的学习路线，还有开源的课程和练习，可以帮助初学者明确应该从哪个方面入手，有目的地去学习和练习。
• Github 是几乎所有开发者都在用的代码托管平台，上面有很多的开源项目，把别人的项目 pull 下来学习他是如何实现的，也可以很快地学习。
• 搜索引擎，可以搜索到很多的开源社区，查看并参与别人的讨论，积少成多，从多个开源社区得到的信息就会更丰富）。

线下：

我觉得实务学堂就是离我最近的开源社区。实务学堂有来自不同领域的专业老师和优秀的同学们：北京交通大学的硕导陈一帅老师，《Linux 内核安全模块深入剖析》的作者李志老师等，还有我的好朋友 Eric。我们在一起学习和分享。

我们每周会有一个编程沙龙分享，Eric 担任主持人（一会儿会由他来介绍这个编程沙龙）。

Kido-CodeLab

我目前带领着我的团队 Kido-CodoLab，希望让同学们对编程充满兴趣，更简单地理解它，让实务学堂的编程课还能继续活下去。

我们接过老师的材料——基于纽约 CodeNation 和伯克利 WDD 的学习资源，准备通过小项目，介绍 HTML、 CSS、JavaScript、React 等前端基础知识。我们会通过一个个好玩的小游戏项目，带大家通过动手，逐步掌握 Web 前端编程的基本技能，并爱上编程。当然同学们也很给力，敢于探索，靠着丰富的想象力把编程当作一个游戏，玩的东西是五花八门，和他们在一起我也很开心。

更多信息

本文是我在 2021 中文学生开源年会上的演讲稿。这是关于我的专访，欢迎大家阅读。谢谢！

推荐阅读：《艾克：利用线上和线下的开源社区，从没有学习机会的青少年，成为编程学习者》