我的天，唐朝就已经有人懂 React 了？

点击“开发者技术前线”，选择“星标????”

让一部分开发者看到未来

本文转载自公众号魔术师卡颂

React 是一个十分出色的前端框架，目前已经获得了广泛的应用。不过，在一千多年前的唐朝，就已经有人用“React”解决问题了。

本文转载自公众号魔术师卡颂（ID：gh_bc4b6cbdf9ad），经作者授权发布。

公元 705 年，神龙元年上元佳节，朝廷解除了宵禁，登时长安城彻夜人声鼎沸好不热闹。

你投靠在礼部当差的大哥已有数年，在烟火处谋得一份差事。这几日正是一年中最忙碌的时候。

所谓烟火处，就是官办的放烟花机构，负责逢年过节有组织的燃放烟花助兴。

这放烟花学问可大了。在长安这几年，你就学会了一件事 —— 如何听从指令放烟花。

那么，放烟花难在哪呢？

难就难在这“整齐”二字。

何谓“整”？

长安城中设有多个燃放点，负责燃放事宜。这些燃放点之间相去甚远，却需要同时燃放。

如此烟花才能同时绽放，此为“整”。

何谓“齐”？

倘若所有烟花一股脑在空中炸开，不同烟花的寓意体现不出来，那就落了下乘。

所以，要按寓意将烟花分类：

指挥使大呼一声“紫气东来！”，那么所有紫色烟花一同绽放。

再大呼一声“鸿福齐天”，所有红色烟花一同绽放。

这场面，想必是极好的。

唐朝人是怎么做的

为了做到“整齐”，各个燃放点不能各行其是，需要统一调度。

为此，燃放处在城中心设置了中央枢纽，并在城中遍布驿站。

• 中央枢纽负责下达命令

• 沿途驿站传递命令

当需要燃放烟花时，中央枢纽将包含寓意的燃放命令下达到最近的驿站，驿站之间层层传递，直到燃放点。

燃放点接收包含寓意的燃放命令，点燃对应的烟花。

那么问题来了，烟花是保存在各个燃放点的，中央枢纽如何知道哪些烟花有存货呢？

换句话说，如果所有燃放点只有红色烟花，那么中央枢纽下达紫气东来（燃放紫烟花）的命令，就没有意义了。

所以，需要燃放点先通过驿站告知中央枢纽：本燃放点现存哪些烟花。

告知存货

当差的管这个步骤叫告知存货。具体来说如下：

1. 烟花贩子将烟花运送到不同的燃放点。

2. 燃放点的跑腿差役沿着驿站快马加鞭奔赴中央枢纽，告知中央枢纽本燃放点当前的烟花存货。

上元节当晚，中央枢纽收到不同燃放点的存货告知。

这时礼部官吏就出场了（什么时候才能从烟火处混到礼部啊，哎）。

调度燃放

当差的管这个步骤叫调度燃放，具体来说如下：

1. 礼部官吏翻阅典籍，根据烟花的寓意及各燃放点的存货安排好燃放顺序。

2. 中央枢纽的指挥使根据燃放顺序选出最高优的烟花类型，大笔一挥，下达一道命令。

3. 各燃放点在中央枢纽的跑腿差役收到命令，快马加鞭沿着驿站一路回到燃放点。

4. 燃放点负责燃放烟花的差役（我）根据命令，选择合适的烟花燃放。

佳节当天

这日，烟花贩子早早为各燃放点备上烟花，其中：

• 城郊燃放点存货：红、紫烟花

• 城北燃放点存货：红、绿烟花

• 东南燃放点存货：紫烟花

各路跑腿差役将信息汇总于中央枢纽。礼部官吏根据汇总信息排列优先级。

根据《礼典》，燃放烟花的寓意需要按照如下顺序：

紫气东来 -> 鸿福齐天 -> 祥瑞安康

分别对应：

紫色烟花 -> 红色烟花 -> 绿色烟花

随着指挥使一声令下 “紫气东来！”

