14

Qual a diferença entre props e state em , qual as diferenças e como devem ser usados?

0

1 Resposta 1

16

De maneira resumida pode dizer-se:

  • props - valores herdados
  • state - 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 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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .