公元705年，神龍?jiān)晟显压?jié)，朝廷解除了宵禁，登時(shí)長(zhǎng)安城徹夜人聲鼎沸好不熱鬧。

你投靠在禮部當(dāng)差的大哥已有數(shù)年，在煙火處謀得一份差事。這幾日正是一年中最忙碌的時(shí)候。

所謂煙火處，就是官辦的放煙花機(jī)構(gòu)，負(fù)責(zé)逢年過節(jié)有組織的燃放煙花助興。

這放煙花學(xué)問可大了。在長(zhǎng)安這幾年，你就學(xué)會(huì)了一件事 —— 如何聽從指令放煙花。

那么，放煙花難在哪呢？

難就難在這“整齊”二字。

何謂“整”？

長(zhǎng)安城中設(shè)有多個(gè)燃放點(diǎn)，負(fù)責(zé)燃放事宜。這些燃放點(diǎn)之間相去甚遠(yuǎn)，卻需要同時(shí)燃放。

如此煙花才能同時(shí)綻放，此為“整”。

何謂“齊”？

倘若所有煙花一股腦在空中炸開，不同煙花的寓意體現(xiàn)不出來，那就落了下乘。

所以，要按寓意將煙花分類：

指揮使大呼一聲“紫氣東來！”，那么所有紫色煙花一同綻放。

再大呼一聲“鴻福齊天”，所有紅色煙花一同綻放。

這場(chǎng)面，想必是極好的。

唐朝人是怎么做的

為了做到“整齊”，各個(gè)燃放點(diǎn)不能各行其是，需要統(tǒng)一調(diào)度。

為此，燃放處在城中心設(shè)置了中央樞紐，并在城中遍布驛站。

• 中央樞紐負(fù)責(zé)下達(dá)命令

• 沿途驛站傳遞命令

當(dāng)需要燃放煙花時(shí)，中央樞紐將包含寓意的燃放命令下達(dá)到最近的驛站，驛站之間層層傳遞，直到燃放點(diǎn)。

燃放點(diǎn)接收包含寓意的燃放命令，點(diǎn)燃對(duì)應(yīng)的煙花。

那么問題來了，煙花是保存在各個(gè)燃放點(diǎn)的，中央樞紐如何知道哪些煙花有存貨呢？

換句話說，如果所有燃放點(diǎn)只有紅色煙花，那么中央樞紐下達(dá)紫氣東來（燃放紫煙花）的命令，就沒有意義了。

所以，需要燃放點(diǎn)先通過驛站告知中央樞紐：本燃放點(diǎn)現(xiàn)存哪些煙花。

告知存貨

當(dāng)差的管這個(gè)步驟叫告知存貨。具體來說如下：

1. 煙花販子將煙花運(yùn)送到不同的燃放點(diǎn)。

2. 燃放點(diǎn)的跑腿差役沿著驛站快馬加鞭奔赴中央樞紐，告知中央樞紐本燃放點(diǎn)當(dāng)前的煙花存貨。

上元節(jié)當(dāng)晚，中央樞紐收到不同燃放點(diǎn)的存貨告知。

這時(shí)禮部官吏就出場(chǎng)了（什么時(shí)候才能從煙火處混到禮部啊，哎）。

調(diào)度燃放

當(dāng)差的管這個(gè)步驟叫調(diào)度燃放，具體來說如下：

1. 禮部官吏翻閱典籍，根據(jù)煙花的寓意及各燃放點(diǎn)的存貨安排好燃放順序。

2. 中央樞紐的指揮使根據(jù)燃放順序選出最高優(yōu)的煙花類型，大筆一揮，下達(dá)一道命令。

3. 各燃放點(diǎn)在中央樞紐的跑腿差役收到命令，快馬加鞭沿著驛站一路回到燃放點(diǎn)。

4. 燃放點(diǎn)負(fù)責(zé)燃放煙花的差役（我）根據(jù)命令，選擇合適的煙花燃放。

