define

Controlled component: The value of a component is updated depending on the state value, which to some extent is identical to the state value.

Uncontrolled components: Component value updates are maintained by the component itself and require manipulation of the DOM to obtain the component’s value.

React

React behaves like this:

import React, { useState } from "react";

export default function App() {
  const [vale, setValue] = useState(0);
  const changeEvent = function(e) {
    console.log(e);
    setValue(123);
    // setValue(e.target.value);
  }
  return (
    <div className="App">
      <input type="text" value={value} onChange={changeEvent} /> 
    </div>
  );
}
Copy the code

If value is set in input, it is a controlled component. The onChange event is set as follows:

  1. Without setting the onChange event, input will not be rendered. Since input values are updated depending on state values (render), input does not render the input.

  2. Set the onChange event, but the onChange event does not update the status value/set the status value to a value other than that entered by the user, and the input will not render correctly. For the same reason.

  3. When the onChange event is set and the status value is set to the input value (e.target.value), the input will render the content correctly.

If value is not set, the Input component is an uncontrolled component. User input is maintained by the Input component (update rendering behavior is not controlled programmatically).

Vue

In Vue, there are two common Settings, a weird one that behaves differently.

v-model

<template> <input v-model="value" /> </template> <script> export default { name: "App", components: {}, data: function () { return { value: 123, }; }}; </script>Copy the code

React setting value is the same as setting the onChange event correctly.

:value & @input

<template> <input :value="value" @input="setValue" /> </template> <script> export default { name: "App", components: {}, data: function () { return { value: 123, }; }, methods: { setValue(e) { this.value = 123; // this.value += e.data; ,}}}; </script>Copy the code

The input representation (rendering) is separated from the value. This. value is still set to 123, but input responds correctly to user input.

v-model & @input

<template> <input v-model="value" @input="setValue" /> </template> <script> export default { name: "App", components: {}, data: function () { return { value: 123, }; }, methods: { setValue(e) { this.value = 123; // this.value += e.data; ,}}}; </script>Copy the code

This is not something that happens in everyday development. The input representation here is logical. If this.value=123, the input rendering will not render the user input, but 123. If the value of this.value is not set, the input representation is the same as the v-model representation.

Analyze the reasons for the performance differences between V-Model and :value & @input

First of all, the weird use of V-model & @input will not be analyzed.

The PERFORMANCE of the V-Model indicates that the component is controllable. So analyze the case where :value & @input behaves differently from the state.

Why is there a discrepancy between performance and state in this case?

We know that Vue relies on collections to discover updates and then update views. The @input event is raised when input is entered, but in the @input event, value is assigned a constant value (this.value = 123). At this point, the this.value value is the same, and no update is triggered, so Vue thinks the input component does not need to be updated and will not update the view, so the input responds to user input, but does not trigger a Vue update.

How do you prove that this is true? Please look at the following two cases:

  1. Such as thethis.value = 456 , the input will change from 123 to 456, and the performance will be consistent with the above analysis. Because @input assigns a constant value to this.value, it does not trigger Vue to update the view, whereas input responds to user input.
  2. Such as thethis.value = Math.random(), the content of the input changes with user input (not the value entered by the user), becausethis.valueIs updated, so Vue updates the view to synchronize the content of the input tothis.valueThe value of the.

React is different from Vue

React forces the update of the input to be synchronized with the update of the status value. Vue will update the view synchronously only when the state value is updated. If the state value is not changed (such as constant this.value = 123), the component’s view update will appear uncontrolled.

Why the difference between React and Vue

Because they are updated differently.

Vue: Relies on collection to update views after data is updated.

React: Updates with Render and Diff. Each update synchronizes the state value with the view.

The onChange/@input event is handled by setting the state value to a constant: setValue(123)/this.value = 123.

Vue: Hey, the status is not updated, so don’t update the view.

React: well? The state is this, the view renders that, what the hell, sync! Change the value on the view to the state value.

summary

  1. The key point of the controlled component is that the update of the state value synchronizes the update of the view. Under certain conditions, the value of the component is identical to the state value.
  2. ReactThe state value is strongly bound to the view, and the component value is equal to the state value.
  3. VueThe update of the state value must synchronize the update of the view, and the component value is equal to the state value; However, in special cases where views are updated (for example, the view is updated but the state value remains unchanged), the component value is not equal to the state value;
  4. React 和 VueControlled components perform slightly differently because of their different update methods,VueUpdate the view by focusing on updates to state values, whileReactState values are forced to stay in sync with the view.