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
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触发视图的重新渲染，完成表单组件值得更新。
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})}}
>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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
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
How to build a reliable messaging app with React and RabbitMQ
Sep 28, 2023 pm 08:24 PM
How to build a reliable messaging application with React and RabbitMQ Introduction: Modern applications need to support reliable messaging to achieve features such as real-time updates and data synchronization. React is a popular JavaScript library for building user interfaces, while RabbitMQ is a reliable messaging middleware. This article will introduce how to combine React and RabbitMQ to build a reliable messaging application, and provide specific code examples. RabbitMQ overview:
React Router User Guide: How to implement front-end routing control
Sep 29, 2023 pm 05:45 PM
ReactRouter User Guide: How to Implement Front-End Routing Control With the popularity of single-page applications, front-end routing has become an important part that cannot be ignored. As the most popular routing library in the React ecosystem, ReactRouter provides rich functions and easy-to-use APIs, making the implementation of front-end routing very simple and flexible. This article will introduce how to use ReactRouter and provide some specific code examples. To install ReactRouter first, we need
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
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
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
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.
How to use React to develop a responsive backend management system
Sep 28, 2023 pm 04:55 PM
How to use React to develop a responsive backend management system. With the rapid development of the Internet, more and more companies and organizations need an efficient, flexible, and easy-to-manage backend management system to handle daily operations. As one of the most popular JavaScript libraries currently, React provides a concise, efficient and maintainable way to build user interfaces. This article will introduce how to use React to develop a responsive backend management system and give specific code examples. Create a React project first