佳節(jié)當(dāng)天

這日，煙花販子早早為各燃放點(diǎn)備上煙花，其中

• 城郊燃放點(diǎn)存貨：紅、紫煙花

• 城北燃放點(diǎn)存貨：紅、綠煙花

• 東南燃放點(diǎn)存貨：紫煙花

各路跑腿差役將信息匯總于中央樞紐。禮部官吏根據(jù)匯總信息排列優(yōu)先級(jí)。

根據(jù)《禮典》，燃放煙花的寓意需要按照如下順序：

紫氣東來 -> 鴻福齊天 -> 祥瑞安康

分別對(duì)應(yīng)：

紫色煙花 -> 紅色煙花 -> 綠色煙花

隨著指揮使一聲令下 “紫氣東來！”

各路跑腿差役沿著驛站飛奔回各自燃放點(diǎn)，燃放點(diǎn)差役根據(jù)命令點(diǎn)燃煙花。

此時(shí)“城郊”與“東南”燃放點(diǎn)有“紫色煙花”存貨，于是長(zhǎng)安城的城郊與東南角上空綻放了紫色煙花。

此時(shí)：

接下來，指揮使一聲令下 “鴻福齊天！”

城郊與城北上空綻放了紅色煙花。

此時(shí)：

最后，指揮使一聲令下 “祥瑞安康！”

城北的夜空綻放了綠色煙花。

望著北方的星空，你癡癡的想：這漫天星空，就像。。。。。。就像瀏覽器的窗口！！

這，就是React

“星空中綻放煙花”這幅畫面，就是瀏覽器窗口顯示的視圖。

上圖中的每個(gè)節(jié)點(diǎn)，就是一個(gè)React element。

燃放點(diǎn)與驛站的區(qū)別在于，燃放點(diǎn)對(duì)應(yīng)的React element可以更新狀態(tài)，也就是有狀態(tài)的組件。比如：

• 調(diào)用this.setState的ClassComponent

• 調(diào)用useState的FunctionComponent

煙花就是調(diào)用setState后React內(nèi)部創(chuàng)建的update對(duì)象。

煙花的顏色代表了update的優(yōu)先級(jí)。

向燃放點(diǎn)運(yùn)送煙花的煙花販子，就是觸發(fā)狀態(tài)更新的各種場(chǎng)景。比如：

• onClick中this.setState()

• componentDidMount中發(fā)起數(shù)據(jù)請(qǐng)求，請(qǐng)求成功后this.setState()

其中，事件中產(chǎn)生的update優(yōu)先級(jí)高于生命周期函數(shù)中產(chǎn)生的update。

可以說，onClick販子運(yùn)送紫色煙花，componentDidMount販子運(yùn)送紅色煙花。

中央樞紐是React的核心。

給煙花燃放排序的禮部官吏，是React內(nèi)部的優(yōu)先級(jí)調(diào)度機(jī)制 —— lane模型。

關(guān)于lane更深入解釋見此文：React17新特性：?jiǎn)l(fā)式更新算法

跑腿差役從中央樞紐一路飛奔回燃放點(diǎn)，沿途經(jīng)過的每個(gè)節(jié)點(diǎn)（包括燃放點(diǎn)）就是對(duì)應(yīng)組件render的時(shí)機(jī)，即：

• 對(duì)于ClassComponent，調(diào)用this.render的時(shí)候

• 對(duì)于FunctionComponent，調(diào)用函數(shù)的時(shí)候

總結(jié)

通過本文我們知道了，調(diào)用this.setState后并不會(huì)觸發(fā)更新，僅僅是創(chuàng)建update并告知React。

具體何時(shí)更新需要經(jīng)過React的調(diào)度。

更新的優(yōu)先級(jí)需要經(jīng)過lane模型排序。

更深入的源碼分析，點(diǎn)擊[閱讀原文]，《React技術(shù)揭秘》帶你讀懂源碼。

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