The front-end frame design of math chat from elementary school

Hello, everyone, I am Ka·Primary Student·Song.

I am very happy that elementary school will be off for summer vacation in less than 10 days. When the time comes, I can say:

"My mother only allows me to play on holidays, and my hands are a little bit raw"

Back to the front end.

In fact, the front-end framework is a very simple thing. The working principle of most frameworks can be explained clearly elementary school knowledge

This article will start with this knowledge and gradually talk about the trade-offs behind the granularity of the front-end framework update.

After reading this article, you can not only gain a perspective to examine different frameworks, but also understand the reasons for React Hooks

Don't look down on our primary school students anymore!

Independent variable, dependent variable and responsive update

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

For the following equation:

2x + 1 = y

x is argument, y value by x impact is dependent variable.

In many frameworks and state management libraries, independent variables and dependent variables also exist.

Vue3 in 060e7f3fb72140:

const x = value(1);
// 取值
console.log(x.value);
// 赋值
x.value = 2;

MobX :

const x = observable({data: 1});
// 取值
console.log(x.data);
// 赋值
x.data = 2;

The independent variables of React

const [x, setX] = useState(1);
// 取值
console.log(x);
// 赋值
setX(2);

The arguments of these frameworks (or libraries) are composed of getter (value) and setter (assignment).

With the argument, of course there is also the dependent variable. We can according to whether side effects distinction.

Vue variable of 060e7f3fb72262:

// 无副作用
// 赋值
const y = computed(() => x.value * 2 + 1);
// 取值
console.log(y.value);

// 有副作用
watch(() => document.title = x.value);

MobX variables of 060e7f3fb722a8:

// 无副作用
const y = computed(() => x.data * 2 + 1);
console.log(y.get());

// 有副作用
autorun(() => document.title = x.data);

React variables of 060e7f3fb722ed:

// 无副作用
const y = useMemo(() => x * 2 + 1, [x]);
console.log(y);

// 有副作用
useEffect(() => document.title = x, [x]);

With the independent variable and the dependent variable, combined with the describing the view, the component UI can be described.

For example, in React , the view is described JSX

const [x, setX] = useState(21);
const y = useMemo(() => x * 2 + 1, [x]);

return <p>我的战绩是 0/{x}/{y}</p>;

Plus a variety of allowing users to manipulate arguments events, such as to p increase onClick :

<p onClick={() => setX(x + 1)}>我的战绩是 0/{x}/{y}</p>;

Finally, a small amount of auxiliary hook functions are added, such as: when an error occurs in the 160e7f3fb7239a component.

It constitutes a fully functional component.

This is what all fine-grained update framework has in common at the bottom:

Event-driven independent variable changes, which ultimately drive the view (or side effects) change

Object Oriented Pain

When we first learned programming, we all learned a concept- object (hereinafter referred to as OO ), and it is easy to accept a setting- OO can improve readability and easy maintenance.

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

Human can inherit mammal , this is a OO model

However, the actual operation is counterproductive.

Recall that you learn React of Class the component, in OO simple idea behind is complex life cycle concept, feel free to ask you a few questions:

• shouldComponentUpdate the principle of 060e7f3fb724fb?
• componentWillReceiveProps does 060e7f3fb7253b trigger?
• getDerivedStateFromProps does derivedState mean in 060e7f3fb72564?

Fortunately, the React team was also aware of this problem and set out to make changes.

The result of the change is Hooks .

The biggest difference between the function component Hooks Class

From owning instance lifecycle to independent variable, due to variable mapping between the view of change

If you accept this setting, think about the current mainstream way of learning Hooks (even the React official website is the same), it is actually:

Use the life cycle function to compare the execution timing of Hooks

Isn't it funny?

React dancing with fetters

Ideal is good, but the bottom layer of React fine-grained framework.

This results in independent variables and dependent variables, such as:

Hooks calling sequence cannot be changed (cannot be written in the conditional statement)

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

React achieve need a second parameter dependent variable explicit pointed his Who arguments yes. such as:

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

In contrast, other frameworks (or libraries) are not needed. For example, Vue :

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

Why are these restrictions? I use two metaphors to explain.

As I just talked about, in the fine-grained , the interaction process can be summarized as:

用户触发事件 -> 自变量改变 -> 因变量改变 -> 映射到视图变化

Just like a painter is drawing, each stroke of the painting corresponds to a independent variable of 160e7f3fb72766, and finally corresponds to the change of the picture.

React is roughly summarized as:

用户触发事件 -> 触发更新 -> 虚拟DOM全量对比 -> 将对比结果映射为视图操作

It's like a person takes a photo with a camera, then takes this photo and the last photo to find the difference, and finally updates the different places.

When calling this.setState (or useState of setter ), the next stroke is not drawn, but the shutter is pressed.

independent variable be discovered from a new photo? So React can only compare old and new photos.

Clean up some weird

Someone in the community realized this problem a long time ago, so Mobx born. He brings pure fine-grained update capabilities.

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

A painter took a paintbrush and poke on the drawing board. What did he poke? Poke the camera shutter.

Kacha took a photo, and the painter compared the photo with the old photo, and then painted the result of the comparison on the canvas.

So some people React : 060e7f3fb72883 + Mobx why not use Vue directly?

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

A more accurate statement should be: use React + Mobx why not use SolidJS directly?

Now, let's talk about the implementation principle of the pure fine-grained update framework ( SolidJS