Hello, I’m Ka Pupil Song.

I’m very happy that there are less than 10 days before the summer vacation of primary school. When the time comes, we can say:

“My mother only allowed me to play on vacation. My hands are a little rusty.”

Back to the front end.

In fact, the front-end framework is a very simple thing, and most of the framework’s working principle can be explained with a simple elementary school knowledge.

This article starts with this knowledge and walks you through the tradeoffs behind the granularity of front-end framework updates.

After reading this article, you will not only have a perspective to look at different frameworks, but you will also have an understanding of why React Hooks are created.

Don’t look down upon our primary school students!

Independent variables, dependent variables, and responsive updates

This elementary school knowledge is: independent variable and dependent variable.

For the following equation:

2x + 1 = y

X is the independent variable, and the value of y is affected by x, which is the dependent variable.

Many frameworks and state management libraries also have independent and dependent variables.

The independent variables in VUE3:

const x = value(1); / / value of the console. The log (x.v alue); // Assign x.value = 2;

The independent variable of MobX:

const x = observable({data: 1}); / / value of the console. The log (x.d ata); // Set x.data = 2;

The independent variable of React:

const [x, setX] = useState(1); / / values of the console. The log (x); / / assign your setX (2);

The arguments of these frameworks (or libraries) are composed of getters (values) and setters (assignments).

We have independent variables, and of course we have dependent variables. We can distinguish by side effects.

Dependent variable of VUE:

Const y = computed(() => x.value * 2 + 1); / / value of the console. The log (y.v alue); Watch (() => document.title = x.value);

Dependent variable of MobX:

// computed(() => x.ata * 2 + 1); console.log(y.get()); Autorun (() => document.title = x.data);

React dependent variable:

Const y = useMemo(() => x * 2 + 1, [x]); console.log(y); // useEffect(() => document.title = x, [x]);

With arguments and dependent variables, combined with the way you describe the view, you can describe the component UI.

For example, in React, the view is described by JSX:

const [x, setX] = useState(21); const y = useMemo(() => x * 2 + 1, [x]); Return <p> 0/{x}/{y}</p>;

Plus various events that allow the user to manipulate the argument, such as adding onClick to p:

< p onClick = {() = > your setX (x + 1)} > I was 0 / {x} / {y} < / p >.

Finally, a few auxiliary hook functions are added, such as hook functions for component errors.

It’s a fully functional component.

This is what all fine-grained update frameworks have in common at the bottom:

Event-driven argument changes that ultimately drive view (or side effects) changes

Object-Oriented Pain

When we first learned programming, we all learned the concept of object orientation (OO), and it was easy to accept the concept of OO as being readable and easy to maintain.

The reason: OO is a simulation of the real world. Such as:

peopleCan inherit
mammalsThis is the property of
OOmodel

In practice, however, it has backfired.

Think back to when you learned the Class component of React. Behind the simple facade of OO, there are complex life cycle concepts. Just ask yourself a few questions:

  • shouldComponentUpdateHow does it work?
  • componentWillReceivePropsWhen is it triggered?
  • getDerivedStateFromPropsIn thederivedStateWhat does that mean?

Fortunately, the React team recognized the problem and set about making changes.

The result of changes is Hooks.

The main differences between function components that use Hooks and Class components are:

From having
An instance of the lifecycleto
The mapping between independent variables, dependent variables and viewsshift

If you accept this set, consider that the prevailing way of learning Hooks (even on the React website) is as follows:

Think of life cycle functions as an analogy
HooksExecution time

Isn’t that funny?

React dancing in leg irons

The idea is nice, but the React underlying is not a fine-grained framework.

This leads to many limitations when implementing independent variables and dependent variables, such as:

HooksThe order of calls cannot be changed (cannot be written in conditional statements)

For example, I don’t know if you noticed a detail:

React implements a dependent variable that requires a second argument to explicitly indicate who its argument is. Such as:

const y = useMemo(() => x * 2 + 1, [x]);
useEffect(() => document.title = x, [x]);

Other frameworks (or libraries) do not. For example Vue:

const y = computed(() => x.value * 2 + 1);
watch(() => document.title = x.value);

Why these restrictions? Let me explain it with two metaphors.

As mentioned earlier, in a fine-grained framework, the interaction flow can be summarized as:

User-triggered events -> independent variable change -> dependent variable change -> maps to view change

Just like a painter in painting, each stroke corresponds to an independent variable change, and finally corresponds to the change of the picture.

The React update mechanism is summarized as follows:

User-triggered events -> triggers updates -> virtual DOM full volume comparison -> maps the comparison results to view operations

It’s like a person taking a picture with a camera, looking for a different picture from the last one, and then updating it.

When this.setState (or UstateState’s setter) is called, instead of drawing the next stroke, the shutter is pressed.

How can you find independent variables in a new photograph? So React can only compare old and new photos.

Just something weird

Someone in the community was aware of the problem, and MobX was born. It brings pure fine-grained update capability.

However, this ability is based on the React update mechanism, like:

A painter pokes his paintbrush at the drawing board. What does he poke at? I’ve poked the shutter.

A picture is snapped, and the artist compares the picture with the old one and paints the result on the canvas.

So why don’t you just use Vue with React+Mobx?

However, Vue itself relies on the virtual DOM, and the granularity is not the finest.

Why not use SolidJS instead of React+Mobx?

Well, in a few days we’ll talk about how the Pure Fine-grained Update Framework (SolidJS) works.