Qual a diferença entre props
e state
em react.js, qual as diferenças e como devem ser usados?
1 Resposta
De maneira resumida pode dizer-se:
props
- valores herdadosstate
- valores internos do componente
O conceito é: state
deve servir para guardar valores/estados da aplicação que mudam com o uso da mesma, para guardar uma alteração de estado que pode ter efeito na renderização do próprio componente, ser passado a um componente filho como prop
, ou que deve ser passado a algo externo à aplicação. As props
são valores estáticos, ou que no contexto de um Componente sejam estáticos, daí serem props
e não state
para separar conceptualmente.
state
pode ser importado de props
dentro do Componente, mas não pode ser herdado do componente pai.
Exemplo:
class Mostrador extends React.Component {
render() {
const frase = this.props.valor ? 'O valor escolhido foi o ' : '...nenhum valor escolhido...';
return (
<p>
{frase}
<span>{this.props.valor || ''}</span>
</p>
);
}
}
class Botao extends React.Component {
render() {
return (
<button type="button" onClick={this.props.onButtonClick.bind(this.props.nr)}>
{"Eu sou o botão nr: " + this.props.nr}
</button>
);
}
}
class App extends React.Component {
constructor(){
super();
this.state = {
escolhido: 0
}
}
handleClick(nr) {
this.setState({escolhido: nr});
}
render() {
const botoes = [1, 2, 3, 4].map(
nr => (<Botao key={nr} nr={nr} onButtonClick={this.handleClick.bind(this, nr)}/>)
);
return (
<div>
<h1>Clica nos botões!</h1>
<section>
{botoes}
</section>
<section>
<Mostrador valor={this.state.escolhido} />
</section>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
html,
body {
height: 100%;
}
body {
background: #333;
display: flex;
justify-content: center;
align-items: center;
font-family: Helvetica Neue;
}
h1 {
font-size: 2em;
color: #eee;
display: inline-block;
text-align: center;
width: 100%;
}
button {
margin: 5px;
padding: 5px;
}
p {
margin-top: 1em;
text-align: center;
color: #aaa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></app>
A lógica do exemplo é:
- Componente pai (
App
) - n botões
- mostrador
O componente pai App
funciona como controlador. Ele guarda no seu state
o estado de qual o numero escolhido, e tem também a função chamada quando o botão é clicado. O state
é dinamico pois muda de valor cada vez que um botão fôr clicado.
O componente Botao
é um simples botão. Ele não herda nada do state
de App
. o numero que lhe corresponde é guardado diretamente no .bind()
da função handleClick
. A unica coisa que ele herda é um ponteiro para a função a ser chamada quando ele receber um clique.
O componente Mostrador
herda o state
de App
, e usa-o internamente como prop
. Assim, cada vêz que o state
de App
mudar, o react.js chama o render()
de App
que passa o state.escolhido
ao Mostrador
como prop
, prop.valor
. Esse numero é então usado no .render()
de Mostrador
.
Notas:
a) Em casos onde os dados da aplicação sejam geridos externamente (por biblioteca externa como MobX ou variantes de Flux) o state
deve limitar-se a ações e mudanças de estado de UI, e não de dados da aplicação.
b) É possivel setar o state de fora do Componente mas é anti-padrão, por isso não refiro no exemplo.