Qual a diferença entre state e props no React

Eu estava fazendo umas aulas online de React e o instrutor disse que props não devem ser alterados. Agora estou lendo um artigo que diz que tanto props quanto state são gatilhos para renderizar uma atualização na página em React.

Isso tudo me deixou confuso e queria saber quando uso props e quando uso state e se props é imutável ou não. Alguém poderia me ajudar?

Props e state estão relacionados. A diferença entre state e props no React é que o state de um componente frequentemente se tornará props de um componente filho. Os props são passados ​​para o filho dentro do método de renderização do pai como o segundo argumento de React.createElement() ou através de tags, se tiver usando JSX, por exemplo:

<ClassePai name={this.state.nomeFilho} />

O valor de state de nomeFilho da classe pai se torna this.props.nomeFilho para a classe filho. Da perspectiva da classe filho, a prop de name é imutável e, caso precise ser mudada, é preciso ser feito através da classe pai e então o React vai propagar a mudança para a classe filho. Exemplo:

this.setState({ nomeFilho: 'Novo nome' });

Então, para mudar o prop da classe filho dinamicamente, é necessário usar eventos para a classe filho e callbacks para a classe pai. Digamos que existe um evento na classe filho chamando onNomeChanged, então a classe pai teria uma callback para captar essa alteração no valor de nome:

<ClassePai name={this.state.nomeFilho} onNomeChanged={this.handleNome} />

A classe filho passa o novo nome como argumento para o evento callback chamando, por exemplo this.props.onNomeChanged('Novo nome') e a classe pai usaria o nome no event handler para atualizar seu estado.

handleName: function(novoNome) {
   this.setState({ nomeFilho: novoNome });
}

Resumindo, a diferença entre state e props no React é a seguinte:

  • Use state para armazenar os dados de que sua página atual precisa no controller ou view. State é mutável.
  • Use props para passar dados e event handlers para seus componentes filhos. Props são imutáveis