Qual a diferença entre Props e State?

Perguntado por: usalazar2 . Última atualização: 21 de janeiro de 2023
4.6 / 5 18 votos

A grande diferença entre props e state é que adereços que você passa para um componente e o state é tratado dentro desse componente. Os props são tratados fora do componente no exemplo de nossa aplicação de contador. A contagem de atualizações é controlada dentro do estado.

Props, que é uma abreviação de properties, ou propriedades, são informações que podem ser passadas para um componente. Pode ser uma string, um número, até mesmo uma função. Este valor pode então ser utilizado pelo componente que a recebe.

Para utilizar um state, você precisa importar o hook useState do react, e precisa executá-lo dentro do seu componente, passando um valor inicial. No exemplo abaixo nós inicializamos nosso state com o valor null. Ao executar o hook useState, você receberá um array com dois items: O valor atual do seu state.

state substantivo modificador
I went to a state school, not a private school. Eu estudei em uma escola estadual, não em uma particular. Our team won the final and became state champion. O nosso time venceu a final e se tornou campeão estadual.

O estado inicial do componente é definido no seu construtor, então vamos dizer que o estado inicial do nosso App é com o visor é “inativo”, e quando clicarmos no botão do centro da Pokédex, o estado deve mudar para “ativo”, e então adicionamos o tamanho de 420px a div “visor”.

Pilares do React
Para entender e usar o React, basicamente precisamos entender os 4 pilares principais: states, props, render e o lifecycle. Vamos explanar um pouco cada um desses pilares.

Como passar dados entre um componente filho e um componente pai. Isso já é um pouco mais complicado. Primeiro, você precisa criar uma função no componente pai chamada childToParent e um estado vazio chamado data . Em seguida, passe a função childToParent como prop para o componente filho.

Prop drilling é um estágio do desenvolvimento que acontece quando precisamos obter dados que estão em várias camadas na árvore de componente react. Vamos ver esse conceito funcionando na prática, passando props de um componente para outro.

Props é o termo utilizado para se referir aos objetos que se encontram na ação descrita no roteiro, ou objetos pessoais da personagem.

Props é um atributo Vuejs personalizado para passar dados de componentes pais para filhos. Isso é muito importante para lembrar: você não poderá compartilhar dados entre componentes usando props, a menos que sua intenção seja passar os dados de um componente pai para um componente filho.

Para executar a checagem de tipos nas props para um componente, você pode atribuir à propriedade em especial propTypes : import PropTypes from 'prop-types'; class Greeting extends React. Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } Greeting.

O que é o useEffect? O useEffect é um hook do React. Ele permite você execute efeitos colaterais no seu código. Mas o que seriam esses efeitos colaterais? Buscar dados de uma API, mudar a DOM, ou configurar uma subscription, por exemplo, são algumas opções de efeitos colaterais no seu código.

Para entender como as props funcionam, vou usar dois exemplos de funções: uma função que recebe dois números e retorna a soma destes. E uma função que recebe duas entradas numéricas, onde ele altera o valor da primeira entrada subtraindo pelo valor da segunda.

Curso React - Redux e Redux-Saga
Ele basicamente tira a responsabilidade de cada um dos componentes de armazenar os estados, deixando tudo isso centralizado, sendo utilizado ao mesmo tempo por todos os componentes de forma compartilhada. Ele também roda em diferentes ambientes como servidor, cliente e nativo.