Vamos entender de uma vez por todas qual a diferença entre as PROPS e STATES.
De uma maneira bem resumida podemos dizer que em um componente:
- props : São variáveis passadas para ele ou recebidas por seu componente pai.
Por exemplo, um componente pai pode incluir um componente filho chamando:
<Filmes />O pai pode passar um prop usando esta sintaxe:
<Filmes nome="Vingadores"/>Agora no componente Filmes dentro do construtor ChildComponent, podemos acessar o prop:
class Filmes extends React.Component {
constructor(props) {
super(props)
console.log(props.nome)
}
}E qualquer metodo/função usado nessa classe pode acessar essa prop através de this.props.
Mas devemos sempre lembrar que as props são valores estáticos, não podemos alterar ela.
- States: Já as states são valores dinamicos. Ou seja conseguimos alterar o valor (estado) dentro dela.
As states do componente são iniciacializadas dentro de um construtor:
class Filmes extends React.Component {
constructor(props) {
super(props)
this.state = {
nome: 'Homem Aranha'
};
}
render () {
return (
<p>Nome do Filme: { this.state.nome } </ p>
)
}Você nunca deve alterar diretamente o valor dessa state: (Exemplo)
this.state.nome = ‘Outro Nome’;
Você nunca deve fazer da forma acima.. As states podem serem alteradas usando a função setState() , vamos ao exemplo:
class Filmes extends React.Component {
constructor(props) {
super(props)
this.state = {
nome: 'Homem Aranha'
};
this.mudaNome() = this.mudaNome.bind(this);
}
mudaNome() {
this.setState ({nome: 'Toy Story'});
}
render () {
return (
<button onClick = {this.mudaNome}> Mudar </ button>
<p> {this.state.nome} </ p>
)
}
Show de bola agora!! Por hoje é isso, você entendeu qual a diferença de props e states no React.
Agora só partir pro código 🙂
