Table of Contents
In this article, we will share with you a detailed explanation of examples of controlled components and uncontrolled components in React. Before the detailed explanation, we will briefly introduce what controlled components and uncontrolled components are, hoping to help everyone.
Controlled component
Uncontrolled component
Comparing controlled components and uncontrolled components
Home Web Front-end JS Tutorial Detailed explanation of controlled and uncontrolled component instances in React

Detailed explanation of controlled and uncontrolled component instances in React

Jan 29, 2018 pm 01:22 PM
react components

In this article, we will share with you a detailed explanation of examples of controlled components and uncontrolled components in React. Before the detailed explanation, we will briefly introduce what controlled components and uncontrolled components are, hoping to help everyone.

Controlled component

In React, whenever the state of the form changes, it will be written to the state of the component. This kind of component is called controlled component in React. Control component. In a controlled component, the component's rendering state corresponds to its value or checked. React eliminates the local state of components in this way. React officially recommends using controlled components.

Controlled component update state process:

1. 可以通过在初始state中设置表单的默认值。
2. 每当表单的值发生变化时,调用onChange事件处理器。
3. 事件处理器通过合成事件对象e拿到改变后的状态,并更新state。
4. setState触发视图的重新渲染,完成表单组件值得更新。
Copy after login

Uncontrolled component

Simply put, if a form component does not have value props (corresponding to radio buttons and check boxes (are checked props) can be called uncontrolled components. In this way, we can use defaultValue and defaultChecked to represent the default state of the component.

In React, an uncontrolled component is an anti-pattern. Its value is not controlled by the component's own state or props. It is usually necessary to add a ref prop to access the rendered underlying DOM. element.

Comparing controlled components and uncontrolled components

We just saw that the default value of the form is set through defaultValue or defaultChecked. It will only be rendered once. It has no effect on subsequent renderings.

<input
    value={this.state.value}
    onChange={(e) => this.setState({value: e.target.value})}
>

<input 
    defaultValue={this.state.value}
    onChange={e => {this.setState({value: e.target.value})}}
>
Copy after login

In the controlled component, the content entered with the book can be output and displayed, while in the uncontrolled component, if the onChange event is not bound, nothing we input in the text box will be displayed. Will show. You can see that the biggest difference between controlled components and uncontrolled components is that the state of uncontrolled components is not controlled by the application state. There are also local component states in the application, and the value of the controlled component comes from state.

  • Performance issues

In controlled components, every time the value of the form changes, Calling the onChange time processor once will cause some performance consumption. However, it is not recommended to use controlled components in React. This problem can be achieved through the redux application architecture to achieve state unification.

Related recommendations:

React component life cycle instance analysis

What is the life cycle function of React component

The most complete way to build React components

The above is the detailed content of Detailed explanation of controlled and uncontrolled component instances in React. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1671
14
PHP Tutorial
1276
29
C# Tutorial
1256
24
How to install the Windows 10 old version component DirectPlay How to install the Windows 10 old version component DirectPlay Dec 28, 2023 pm 03:43 PM

Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box

PHP, Vue and React: How to choose the most suitable front-end framework? PHP, Vue and React: How to choose the most suitable front-end framework? Mar 15, 2024 pm 05:48 PM

PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.

Angular components and their display properties: understanding non-block default values Angular components and their display properties: understanding non-block default values Mar 15, 2024 pm 04:51 PM

The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.

How to open the settings of the old version of win10 components How to open the settings of the old version of win10 components Dec 22, 2023 am 08:45 AM

Win10 old version components need to be turned on by users themselves in the settings, because many components are usually closed by default. First we need to enter the settings. The operation is very simple. Just follow the steps below. Where are the win10 old version components? Open 1. Click Start, then click "Win System" 2. Click to enter the Control Panel 3. Then click the program below 4. Click "Enable or turn off Win functions" 5. Here you can choose what you want to open

Integration of Java framework and front-end React framework Integration of Java framework and front-end React framework Jun 01, 2024 pm 03:16 PM

Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.

Vue.js vs. React: Project-Specific Considerations Vue.js vs. React: Project-Specific Considerations Apr 09, 2025 am 12:01 AM

Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.

Vue component development: Pop-up component implementation method Vue component development: Pop-up component implementation method Nov 24, 2023 am 09:28 AM

Vue component development: pop-up component implementation method Introduction: In front-end development, pop-up component is a common and important component type. It can be used to display interactive content such as prompt information, confirmation or input boxes on web pages. This article will introduce how to use the Vue framework to develop a simple pop-up component and provide specific code examples. 1. Component structure design When designing the structure of the pop-up window component, we need to consider the following elements: Pop-up window title: used to display the title information of the pop-up window. Pop-up window content: used to display the specific content of the pop-up window. bomb

React's Role in HTML: Enhancing User Experience React's Role in HTML: Enhancing User Experience Apr 09, 2025 am 12:11 AM

React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.

See all articles