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, only The current component will be encapsulated as an uncontrolled component when it is only used for display purposes and does not make any difference.
The operating environment of this tutorial: Windows 10 system, react version 17.0.1, Dell G3 computer.
What is an uncontrolled component?
We start with two words, that is, component. Controlled and uncontrolled are concepts from the perspective of components. The literal meaning is that components are not controlled, not controlled by anyone, of course not by the parent component. Control, 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 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 value entered using
Example
import React, { Component } from 'react';import ReactDOM from 'react-dom';class Demo1 extends Component { render() { return ( <input /> //<ABC /> ) }}ReactDOM.render(<Demo1 />, document.getElementById('content'))Explanation of uncontrolled components
Since an uncontrolled component is a component that has no intersection with the outside world, then we can no longer use uncontrolled components. The answer is no. We can actually use uncontrolled components in certain circumstances.
Carousel component (uncontrolled), 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 it? It is not necessary to interact with the outside world, so when the carousel component we write is hard-coded regardless of how the current carousel graph runs, including click events, carousel time and other conditions, then the carousel component is an uncontrolled component. , of course, this example is 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 separate files. The performance may be better after packaging. But if a certain page in our project is a static page, will we use it? The pages displayed by our uncontrolled components have no encapsulation and can only be customized pages. When our page components exist alone, they are uncontrolled components.
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 we encapsulate the component, it will only be used when the current component is only for display purposes and there is no difference. Encapsulated as an uncontrolled component
Expand your knowledge:
What is a controlled component?
This is the opposite of an uncontrolled component. It literally means a component that is controlled by a parent component. It is called a controlled component.
How the parent component controls the child component is of course controlled by passing values. When the props value is used by the child component, and 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 components controlled by parent components
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='123' /> <input type="text" value={this.state.val} onChange={this.handleChange} /> //Input is a controlled component controlled by the properties of the state object</ div> ) }}ReactDOM.render(<Input/>,window.app)We should not regard input as an input component. We should regard input as any component that we reference or encapsulate ourselves. After this component is passed a value by us, even if it is a fixed string passed by us, it is still essentially the same as the input component. Controlled components, controlled components do not look at whether there is two-way binding of data, but whether it is controlled in nature. When we pass a fixed value, the value of the input component is fixed and cannot be modified, although we pass props is a hard-coded value, but this value still controls the input component.
Explanation of controlled components
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, and our js handles logic most of the time. , then 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 way for us to control the component.
Two-way binding of data: In fact, when we pass any value or attribute to value, the meaning of the component has been changed into a controlled component, but when we bind onChange, a data change is given to our component through onChange. In the callback method, we change the data through setState to re-render. This is the two-way binding of data. Data drives the view, and the view drives the 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, a completely independent component can be seen As an uncontrolled component, all other components are controlled