Qual é a diferença entre estado e adereços no React?

Eu estava assistindo a um curso da Pluralsight sobre o React e o instrutor afirmou que os adereços não deveriam ser alterados. Agora estou lendo um artigo (uberVU / react-guide) sobre adereços versus estado e diz

Ambos os adereços e alterações de estado desencadeiam uma atualização de renderização.

Mais tarde no artigo diz:

Adereços (abreviação de propriedades) são uma configuração do componente, suas opções, se você puder. Eles são recebidos de cima e imutáveis.

  • Então, adereços podem mudar, mas eles devem ser imutáveis?
  • Quando você deve usar adereços e quando você deve usar o estado?
  • Se você tem dados que um componente React precisa, ele deve ser passado através de adereços ou configuração no componente React via getInitialState ?

Adereços e estado estão relacionados. O estado de um componente muitas vezes se tornará os adereços de um componente filho. Adereços são passados ​​para o filho dentro do método de renderização do pai como o segundo argumento para React.createElement() ou, se você estiver usando JSX, os atributos de tag mais familiares.

  

O valor do estado pai de childsName se torna o childsName da criança. Do ponto de vista da criança, o nome prop é imutável. Se precisar ser alterado, o pai deve apenas alterar seu estado interno:

 this.setState({ childsName: 'New name' }); 

e Reagir irá propagá-lo para a criança por você. Uma continuação natural é: e se a criança precisar mudar seu nome? Isso geralmente é feito por meio de events filhos e retornos de chamada pai. O filho pode expor um evento chamado, por exemplo, onNameChanged . O pai então assinaria o evento passando um manipulador de retorno de chamada.

  

O filho passaria seu novo nome solicitado como um argumento para o callback do evento chamando, por exemplo, this.props.onNameChanged('New name') , e o pai usaria o nome no manipulador de events para atualizar seu estado.

 handleName: function(newName) { this.setState({ childsName: newName }); } 

Para comunicação pai-filho, simplesmente passe adereços.

Use o estado para armazenar os dados que sua página atual precisa em sua exibição de controlador.

Use adereços para passar os manipuladores de dados e events para os componentes filhos.

Essas listas devem ajudar a guiá-lo ao trabalhar com dados em seus componentes.

Adereços

  • são imutáveis
    • que permite ao React fazer verificações de referência rápida
  • são usados ​​para transmitir dados do seu controlador de visualização
    • seu componente de nível superior
  • ter melhor desempenho
    • use isso para passar dados para componentes filhos

Estado

  • deve ser gerenciado no seu controlador de visualização
    • seu componente de nível superior
  • é mutável
  • tem pior desempenho
  • não deve ser acessado de componentes filhos
    • passá-lo para baixo com adereços em vez

Para comunicação entre dois componentes que não têm um relacionamento pai-filho, você pode configurar seu próprio sistema de events global. Inscreva-se em events em componentDidMount (), cancele a inscrição em componentWillUnmount () e chame setState () ao receber um evento. O padrão de stream é uma das maneiras possíveis de organizar isso. – https://facebook.github.io/react/tips/communicate-between-components.html

Quais componentes devem ter o estado?

A maioria de seus componentes deve simplesmente pegar alguns dados de adereços e processá-los. No entanto, às vezes, você precisa responder à input do usuário, a uma solicitação do servidor ou à passagem do tempo. Para isso, você usa o estado.

Tente manter tantos dos seus componentes quanto possível sem estado . Ao fazer isso, você isolará o estado ao seu lugar mais lógico e minimizará a redundância, facilitando o raciocínio sobre seu aplicativo.

Um padrão comum é criar vários componentes sem estado que apenas renderizam dados e têm um componente com estado acima deles na hierarquia que passa seu estado para seus filhos via adereços. O componente stateful encapsula toda a lógica de interação, enquanto os componentes sem estado cuidam da renderização dos dados de forma declarativa. – https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

O que deve ir no estado?

O estado deve conter dados que os manipuladores de events de um componente podem alterar para acionar uma atualização da interface do usuário. Em aplicativos reais, esses dados tendem a ser muito pequenos e serializáveis ​​por JSON. Ao construir um componente com estado, pense na representação mínima possível de seu estado e armazene apenas essas propriedades nesse estado. Dentro de render () simplesmente calcule qualquer outra informação que você precisa com base nesse estado. Você descobrirá que pensar e escrever aplicativos dessa maneira tende a levar à aplicação mais correta, pois adicionar valores redundantes ou computados ao estado significa que você precisa mantê-los explicitamente em sincronia, em vez de confiar no React que os computa para você. – https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

