No me queda claro la diferencia entre estos, solo se que el estado es aquel que puede mutar y props son las propiedades del estado? me podrian ayudar con algun ejemplo o algo parecido, gracias !
2 respuestas
Veo que los props no son estados son componentes que se utilizan en la aplicación Segun la documentación oficial dice esto: [Props
Las propiedades de un componente se pueden definir como los atributos de configuración para dicho componente. Son recibidos desde un nivel superior (normalmente al instanciar el componente) y por definición son inmutables, es decir, un componente no puede cambiar sus propias props.
Existen varias formas de pasar props a un componente.
// Regular way ;
// Spread attributes let props = {}; props.foo = x; props.baz = y; ;
// Combined way ;
State
Podríamos definirlo como una representación del componente en un punto en el tiempo, una instantánea del componente. El state de un componente se iniciará con un valor por defecto pero este valor si podrá mutar durante la vida del componente.
No tenemos porque definir estados para un componente, son opcionales, y al contrario que ocurre con las props, un componente puede gestionar su propio state. Pero debemos ser cautos a la hora de utilizar estados ya que su uso, citando a la propia docu, aumenta la complejidad y reduce la previsibilidad. Se debe evitar tener demasiados componentes con estados, sobre todo tratándose de aplicaciones grandes.
“Try to keep as many of your components as possible stateless”
La manera habitual de informar a un componente React que sus datos han cambiado, es a través de la llamada al método setState(). Este método recibe un objeto JavaScript plano, combina los nuevos datos en el state y re-renderizará el componente. Cuando el render finalize se ejecutará un callback si ha sido especificado.
this.setState( { key: 'value' } );
Otro método relacionado con el estado de los componentes es replaceState. Poco que contar de el, tan solo que es similar a setState pero este eliminará cualquier clave preexistente que no esté definida en el nuevo estado.
Nota: Este método no está disponible en la sintaxis de clase de ES6 y puede ser eliminado en futuras versiones de React.]1
-
muchas gracias por la informacion, te agradezco! me quedo mas claro el 13 oct. 2017 a las 22:16
Los props lo podemos utilizar para acceder a las propiedades pero no puedes cambiar su valor=estado
Nota: uso Babel
ejemplo de PROPS:
<body>
<script type="text/babel">
var Movie = React.createClass({
render: function () {
return(
<div>
<h1>{this.props.titulo}</h1>
<h1>{this.props.genero}</h1>
</div>
);
}
});
ReactDOM.render(<Movie titulo="Mi titulo" genero="Masculino" />, document.getElementById('app'));
<script>
</body>
ejemplo de states
<body>
<script type="text/babel">
var CheckBox = React.createClass({
//obtengo el estado del checkbok
getInitialState : function(){
return {checked: !this.state.checked}
},
handleChecked: function (){
//cambio el estado
this.setState({checked: !this.state.checked})
},
render: function () {
var mensajito;
// valido el estado del checkbox
if(this.state.checked){
mensajito = 'checado';
}else{
mensajito = 'no checado';
}
return(
<div>
/* aqui es donde cambio el estado del checkbox y le pongo por default checked */
<inpit type="checkbox" onchange={this.handleCheked} defaultCheked={state.cheked} />
<h1> el checkbox esta {mensajito} </h1>
</div>
);
}
});
ReactDOM.render(<CheckBox />, document.getElementById('app'));
<script>
</body>
Conclusion los estados pueden cambiar!! si usas props y quieres que un botón cambie de color cada vez que le das clic no se podría con state puedes hacer que cambie el estado del botón cada vez que le dan clic.