In 705, on the First day of the First year of the Divine Dragon, the court lifted the curfew, and the city of Chang ‘an was bustling all night long.
You’ve been working with your brother in the ministry of Etiquette for years, getting a job in the fireworks department. These are the busiest days of the year.
The so-called fireworks department is a government-run fireworks institution responsible for organizing the setting off of fireworks during festivals.
That’s a hell of a lot of fireworks. In a few years in Chang ‘an, you learned one thing — how to set off fireworks on command.
So what’s so hard about fireworks?
The difficulty lies in the word “neat”.
What is “whole”?
Chang ‘an city has a number of ignition points, responsible for discharge matters. These ignition points are far apart, but they need to be set off at the same time.
So that the fireworks can burst at the same time, this is “whole”.
What is “qi”?
If all the fireworks explode in the air, the meaning of the different fireworks doesn’t come out, it’s down.
Therefore, fireworks should be classified according to the meaning:
The commander shouted, “Purple Spirit!” “And all the purple fireworks will bloom together.
With another big cry of “Hongfu Qi Tian”, all the red fireworks burst into bloom.
The scene must have been splendid.
How did the Tang People do it
In order to achieve “neat”, each ignition point can not go their own way, need unified scheduling.
To this end, the discharge center set up a central hub in the center of the city and dotted the city with Courier stations.
-
The central hub gives orders
-
Orders were passed along at stations along the way
When fireworks need to be set off, the central hub will contain the meaning of the discharge command to reach the nearest station, the relay between stations layer upon layer, until the point of ignition.
The ignition point receives the discharge command containing the implied meaning and ignites the corresponding fireworks.
So the question is, fireworks are stored at various ignition points, how does the central hub know which fireworks are in stock?
In other words, there would be no point in a central hub giving the order to set off purple fireworks if all the burning points were red fireworks.
Therefore, it is necessary to inform the central hub of the ignition point through the post station: the existing fireworks.
Inform the inventory
The shopkeepers call this step the call inventory. Specifically as follows:
-
The vendors deliver the fireworks to different burning points.
-
The fire station’s errand boy raced to the central hub along the Courier station and told the central hub to fire the current fireworks inventory.
The night of The Lantern Festival, the central hub received a different point of stock informed.
At this point, the official of the ministry of Rites (when can I get from the fireworks to the ministry of Rites, ah).
Scheduling setting off
This step is called scheduling discharge by the watchman, specifically as follows:
-
Officials of the ministry of Rites read ancient books and arranged the discharge order according to the implied meaning of fireworks and the stock of each burning point.
-
The commander at the central hub selects the best type of firework according to the order of discharge and issues an order with the stroke of a pen.
-
The errand boys at the central junction received orders to gallop along the stations all the way back to the depot.
-
The fireworks officer (I) chooses the right fireworks to set off according to the order.
On the day of the holiday
This day, fireworks traffickers early for the ignition point on fireworks, which
-
The suburbs burn some inventory: red and purple fireworks
-
North of the city to burn some inventory: red and green fireworks
-
Southeast burn point inventory: purple fireworks
Errand boys gather information at a central hub. Ritual officials prioritize the information based on the summary.
According to rites, the meanings of setting off fireworks should be in the following order:
Purple gas east -> Blessed -> Auspicious ankang
Corresponding to:
Purple fireworks -> Red fireworks -> Green fireworks
As the command makes a command “Purple east!”
The various errand boys galloped along the stations back to their burning points, where they lit fireworks on command.
At this time, “suburban” and “southeast” burning point inventory of purple fireworks, so the city’s suburbs and the southeast corner of the purple fireworks bloom.
At this time:
Next, the conductor gave the command “All the blessings of heaven!”
Red fireworks went off in the suburbs and north of the city.
At this time:
Finally, the command “auspicious ankang!”
Green fireworks lit the night sky north of the city.
Looking at the sky in the north, you think: this sky, just like… Just like a browser window!!
That’s React
“Fireworks in the sky” is the view in the browser window.
Each node in the figure above is a React element.
The difference between a flash point and a poststation is that the React Element corresponding to a flash point can update the state, which is a stateful component. Such as:
-
Call the ClassComponent of this.setState
-
Invoke the FunctionComponent of useState
Fireworks are update objects created inside React after calling setState.
The color of the fireworks indicates the priority of the update.
Fireworks vendors who deliver fireworks to the burn point are the scenarios that trigger status updates. Such as:
-
In the onClick enclosing setState ()
-
ComponentDidMount makes a data request, and when the request succeeds this.setState()
Updates generated in events take precedence over updates generated in lifecycle functions.
So to speak, onClick peddlers ship purple fireworks, and componentDidMount peddlers ship red fireworks.
The central hub is the heart of React.
The protocol officials who rank fireworks are the Lane model, the priority scheduling mechanism inside React.
For a more detailed explanation of Lane, see: [New feature of React17: Heuristic update algorithm
] (juejin. Cn/post / 686027…).
The errand boy runs all the way from the central hub to the ignition point, and each node (including the ignition point) along the way is the timing of the corresponding component render, namely:
-
For ClassComponent, call this.render
-
For FunctionComponent, when calling a function
conclusion
As we’ve seen in this article, calling this.setState does not trigger an update, but simply creates an update and tells React.
React dispatches updates.
The priority of updates needs to be sorted through the Lane model.
For a more in-depth source code explanation, React Technology Reveals the source code.
Finally, guess what role the firework “you” played in React?