唐朝人更懂React
公元705年，神龙元年上元佳节，朝廷解除了宵禁，登时长安城彻夜人声鼎沸好不热闹。
你投靠在礼部当差的大哥已有数年，在烟火处谋得一份差事。这几日正是一年中最忙碌的时候。
所谓烟火处，就是官办的放烟花机构，负责逢年过节有组织的燃放烟花助兴。
这放烟花学问可大了。在长安这几年，你就学会了一件事 —— 如何听从指令放烟花。
那么，放烟花难在哪呢？
难就难在这“整齐”二字。
何谓“整”？
长安城中设有多个燃放点，负责燃放事宜。这些燃放点之间相去甚远，却需要同时燃放。
如此烟花才能同时绽放，此为“整”。
何谓“齐”？
倘若所有烟花一股脑在空中炸开，不同烟花的寓意体现不出来，那就落了下乘。
所以，要按寓意将烟花分类：
指挥使大呼一声“紫气东来！”，那么所有紫色烟花一同绽放。
再大呼一声“鸿福齐天”，所有红色烟花一同绽放。
这场面，想必是极好的。
唐朝人是怎么做的
为了做到“整齐”，各个燃放点不能各行其是，需要统一调度。
为此，燃放处在城中心设置了中央枢纽，并在城中遍布驿站。
中央枢纽负责下达命令沿途
驿站传递命令
当需要燃放烟花时，中央枢纽将包含寓意的燃放命令下达到最近的驿站，驿站之间层层传递，直到燃放点。
燃放点接收包含寓意的燃放命令，点燃对应的烟花。
那么问题来了，烟花是保存在各个燃放点的，中央枢纽如何知道哪些烟花有存货呢？
换句话说，如果所有燃放点只有红色烟花，那么中央枢纽下达紫气东来（燃放紫烟花）的命令，就没有意义了。
所以，需要燃放点先通过驿站告知中央枢纽：本燃放点现存哪些烟花。
告知存货
当差的管这个步骤叫告知存货。具体来说如下：
烟花贩子将
烟花运送到不同的燃放点。燃放点的跑腿差役沿着驿站快马加鞭奔赴中央枢纽，告知中央枢纽本燃放点当前的烟花存货。
上元节当晚，中央枢纽收到不同燃放点的存货告知。
这时礼部官吏就出场了（什么时候才能从烟火处混到礼部啊，哎）。
调度燃放
当差的管这个步骤叫调度燃放，具体来说如下：
礼部官吏翻阅典籍，根据烟花的
寓意及各燃放点的存货安排好燃放顺序。中央枢纽的指挥使根据燃放顺序选出最高优的烟花类型，大笔一挥，下达一道命令。各
燃放点在中央枢纽的跑腿差役收到命令，快马加鞭沿着驿站一路回到燃放点。燃放点负责燃放烟花的差役（我）根据命令，选择合适的烟花燃放。
佳节当天
这日，烟花贩子早早为各燃放点备上烟花，其中
城郊燃放点存货：红、紫烟花
城北燃放点存货：红、绿烟花
东南燃放点存货：紫烟花
各路跑腿差役将信息汇总于中央枢纽。礼部官吏根据汇总信息排列优先级。
根据《礼典》，燃放烟花的寓意需要按照如下顺序：
紫气东来 -> 鸿福齐天 -> 祥瑞安康
分别对应：
紫色烟花 -> 红色烟花 -> 绿色烟花
随着指挥使一声令下 “紫气东来！”
各路跑腿差役沿着驿站飞奔回各自燃放点，燃放点差役根据命令点燃烟花。
此时“城郊”与“东南”燃放点有“紫色烟花”存货，于是长安城的城郊与东南角上空绽放了紫色烟花。
此时：
接下来，指挥使一声令下 “鸿福齐天！”
城郊与城北上空绽放了红色烟花。
此时：
最后，指挥使一声令下 “祥瑞安康！”
城北的夜空绽放了绿色烟花。
望着北方的星空，你痴痴的想：这漫天星空，就像。。。。。。就像浏览器的窗口！！
这，就是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新特性：启发式更新算法
跑腿差役从中央枢纽一路飞奔回燃放点，沿途经过的每个节点（包括燃放点）就是对应组件render的时机，即：
对于
ClassComponent，调用this.render的时候对于
FunctionComponent，调用函数的时候
总结
通过本文我们知道了，调用this.setState后并不会触发更新，仅仅是创建update并告知React。
具体何时更新需要经过React的调度。
更新的优先级需要经过lane模型排序。
更深入的源码分析，点击[阅读原文]，《React技术揭秘》带你读懂源码。
最后，猜猜放烟花的“你”在React中扮演了啥角色？
关于奇舞周刊
《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。
以上是 唐朝人更懂React 的全部内容， 来源链接： utcz.com/z/384155.html