O resumo do estado de adereços vs que eu mais gosto está aqui: https://github.com/uberVU/react-guide/blob/master/props-vs-state.md Grande dica de chapéu para esses caras. Abaixo está uma versão editada dessa página:


adereços vs estado

tl; dr Se um Componente precisar alterar um de seus atributos em algum momento, esse atributo deve ser parte de seu estado, caso contrário, ele deve ser apenas um prop para esse Componente.


adereços

Adereços (abreviação de propriedades) são uma configuração do componente. Eles são recebidos de cima e imutáveis ​​no que diz respeito ao Componente que os recebe. Um componente não pode alterar seus objects, mas é responsável por reunir os objects de seus componentes filhos. Adereços não precisam ser apenas dados – as funções de callback podem ser passadas como adereços.

Estado

O estado é uma estrutura de dados que começa com um valor padrão quando um componente é montado. Pode ser mutado ao longo do tempo, principalmente como resultado de events do usuário.

Um Componente gerencia seu próprio estado internamente. Além de estabelecer um estado inicial, não tem nada a ver com o estado dos seus filhos. Você pode conceituar estado como privado para esse componente.

Alterando adereços e estado

                                                    estado de adereços
     Pode obter o valor inicial do componente pai?  sim Sim
     Pode ser alterado pelo componente pai?  sim não
     Pode definir valores padrão dentro do Componente? * Sim Sim
     Pode mudar dentro do componente?  Não sim
     Pode definir o valor inicial para componentes filho?  sim Sim
     Pode mudar em componentes filhos?  sim não
  • Observe que os valores iniciais prop e state recebidos dos pais substituem os valores padrão definidos dentro de um Component.

Esse componente deve ter estado?

Estado é opcional. Como o estado aumenta a complexidade e reduz a previsibilidade, um componente sem estado é preferível. Mesmo que você claramente não possa ficar sem estado em um aplicativo interativo, evite ter muitos Componentes com estado.

Tipos de componentes

Componente sem estado Apenas adere, sem estado. Não há muito acontecendo além da function render (). Sua lógica gira em torno dos adereços que recebem. Isso os torna muito fáceis de seguir e testar.

Componente com estado Tanto adereços quanto estado. Estes são usados ​​quando seu componente deve manter algum estado. Este é um bom lugar para comunicação cliente-servidor (XHR, web sockets, etc.), processamento de dados e resposta a events de usuários. Esse tipo de logística deve ser encapsulado em um número moderado de Componentes com estado, enquanto toda a lógica de visualização e formatação deve se mover para baixo em muitos componentes sem monitoração.

fonts

  • Pergunta sobre ‘adereços’ e ‘estado’ – Google Groups
  • Pensando em Reagir: Identifique onde seu estado deve viver

A maioria das respostas está confundindo os iniciantes em vez de esclarecer. É muito difícil se relacionar e entender. Você pode entendê-lo relacionando-o com o JS Simples.

Em palavras simples,

O estado é referido ao estado local do componente que não pode ser acessado e modificado fora do componente e somente pode ser usado e modificado dentro do componente.

JS simples

 const DummyFunction = () => { let name = 'Manoj'; console.log(`Hey ${name}`) } 

