current position:Home>Difference between controlled components and uncontrolled components in react

Difference between controlled components and uncontrolled components in react

2022-05-15 02:05:18ALKEN ABBY

React in The difference between controlled and uncontrolled components

Broadly speaking :

react Whether the data rendering of the component is passed by the caller props Complete control of , Control is a controlled component , Otherwise, it is an uncontrolled component

Uncontrolled components :

Uncontrolled components will have real data DOM In nodes , So when using uncontrolled components , Sometimes it's easier to integrate at the same time React and Not React Code , If you don't mind the beauty of the code , And want to write code quickly , Using uncontrolled components can often reduce the amount of your code , otherwise , Use controlled components

Uncontrolled methods can simplify code , The comparison is applicable to the data processing of this component , If it is related to the data to be transmitted , Where... Will not be called again setState function , The updated value will not be passed to , defective

Controlled components :

 Insert picture description here

Code example :

Uncontrolled components :

import React, {
    Component} from 'react';

//  This section is mainly about   Use ref  To get the value in the form , It's an uncontrolled way 
//  Feeling  DOM Operation and  react  Operations are mixed together 

class UnControl extends Component {
    
  myusername=React.createRef();
;  render() {
    
    return (
        <div>
          <h1> The login page </h1>
          {
    /* demand : Give Way  input  The box has default values */}
          <input type="text" ref={
    this.myusername} defaultValue=" Ha ha ha ha "/>

          <button onClick={
    ()=>{
    
            console.log(this.myusername.current.value)
          }}> Sign in </button>

          <button onClick={
    ()=>{
    
            this.myusername.current.value=""
          }}> Reset </button>

        </div>
    );
  }
}

export default UnControl;

Controlled components :

import React, {
    Component} from 'react';

//  The controlled component is to put   The value of the input box is represented by a status  username  To save 

class ControlComponent extends Component {
    

  state = {
    
    username: ' Ha ha ha '
  }

  render() {
    
    return (
        <div>
          <h1> The login page </h1>
          {
    /* demand : Give Way  input  The box has default values */}
          {
    /*value  It's controlled ,onChange  and  onInput  It's the same effect */}
          <input type="text" value={
    this.state.username} onChange={
    (evt) => {
    
            // console.log(evt.target.value);
            this.setState({
    
              username: evt.target.value
            })
          }}/>

          <button onClick={
    () => {
    
            console.log(this.state.username)
          }}> Sign in 
          </button>

          <button onClick={
    () => {
    
            this.setState({
    
              username: ''
            })
          }}> Reset 
          </button>


          {
    /* The key is here :  When the controlled components transmit values , The value is responsive , Be able to pass the latest value to the sub component */}
          {
    /*<Child myvalue={this.state.username}></Child>*/}


        </div>
    );
  }
}

export default ControlComponent;

copyright notice
author[ALKEN ABBY],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120527478549.html

Random recommended