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.