Reagir JS equivalente

 class DummyComponent extends React.Component { state = { name: 'Manoj' } render() { return 
Hello {this.state.name}
; }

Props , por outro lado, tornam os componentes reutilizáveis, dando aos componentes a capacidade de receber dados do componente pai na forma de props.

JS simples

 const DummyFunction = (name) => { console.log(`Hey ${name}`) } DummyFunction('Manoj'); DummyFunction('Ajay'); 

Reagir JS

 class DummyComponent extends React.Component { render() { return 
Hello {this.props.name}
; } } // when using the component

Créditos: https://medium.com/@manojsinghnegi

Artigo Linke: https://medium.com/@manojsinghnegi/react-state-vs-props-explained-51beebd73b21

Basicamente, a diferença é que state é algo como atributos em OOP: é algo local para uma class (componente), usada para melhor descrevê-lo. Adereços são como parâmetros – eles são passados para um componente do chamador de um componente (o pai): como se você chamasse uma function com certos parâmetros.

props (abreviação de “properties”) e state são dois objects JavaScript simples. Enquanto ambos contêm informações que influenciam a saída de renderização, eles são diferentes de uma maneira importante: props são passados ​​para o componente (semelhante aos parâmetros de function) enquanto o estado é gerenciado dentro do componente (semelhante a variables ​​declaradas dentro de uma function).

Então, simplesmente state está limitado ao seu componente atual, mas os props podem ser passados ​​para qualquer componente que você desejar … Você pode passar o estado do componente atual como prop para outros componentes …

Também em React temos componentes sem estado que só possuem adereços e não estado interno …

O exemplo abaixo mostrando como eles funcionam no seu aplicativo:

Pai (componente de estado completo):

 class SuperClock extends React.Component { constructor(props) { super(props); this.state = {name: "Alireza", date: new Date().toLocaleTimeString()}; } render() { return ( 
); } }

Criança (componente sem estado):

 const Clock = ({name}, {date}) => ( 

{`Hi ${name}`}.

{`It is ${date}`}.

);

Tanto estado quanto props em react são usados ​​para controlar dados em um componente, geralmente os props são definidos pelo pai e passados ​​para os componentes filhos e são fixados em todo o componente. Para os dados que vão mudar, temos que usar o estado. E os props são imutáveis, enquanto os estados são mutáveis , se você quiser alterar props que você pode fazer do componente pai e, em seguida, passá-lo para componentes filhos.

Basicamente, adereços e estados são duas maneiras pelas quais o componente pode saber o que e como renderizar. Qual parte do estado do aplicativo pertence ao estado e que, para alguns armazenamentos de nível superior, está mais relacionada ao design do seu aplicativo do que ao modo como o React funciona. A maneira mais simples de decidir, IMO, é pensar se essa parte específica de dados é útil para o aplicativo como um todo ou se é alguma informação local. Além disso, é importante não duplicar o estado, portanto, se algum dado puder ser calculado a partir de adereços, ele deve ser calculado a partir de adereços.

Por exemplo, digamos que você tenha algum controle suspenso (que encapsula o HTML selecionado para estilo personalizado), que pode a) selecionar algum valor da lista, eb) ser aberto ou fechado (isto é, a lista de opções exibida ou oculta). Agora, digamos que seu aplicativo exibe uma lista de itens de algum tipo e seus controles suspensos filtram as inputs da lista. Então, seria melhor passar o valor do filtro ativo como prop e manter o estado do estado aberto / fechado. Além disso, para torná-lo funcional, você passaria um manipulador onChange do componente pai, que seria chamado dentro do elemento dropdown e enviaria informações atualizadas (novo filtro selecionado) para o armazenamento imediatamente. Por outro lado, o estado aberto / fechado pode ser mantido dentro do componente suspenso, porque o restante do aplicativo realmente não se importa se o controle é aberto, até que o usuário realmente altere seu valor.

O código a seguir não está funcionando completamente, ele precisa do css e da manipulação de events click / blur / change suspensos, mas eu queria manter o exemplo mínimo. Espero que ajude a entender a diferença.

 const _store = { items: [ { id: 1, label: 'One' }, { id: 2, label: 'Two' }, { id: 3, label: 'Three', new: true }, { id: 4, label: 'Four', new: true }, { id: 5, label: 'Five', important: true }, { id: 6, label: 'Six' }, { id: 7, label: 'Seven', important: true }, ], activeFilter: 'important', possibleFilters: [ { key: 'all', label: 'All' }, { key: 'new', label: 'New' }, { key: 'important', label: 'Important' } ] } function getFilteredItems(items, filter) { switch (filter) { case 'all': return items; case 'new': return items.filter(function(item) { return Boolean(item.new); }); case 'important': return items.filter(function(item) { return Boolean(item.important); }); default: return items; } } const App = React.createClass({ render: function() { return ( 
My list:
); } }); const ItemList = React.createClass({ render: function() { return (
{this.props.items.map(function(item) { return
{item.id}: {item.label}
; })}
); } }); const Dropdown = React.createClass({ getInitialState: function() { return { isOpen: false }; }, render: function() { return (
{this.props.activeFilter}
{this.props.filterOptions.map(function(option) { return
{option.label}
})}
); }, onClick: function(e) { this.setState({ isOpen: !this.state.isOpen }); } }); ReactDOM.render( , document.getElementById('root') );

