85 lines
2.4 KiB
Markdown
85 lines
2.4 KiB
Markdown
|
---
|
|||
|
title: State vs Props
|
|||
|
localeTitle: State vs Props
|
|||
|
---
## State vs Props
|
|||
|
|
|||
|
Quando começamos a trabalhar com os componentes do React, ouvimos frequentemente dois termos. Eles são `state` e `props` . Então, neste artigo, vamos explorar o que são e como eles diferem.
|
|||
|
|
|||
|
## Estado:
|
|||
|
|
|||
|
* Estado é algo que um componente possui. Pertence àquele componente particular onde é definido. Por exemplo, a idade de uma pessoa é um estado dessa pessoa.
|
|||
|
* Estado é mutável. Mas isso pode ser alterado apenas pelo componente que o possui. Como eu só posso mudar minha idade, ninguém mais.
|
|||
|
* Você pode alterar um estado usando `this.setState()`
|
|||
|
|
|||
|
Veja o exemplo abaixo para ter uma ideia do estado:
|
|||
|
|
|||
|
#### Person.js
|
|||
|
|
|||
|
```javascript
|
|||
|
import React from 'react';
|
|||
|
|
|||
|
class Person extends React.Component{
|
|||
|
constructor(props) {
|
|||
|
super(props);
|
|||
|
this.state = {
|
|||
|
age:0
|
|||
|
this.incrementAge = this.incrementAge.bind(this)
|
|||
|
}
|
|||
|
|
|||
|
incrementAge(){
|
|||
|
this.setState({
|
|||
|
age:this.state.age + 1;
|
|||
|
});
|
|||
|
}
|
|||
|
|
|||
|
render(){
|
|||
|
return(
|
|||
|
<div>
|
|||
|
<label>My age is: {this.state.age}</label>
|
|||
|
<button onClick={this.incrementAge}>Grow me older !!<button>
|
|||
|
</div>
|
|||
|
);
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
export default Person;
|
|||
|
```
|
|||
|
|
|||
|
No exemplo acima, `age` é o estado do componente `Person` .
|
|||
|
|
|||
|
## Adereços:
|
|||
|
|
|||
|
* Adereços são semelhantes aos argumentos do método. Eles são passados para um componente onde esse componente é usado.
|
|||
|
* Adereços é imutável. Eles são somente leitura.
|
|||
|
|
|||
|
Veja o exemplo abaixo para ter uma ideia de Adereços:
|
|||
|
|
|||
|
#### Person.js
|
|||
|
|
|||
|
```javascript
|
|||
|
import React from 'react';
|
|||
|
|
|||
|
class Person extends React.Component{
|
|||
|
render(){
|
|||
|
return(
|
|||
|
<div>
|
|||
|
<label>I am a {this.props.character} person.</label>
|
|||
|
</div>
|
|||
|
);
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
export default Person;
|
|||
|
|
|||
|
const person = <Person character = "good"></Person>
|
|||
|
```
|
|||
|
|
|||
|
No exemplo acima, `const person = <Person character = "good"></Person>` estamos passando prop `character = "good"` prop para o componente `Person` .
|
|||
|
|
|||
|
Dá saída como "Eu sou uma boa pessoa", na verdade eu sou.
|
|||
|
|
|||
|
Há muito mais a aprender sobre Estado e Adereços. Muitas coisas podem ser aprendidas mergulhando na codificação. Então, sujem suas mãos codificando.
|
|||
|
|
|||
|
Procure-me no [twitter,](https://twitter.com/getifyJr) se necessário.
|
|||
|
|
|||
|
Codificação Feliz !!!
|