What does react uncontrolled component mean?

In react, an uncontrolled component is a component that is not controlled by its parent component; an uncontrolled component is an independent component that does not need to pass a value and does not have any intersection with the parent component of the current component. When encapsulating a component, it will be encapsulated as an uncontrolled component only if the current component is only for display purposes and does not make any difference.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What does react uncontrolled component mean?

What is uncontrolled component

We start with two words, that is component, subject Controlled and uncontrolled are concepts from the perspective of components. The literal meaning is that a component is not controlled. It is not controlled by anyone. Of course, it is not controlled by the parent component. So what are the characteristics of uncontrolled components? That is, all logic is only related to itself, and has no communication or intersection with other components

In HTML, form elements like,, and will maintain their own state and update based on user input. But in React, these components are all uncontrolled components without processing, because when you actually use them, you will find that these components will not automatically update the value. The value we input without any processing is Unable to get the

Example

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Demo1 extends Component {
    render() {
        return (
            <input />
            //<ABC />
        )
    }
}
ReactDOM.render(<Demo1/>, document.getElementById(&#39;content&#39;))

Explanation of uncontrolled component

Since the uncontrolled component is a component that has no connection with the outside world Any intersecting components, then we won’t be able to use uncontrolled components. The answer is no. In certain circumstances, we actually use the

carousel component of uncontrolled components (non-controlled components). Controlled), think about if our page needs a carousel component, and the component is only used once and is not intended to be reused. We put the carousel code into a carousel component. Does the carousel component need to interact with the outside world? No, then when the carousel component we write is hard-coded regardless of how the current carousel image runs, including click events, carousel time and other conditions, then the carousel component is an uncontrolled component. Of course, this example It's a bit far-fetched. When we make components, we must want a universal and reusable component. We need to know the current status of the carousel, which will cause our uncontrolled components to no longer be applicable

Static page development. When developing static pages, we usually do not use frameworks and only use HTML to write files separately. The performance may be better after packaging, but if a certain page in our project is a static page, should we use When it comes to our uncontrolled components, the displayed pages have no encapsulation and can only be customized pages. Then when our page components exist alone, they are uncontrolled components

Uncontrolled component is an independent component that does not need to pass a value and has no intersection with the parent component of the current component. When we encapsulate the component, it is only used when the current component is only for display purposes and has no difference. Will be encapsulated as an uncontrolled component

Extended knowledge:

What is a controlled component

This is what we On the contrary to uncontrolled components, components that are controlled by the parent component are called controlled components.

How the parent component controls the child component is, of course, passed The value is controlled, and the props value is used by the child component, and when the content or method or display result of the child component is changed due to the value passed by the parent component, the child component is a controlled component controlled by the parent component

Example

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
class Input extends Component{
    constructor(){
        super();
        this.state = {val:''};
    }
    handleChange=(event)=>{
        let val = event.target.value;
        this.setState({val})
    }
    render(){
        return (
            <div>
                <p>{this.state.val}</p>
                //<input type="text" value=&#39;123&#39; />
                <input type="text" value={this.state.val} onChange={this.handleChange} /> //input就是受控组件 被状态对象的属性控制
            </div> 
        )
    }
}
ReactDOM.render(<Input/>,window.app)

We don’t think of input as an input component. We want to think of input as any component that we reference or encapsulate ourselves. When this component is passed a value by us, even if it is fixed by us Strings are still essentially controlled components. Controlled components do not look at whether there is two-way binding of data, but whether they are controlled in nature. When we pass a fixed value, the value of the input component is fixed. , cannot be modified. Although we passed the hard-coded value when passing props, this value still controls the input component.

Explanation of controlled components

Subject to Controlled components actually appear in every aspect of our programming. Any component we take out alone is most likely a controlled component. After all, the demand for static pages is still small. Our js handles logic most of the time. The logic must be interactive

For example, the above inpu component code is equivalent to the textarea and select components. We all need to pass some parameters (props) to inform the specific rendering rules and display content of the component. , for example, the type attribute is also a two-way binding of

data that we use to control components: In fact, when we pass any value or attribute to value, we have already changed the meaning of the component into controlled component, but when we bind onChange, onChange gives our component a callback method when the data changes. In the callback method, we change the data through setState to re-render the render. This is two-way binding of data. Yes, data-driven view, view-driven data

Summary: Controlled components and uncontrolled components are a concept that indicates whether the current component is controlled and whether it is a separate component that has no interaction with other content. Simply put, it is a completely independent component. It can be regarded as an uncontrolled component, and other controlled components

[Related recommendations: javascript video tutorial, web front-end]

The above is the detailed content of What does react uncontrolled component mean?. For more information, please follow other related articles on the PHP Chinese website!