Diferença entre estado e props
Props (Propriedades)
Transmissão de dados
As props são utilizadas para transmitir dados de um componente pai para seus componentes filhos. Elas são passadas como atributos durante a criação dos componentes e acessadas como parâmetros nas funções destes.
<MeuComponente nome="Alice" idade={25} />Somente leitura
As props são concebidas como informações de apenas leitura. Componentes filhos não podem modificar diretamente as props recebidas, garantindo uma abordagem unidirecional na comunicação entre componentes.
const MeuComponente = (props) => {
return <p>{`Nome: ${props.nome}, Idade: ${props.idade}`}</p>;
};Imutabilidade
As props são imutáveis. Uma vez definidas, não podem ser alteradas pelo componente filho. Se houver a necessidade de modificar o estado, isso geralmente é feito por meio de eventos ou chamadas de função passadas como props.
Estado (State)
Gerenciamento interno
O estado é utilizado para gerenciar dados internos de um componente. Ao contrário das props, o estado é controlado e mantido pelo próprio componente. Ele é inicializado no construtor e pode ser atualizado usando o método setState().
Nota
Lembrando que caso haja alteração no valor de um estado, isso reflete em uma nova renderização do componente na página, diferentemente das props.
constructor(props) {
super(props);
this.state = {
contador: 0,
};
}Mutabilidade
O estado é mutável. O componente pode atualizar seu estado por meio do método setState(), que notifica o React sobre a necessidade de re-renderização. Isso permite que os componentes reajam a eventos ou ações do usuário.
// Atualização do Estado
this.setState({ contador: this.state.contador + 1 });