¿Cuáles son las diferencias entre props y state?

¿Alguna vez te has preguntado cómo podemos pasar los datos entre los componentes en ReactJS? Podemos pasar los datos entre los componentes usando Props y State. Entonces, háganos saber cómo podemos pasar los datos usando accesorios y estado y comprender la diferencia entre los dos.

Aprenderemos sobre accesorios y estado con la ayuda de un proyecto de ejemplo en ReactJS.

Pasos para crear un proyecto React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

 

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto:

Estructura del proyecto

Accesorios: los accesorios se conocen como propiedades que se pueden usar para pasar datos de un componente a otro. Los accesorios no se pueden modificar, son de solo lectura e inmutables.

Ejemplo: Modifique el código predeterminado con el siguiente código. 

import Fruit from './Fruit'
function App() {
    
  const fruits=
    {
    name:"Mango",
    color:"Yellow"
    }
  
  return (
    <div className="App">
      <Fruit fruits={fruits} />
    </div>
  );
}
  
export default App;

.App{
  text-align: center;
    
}

Cree un componente conocido como Fruit.js y agregue el siguiente código

import React from "react"
  
const Fruit =(props) =>{
  
   return(
       <div className="fruit">
           <h1>List of Fruits</h1>
           <p>Name: {props.fruits.name}</p>
           <p>Color: {props.fruits.color}</p>
       </div>  
   )
}
  
export default Fruit;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm startOutput:

El siguiente será el resultado cuando ejecutemos el comando anterior. Los datos se pasarán del componente principal, es decir, App.js, al componente secundario, es decir, Fruit.js, con el uso de la función » Accesorios «. 

Estado: el estado representa partes de una aplicación que pueden cambiar. Cada componente puede tener su Estado. El estado es mutable y es local solo para el componente.

Ejemplo: Vamos a crear un componente de Clase llamado Car.js dentro del mismo proyecto “frutas” .

Agregue el siguiente código en el componente Car.js.

import React, {Component} from "react"
  
class Car extends Component{
    constructor() {
        super()
        this.state={
            car: 'Ferrari'
        }
    }
  
    changeMessage() {
        this.setState({
            car: 'Jaguar'
        })
    }
  
      
  
  
    render() {
        return (
            <div className="App">
                <h1>{this.state.car}</h1>
                <button onClick={() => this.changeMessage()}>
                  Change
                </button>  
            </div>
          
        )
    }
}
  
export default Car

import './App.css';
import Fruit from './Fruit'
import Car from './Car';
  
function App() {
    
  const fruits=
    {
    name:"Mango",
    color:"Yellow"
    }
  
  return (
    <div className="App">
      <Fruit fruits={fruits} />
      <hr></hr>
      <Car />
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

El siguiente será el resultado cuando ejecutemos el comando anterior. Los datos son locales solo para el componente «Automóvil» y se pueden actualizar usando el botón de cambio en la pantalla.

Diferencia entre accesorios y estado:

Puntos discutidos:

1. Los accesorios se utilizan para pasar datos de un componente a otro.
2. El estado es un almacenamiento de datos local que es local solo para el componente y no se puede pasar a otros componentes.
3. La propiedad this.setState se usa para actualizar los valores de estado en el componente.