Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to achieve controlled components in the React source code", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "how to achieve controlled components in React source code"!

A simple controlled component in React is as follows:

Function App () {const [num, updateNum] = React.useState (0); const onChange = ({target: {value}) = > {updateNum (value);} return ()}

In onChange, the num,num is updated and passed to as a value prop to achieve the purpose of value control.

If you were to design it, what would you do?

I believe the first idea of most students is to treat value prop like other attribute prop.

We know that the internal operation of React has three phases:

Schedule scheduling update phase

The stage of diff algorithm carried out by render

The stage of DOM operation performed by commit

Suppose we want to trigger an update to change the className in onChange, simply record the className to be changed in the render phase and perform the corresponding addClass DOM operation in the commit phase.

Similarly, if we want to trigger an update to change the value in onChange, we only need to record the value to be changed in the render phase and perform the corresponding inputDOM.setAttribute ('value', value) operation in the commit phase.

The logic is very smooth. What about the truth?

Directly change the problem of value

ClassName is just a common attribute on inputDOM. Value, on the other hand, involves the position of the input box cursor.

If we modify the value directly, the cursor input position of the input will be lost after the property is changed, and the cursor will jump to the end of the input box.

Think about how we changed 1234 to 12534.

1234-> 12534

You need to move the cursor position to 2 before entering 5.

If setAttribute ('value',' 12534'), the cursor does not stay after 5 but jumps after 4.

So how does React solve this problem?

Implement controlled components in an uncontrolled form

You read it correctly, React implements the logic of controlled components in an uncontrolled form.

To put it simply, unlike className, which is controlled during the commit phase, value is completely uncontrolled, only when necessary.

Because once the value is updated, the cursor position is lost.

Let's slightly modify Demo,input to be a controlled component, and the value is always 1:

Function App () {const num = 1; return ()}

When we put a breakpoint in the source code, after typing 2, it will actually display 12 first, and then delete 2.

It's just that the deletion process is synchronized, so it seems that there is always only 1 in the input box.

Therefore, unlike other React components, props updates go through the schedule-render-commit process.

There is a separate update path for input, textarea, and select,React, and the update triggered by this path is called discreteUpdate.

The workflow of this path is as follows:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Update the form DOM in an uncontrolled form first

Start an update with the priority of synchronization

The updated value will not act on DOM like other props in the commit phase.

Call the restoreStateOfTarget method to compare the actual value of the DOM (that is, the uncontrolled value in step 1) with the updated value in step 3, exit if the same, and update the DOM with the value in step 3 if different

Under what circumstances will the two value be the same?

Our normal controlled components are the same:

Function App () {const [num, updateNum] = React.useState (0); const onChange = ({target: {value}) = > {updateNum (value);} return ()}

Under what circumstances will the two value be different?

In the above Demo, although controlled, there is no call to updateNum to update the value:

Function App () {const num = 1; return ()}

In this case, the uncontrolled value of step 1 becomes 12, and the controlled value of step 3 is still 1, so the value of the DOM will eventually be updated with 1.

At this point, I believe that everyone on the "React source code how to achieve controlled components" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.