Props vs State en React

¿Cuál es la diferencia entre el estado y los accesorios en React?

En un componente de React,accesoriosson variables que le pasa su componente padre.Expresarpor otro lado, sigue siendo variable, pero directamente inicializado y administrado por el componente.

El estado se puede inicializar mediante props.

Por ejemplo, un componente padre podría incluir un componente hijo llamando

<ChildComponent />

El padre puede pasar un accesorio usando esta sintaxis:

<ChildComponent color=green />

Dentro del constructor ChildComponent podríamos acceder al prop:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    console.log(props.color)
  }
}

y cualquier otro método en esta clase puede hacer referencia a los accesorios usandothis.props.

Los accesorios se pueden usar para establecer el estado interno en función de un valor de propiedad en el constructor, así:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state.colorName = props.color
  }
}

Por supuesto, un componente también puede inicializar el estado sin mirar los accesorios.

En este caso, no hay nada útil, pero imagina hacer algo diferente en función del valor de prop, probablemente establecer un valor de estado sea lo mejor.

Los accesorios nunca deben cambiarse en un componente hijo, por lo que si sucede algo que altera alguna variable, esa variable debe pertenecer al estado del componente.

Los accesorios también se utilizan para permitir que los componentes secundarios accedan a los métodos definidos en el componente principal. Esta es una buena forma de centralizar la gestión del estado en el componente principal y evitar que los niños tengan la necesidad de tener su propio estado.

La mayoría de sus componentes solo mostrarán algún tipo de información basada en los accesorios que recibieron, y permaneceránapátrida.

Descarga mi gratisReact Handbook


Más tutoriales de react:


Tech Wiki en línea!