Sabemos que los componentes de reacción son los bloques de construcción que se pueden reutilizar una y otra vez en la construcción de la interfaz de usuario. Antes de pasar a la principal diferencia entre el estado y los accesorios, veamos cómo un componente en reaccionar se relaciona con una función normal en javascript
. Ejemplo:
javascript
// simple component
class FakeComponent extends React.component{
render(){
return <div>Hello World!</div>
}
}
// simple javascript function
const FakeFunction = () => console.log('Hello World!');
En el código anterior, declaramos un componente de reacción simple extendiendo el método nativo React.component y luego simplemente representamos un div que contiene ‘Hello World’ en su interior como texto. Después de la función, tenemos una función javascript simple en su interior que contiene un archivo console.log simple que hace lo mismo en su interior, imprimiendo ‘¡Hola mundo!’.
Entonces ahora sabemos que un componente React funciona de manera similar a una función javascript normal. Echemos un vistazo al estado
Estado
Un estado es una variable que existe dentro de un componente, a la que no se puede acceder ni modificar fuera del componente y solo se puede usar dentro del componente. Funciona de manera muy similar a una variable que se declara dentro de una función a la que no se puede acceder fuera del alcance de la función en javascript normal . Estado Puede modificarse usando this.setState. El estado puede ser asíncrono . Cada vez que se usa this.setState para cambiar la clase de estado se vuelve a representar. Veamos con la ayuda un ejemplo:
Ejemplo:
javascript
// component
class FakeComponent extends React.component{
state = {
name : 'Mukul';
}
render(){
return <div>Hello {this.state.name}</div>
}
}
// simple js function
const FakeFunction = () => {
let name = 'Mukul';
console.log(`Hey ${name}`);
}
En el código anterior, simplemente declaramos una propiedad de nombre dentro de un componente y la usamos durante el renderizado, similar es el caso con una función normal en javascript. También se debe tener en cuenta que el estado es de naturaleza mutable y no se debe acceder a él desde componentes secundarios.
Accesorios
Sabemos que los componentes en React se usan una y otra vez en la interfaz de usuario, pero normalmente no representamos el mismo componente con los mismos datos. A veces necesitamos cambiar el contenido dentro de un componente. Los accesorios entran en juego en estos casos, ya que se pasan al componente y al usuario. Veamos cómo funcionan:
Ejemplo:
javascript
// component
class FakeComponent extends React.component{
render(){
return <div>Hello {this.props.name}</div>
}
}
// passing the props
<FakeComponent name='Mukul' />
<FakeComponent name='Mayank' />
Un componente simple y luego pasamos los accesorios como atributos y luego accedemos a ellos dentro de nuestro componente usando this.props . Entonces, props hace que los componentes sean reutilizables al darles la capacidad de recibir datos del componente principal en forma de accesorios. Son inmutables .