Estado é a maneira como o reagente lida com a informação mantida pelo seu componente.

Vamos supor que você tenha um componente que precise buscar alguns dados do servidor. Você geralmente deseja informar ao usuário se a solicitação está sendo processada, se falhou, etc. Esta é uma informação que é relevante apenas para esse componente específico. É aqui que o estado entra no jogo.

Normalmente, a melhor maneira de definir o estado é a seguinte:

 class MyComponent extends React.Component { constructor() { super(); this.state = { key1: value1, key2: value2 } } } 

mas nas últimas implementações de reagir nativo você pode apenas fazer:

 class MyComponent extends React.Component { state = { key1: value1, key2: value2 } } 

Esses dois exemplos são executados exatamente da mesma maneira, é apenas uma melhoria da syntax.

Então, o que é diferente de apenas usar atributos de objects como sempre temos na programação OO? Normalmente, as informações armazenadas em seu estado não devem ser estáticas. Elas serão alteradas com o tempo e sua visualização precisará ser atualizada para refletir essas alterações. O estado oferece essa funcionalidade de maneira simples.

Estado É SIGNIFICADO SER INUUTÁVEL! e não posso enfatizar o suficiente sobre isso. O que isso significa? Isso significa que você nunca deve fazer algo assim.

  state.key2 = newValue; 

A maneira correta de fazer isso é:

 this.setState({ key2: newValue }); 

Usando this.setState seu componente é executado através do ciclo de atualização e, se qualquer parte do estado for alterada, o método de renderização do componente será chamado novamente para refletir essas alterações.

Verifique os documentos de resposta para uma explicação ainda mais expandida: https://facebook.github.io/react/docs/state-and-lifecycle.html

estado – É uma propriedade mutável especial que contém dados de um componente. tem valor padrão quando montagens de Componet.

props – É uma propriedade especial que é imutável por natureza e usada no caso de passar por valor de pai para filho. props são apenas um canal de comunicação entre Componentes, sempre movendo de cima (pai) para buttom (filho).

abaixo são exemplos completos de combinar o estado e props: –

 < !DOCTYPE html>    state&props example      

Adereços simplesmente são abreviação de propriedades. Adereços são como os componentes falam uns com os outros. Se você está familiarizado com o React, então você deve saber que os adereços fluem para baixo a partir do componente pai.

Existe também o caso que você pode ter props padrão para que os props sejam definidos mesmo se um componente pai não passar para baixo.

É por isso que as pessoas se referem ao React como tendo stream de dados unidirecional. Isso leva um pouco de sua cabeça ao redor e eu provavelmente vou blog sobre isso mais tarde, mas por enquanto lembre-se: streams de dados de pai para filho. Adereços são imutáveis ​​(palavra chique para não mudar)

Então estamos felizes. Componentes recebem dados do pai. Tudo classificado, certo?

Bem, não é bem assim. O que acontece quando um componente recebe dados de alguém que não seja o pai? E se o usuário insere dados diretamente no componente?

Bem, é por isso que temos estado.

ESTADO

Os adereços não devem mudar, então o status aumenta. Normalmente, os componentes não têm estado e, portanto, são chamados de sem estado. Um componente usando estado é conhecido como stateful. Sinta-se à vontade para largar esse pequeno detalhe nas festas e observar as pessoas se afastando de você.

Assim, o estado é usado para que um componente possa controlar as informações entre qualquer um que processa. Quando você setState, ele atualiza o object de estado e renderiza novamente o componente. Isso é super legal, porque isso significa que o React cuida do trabalho duro e é incrivelmente rápido.

Como um pequeno exemplo de estado, aqui está um trecho de uma barra de pesquisa (vale a pena conferir este curso se você quiser saber mais sobre o React)

 Class SearchBar extends Component { constructor(props) { super(props); this.state = { term: '' }; } render() { return ( 
this.onInputChange(event.target.value)} />
); } onInputChange(term) { this.setState({term}); this.props.onSearchTermChange(term); } }

RESUMO

Adereços e Estado fazem coisas semelhantes, mas são usados ​​de maneiras diferentes. A maioria dos seus componentes provavelmente será sem estado.

Adereços são usados ​​para passar dados de pai para filho ou pelo próprio componente. Eles são imutáveis ​​e, portanto, não serão alterados.

Estado é usado para dados mutáveis ​​ou dados que serão alterados. Isso é particularmente útil para a input do usuário. Pense nas barras de pesquisa, por exemplo. O usuário digitará dados e isso atualizará o que eles vêem.

