唐朝人更懂React

ゞ浴缸里的玫瑰 2022-12-07 02:19 165阅读 0赞

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

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

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

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

那么，放烟花难在哪呢？

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

何谓“整”？

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

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

![format_png][]

何谓“齐”？

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

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

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

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

这场面，想必是极好的。

# 唐朝人是怎么做的 #

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

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

*  `中央枢纽`负责下达`命令`
 *  沿途`驿站`传递`命令`

![format_png 1][]

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

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

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

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

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

## 告知存货 ##

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

1.  烟花贩子将`烟花`运送到不同的`燃放点`。
2.  `燃放点`的跑腿差役沿着`驿站`快马加鞭奔赴`中央枢纽`，告知`中央枢纽`本`燃放点`当前的`烟花存货`。

![format_png 2][]

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

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

## 调度燃放 ##

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

1.  礼部官吏翻阅典籍，根据烟花的`寓意`及各`燃放点`的存货安排好`燃放顺序`。
2.  `中央枢纽`的`指挥使`根据`燃放顺序`选出最高优的烟花类型，大笔一挥，下达一道命令。
3.  各`燃放点`在`中央枢纽`的跑腿差役收到命令，快马加鞭沿着`驿站`一路回到`燃放点`。
4.  `燃放点`负责燃放烟花的差役（我）根据命令，选择合适的烟花燃放。

## 佳节当天 ##

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

*  城郊燃放点存货：红、紫烟花
 *  城北燃放点存货：红、绿烟花
 *  东南燃放点存货：紫烟花

![format_png 3][]

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

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

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

分别对应：

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

![format_png 4][]

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

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

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

![format_png 5][]

此时：

![format_png 6][]

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

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

![format_png 7][]

此时：

![format_png 8][]

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

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

![format_png 9][]

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

## 这，就是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模型`。

关于lane更深入解释见此文：[React17新特性：启发式更新算法][React17]

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

*  对于`ClassComponent`，调用`this.render`的时候
 *  对于`FunctionComponent`，调用函数的时候

## 总结 ##

通过本文我们知道了，调用`this.setState`后并不会触发`更新`，仅仅是创建`update`并告知`React`。

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

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

更深入的源码分析，点击\[阅读原文\]，《React技术揭秘》带你读懂源码。

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

## 关于奇舞周刊 ##

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。

![format_png 10][]

[format_png]: /images/20221123/276acf17b8f64662941b441ceb817fc2.png
[format_png 1]: /images/20221123/f25cca2143604964bf6d3eb1cc3e7a72.png
[format_png 2]: /images/20221123/0b4e0abe3d1f421fb95f08d96bc0b55b.png
[format_png 3]: /images/20221123/fcd8e4cb2549479a89219473ecbce026.png
[format_png 4]: /images/20221123/3fb74c6b06ec4eac960d985991fd18a0.png
[format_png 5]: /images/20221123/014c297d43664749a20ab70a63c7da9a.png
[format_png 6]: /images/20221123/05b64c93bfbf4672ba32c5d70eaa957a.png
[format_png 7]: /images/20221123/e5156d5ed46c42c0aea1027048f36d0c.png
[format_png 8]: /images/20221123/a0aa0c0a96464d23a183c8700a435fc1.png
[format_png 9]: /images/20221123/62a03d65fbd4451db4c55f087a791054.png
[React17]: http://mp.weixin.qq.com/s?__biz=MzU0MDg4NDY2Mg%3D%3D&chksm=fb332a3dcc44a32bc8d57af9bbdd1e460f93114414fd42f7caad19feade9492a37c3c398486f&idx=1&mid=2247483876&scene=21&sn=335a99927ec6555bd70f1b72d859fc02#wechat_redirect
[format_png 10]: /images/20221123/4a424fae67ad421db32a4deae68e2800.png