各路跑腿差役沿着驿站飞奔回各自燃放点，燃放点差役根据命令点燃烟花。

此时“城郊”与“东南”燃放点有“紫色烟花”存货，于是长安城的城郊与东南角上空绽放了紫色烟花。

此时：

接下来，指挥使一声令下 “鸿福齐天！”

城郊与城北上空绽放了红色烟花。

此时：

最后，指挥使一声令下 “祥瑞安康！”

城北的夜空绽放了绿色烟花。

望着北方的星空，你痴痴的想：这漫天星空，就像。。。。。。就像浏览器的窗口！！

这，就是 React

“星空中绽放烟花”这幅画面，就是浏览器窗口显示的视图。

上图中的每个节点，就是一个 React element。

燃放点与驿站的区别在于，燃放点对应的 React element 可以更新状态，也就是有状态的组件。比如：

• 调用 this.setState 的 ClassComponent

• 调用 useState 的 FunctionComponent

烟花就是调用 setState 后 React 内部创建的 update 对象。

烟花的颜色代表了 update 的优先级。

向燃放点运送烟花的烟花贩子，就是触发状态更新的各种场景。比如：

• onClick 中 this.setState()

• componentDidMount 中发起数据请求，请求成功后 this.setState()

其中，事件中产生的 update 优先级高于生命周期函数中产生的 update。

可以说，onClick 贩子运送紫色烟花，componentDidMount 贩子运送红色烟花。

中央枢纽是 React 的核心。

给烟花燃放排序的礼部官吏，是 React 内部的优先级调度机制 —— lane 模型。

跑腿差役从中央枢纽一路飞奔回燃放点，沿途经过的每个节点（包括燃放点）就是对应组件 render 的时机，即：

• 对于 ClassComponent，调用 this.render 的时候；

• 对于 FunctionComponent，调用函数的时候。

    总结    

通过本文我们知道了：

• 调用 this.setState 后并不会触发更新，仅仅是创建 update 并告知 React。

• 具体何时更新需要经过 React 的调度。

• 更新的优先级需要经过 lane 模型排序。

更深入的源码分析，可移步《React 技术揭秘》带你读懂源码。

https://react.iamkasong.com/

最后，猜猜放烟花的“你”在 React 中扮演了啥角色？

Vue资料推荐

    免费福利：Vue资料 

有不少读者询问前端的学习资料的，也有不少伙伴都学习前后端分离的知识，苦于找不到好的基础资料，于是我翻箱倒柜，找了一份好的Vue入门视频和笔记pdf，

这给大家找了一份学习资料，很多小伙伴都靠这些资料成功学会了Vue，并且能自己动手写前后端分离项目了，相信你也能行！

资料介绍

Vue入门，可以先看黑马程序员的免费Vue入门课程视频，讲得很不错，4小时长，学完足以入门和写简单项目！

一个Vue的入门视频

一份Vue的PDF

如何获取文档？

1. 识别并关注公众号「Gitcub」；
2. 在下面公众号后台回复关键字「vue资料」。

????长按上方二维码 2 秒
回复「vue资料」即可获取上面所有资料

然后Vue入门之后，我们来结合后端对接开发，于是我录制了一个SpringBoot + Vue的开源博客项目，并编写了详细的开发文档，包括前端和后端。只需要按照文档，结合讲解视频，就能一步一步跟着做项目了哈，相信这样能大大加快学习的效率！

后端文档：

前端文档：

讲解视频：

如何获取视频？

1. 识别并关注公众号；
2. 在下面公众号后台回复关键字「vue」。

????长按上方二维码 2 秒
回复「vue」即可获取上面所有资料

END

历史推荐

厉害了，一套完整的后台管理系统被开源(附源码），非常实用

最全面的44个Java 性能调优细节！

华为 Java 编程规范出炉，究竟和官方文档有何不同？

腾讯 Code Review 规范出炉！

京东技术大中台的 Flutter 跨端实践之路

好文点个在看吧！