Adereços: Adereços não é nada, mas a propriedade de componente e componente de reagir não é nada, mas uma function de javascript.

  class Welcome extends React.Component { render() { return 

Hello {this.props.name}

; } }

elemento const =;

aqui passando um object {name: ‘Sara’} como suporte do componente Welcome. Para passar dados de um componente pai para o componente filho, usamos adereços. Adereços é imutável. Durante o ciclo de vida de um componente, adereços não devem mudar (considerá-los imutáveis).

Estado: o estado é acessível apenas dentro do Componente. Para acompanhar os dados dentro do componente, usamos o estado. podemos mudar de estado por setState. Se precisamos passar de estado para filho, temos que passá-lo como adereços.

 class Button extends React.Component { constructor() { super(); this.state = { count: 0, }; } updateCount() { this.setState((prevState, props) => { return { count: prevState.count + 1 } }); } render() { return (); } } 

Em resposta à pergunta inicial sobre os objects serem imutáveis, eles são considerados imutáveis ​​no que diz respeito ao componente infantil, mas são mutáveis ​​nos pais.

Componentes de Reacção usam o estado para READ / WRITE as variables ​​internas que podem ser alteradas / alteradas por exemplo:

 this.setState({name: 'Lila'}) 

Reaction props é um object especial que permite ao programador obter variables ​​e methods do componente pai no componente filho.

É algo como janelas e portas da casa. Adereços também são imutáveis ​​Child Component não pode alterar / atualizá-los.

Existem alguns methods que ajudam a escutar quando os objects são alterados pelo componente pai.

Este é o meu ponto de vista atual sobre a explicação entre estado e adereços

  1. Estado é como sua variável local dentro de seu componente. Você pode manipular o valor do estado usando o estado configurado. Você pode então passar o valor do estado para seu componente filho, por exemplo.

  2. Adereços é o valor que se encontra exatamente dentro do seu redux store, isto na verdade vem do estado que é originado do redutor. Seu componente deve estar conectado ao redux para obter o valor dos adereços. Você também pode passar seu valor prop para seu componente filho

Em geral, o estado de um componente (pai) é prop para o componente filho.

  1. Estado reside dentro de um componente onde os objects são passados ​​de pai para filho.
  2. Adereços são geralmente imutáveis.

     class Parent extends React.Component { constructor() { super(); this.state = { name : "John", } } render() { return (  ) } } class Child extends React.Component { constructor() { super(); } render() { return( {this.props.name} ) } } 

No código acima, temos uma class pai (Parent) que tem o nome como seu estado que é passado para o componente filho (class Child) como um prop e o componente filho o processa usando {this.props.name}

Estado:

  1. estados são mutáveis.
  2. estados estão associados com os componentes individuais não podem ser usados ​​por outros componentes.
  3. estados são inicializados na assembly do componente.
  4. estados são usados ​​para renderizar mudanças dinâmicas dentro do componente.

adereços:

  1. adereços são imutáveis.
  2. você pode passar adereços entre os componentes.
  3. adereços são usados ​​principalmente para se comunicar entre os componentes.Você pode passar de pai para filho diretamente. Para passar de criança para pai você precisa usar o conceito de levantar estados.
 class Parent extends React.Component{ render() { return( 
); } } class Child extends React.Component{ { render(){ return(
{this.props.name}
); } }

Em resumo.

adereços valores não podem ser alterados [imutável]

valores de estado podem ser alterados, usando o método setState [mutável]

Você tem alguns dados que estão sendo inseridos por usuários em algum lugar do aplicativo.

  1. o componente no qual os dados estão sendo inseridos deve ter esses dados em seu estado, porque ele precisa manipulá-los e alterá-los durante a input de dados

  2. em qualquer outro lugar na aplicação, os dados devem ser transmitidos como suportes para todos os outros componentes

Então sim, os adereços estão mudando, mas eles são mudados na ‘fonte’ e então simplesmente fluirão de lá. Então, adereços são imutáveis no contexto do componente que os recebe .

Por exemplo, uma canvas de dados de referência em que os usuários editam uma lista de fornecedores poderia gerenciar isso no estado, o que faria com que uma ação fizesse com que os dados atualizados fossem salvos no ReferenceDataState, o que poderia ser um nível abaixo do AppState. para todos os componentes que precisavam usá-lo.