Eu estava assistindo um curso da Pluralsight sobre 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 vs. estado e diz

Os adereços e as alterações de estado acionam uma atualização de renderização.

Mais adiante, no artigo, diz:

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

• Então, os adereços podem mudar, mas devem ser imutáveis?
• Quando você deve usar adereços e quando você deve usar state?
• Se você possui dados que um componente React precisa, ele deve ser transmitido por objetos ou configuração no componente React por meio de getInitialState?

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

<MyChild name={this.state.childsName} />

O valor do estado dos pais childsNamese torna o filho this.props.name. Da perspectiva da criança, o nome prop é imutável. Se precisar ser alterado, o pai deve apenas mudar seu estado interno:

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

e o React o propagará para a criança para você. Uma pergunta natural subsequente é: e se a criança precisar alterar seu nome prop? Isso geralmente é feito por meio de eventos filho e retornos de chamada pai. A criança pode expor um evento chamado, por exemplo onNameChanged,. O pai então se inscreveu no evento passando um manipulador de retorno de chamada.

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

A criança passaria seu novo nome solicitado como argumento para o retorno de chamada do evento chamando, por exemplo,, this.props.onNameChanged('New name')e o pai usaria o nome no manipulador de eventos para atualizar seu estado.

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

Para comunicação entre pais e filhos, basta passar adereços.

Use state para armazenar os dados de que sua página atual precisa na visualização do controlador.

Use adereços para passar manipuladores de dados e eventos para os componentes do seu filho.

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

Adereços

• são imutáveis
  • que permite que o React faça verificações de referência rápidas
• são usados ​​para passar dados do seu controlador de exibição
  • seu componente de nível superior
• tem melhor desempenho
  • use isso para passar dados para componentes filho

Estado

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

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

Quais componentes devem ter estado?

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

Tente manter o máximo possível de seus componentes sem estado . Ao fazer isso, você isolará o estado no seu local 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 por meio de adereços. O componente com estado encapsula toda a lógica de interação, enquanto os componentes sem estado cuidam da renderização dos dados de maneira declarativa. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

O que deve entrar no estado?

O estado deve conter dados que os manipuladores de eventos 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 criar um componente com estado, pense na representação mínima possível de seu estado e armazene apenas essas propriedades neste estado. Dentro do render () simplesmente calcule qualquer outra informação necessária com base nesse estado. Você descobrirá que pensar e escrever aplicativos dessa maneira tende a levar ao aplicativo mais correto, pois adicionar valores redundantes ou computados ao estado significa que você precisa mantê-los explicitamente sincronizados, em vez de confiar no React para calculá-los. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

Você pode entender melhor relacionando-o às funções Plain JS.

Simplificando,

State é o estado local do componente que não pode ser acessado e modificado fora do componente. É equivalente a variáveis ​​locais em uma função.

Função JS simples

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

React Component

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

Os adereços, por outro lado, tornam os componentes reutilizáveis, dando aos componentes a capacidade de receber dados do componente pai na forma de adereços. Eles são equivalentes aos parâmetros de função.

Função JS simples

const DummyFunction = (name) => {
  console.log(`Hey ${name}`)
}

// when using the function
DummyFunction('Manoj');
DummyFunction('Ajay');

React Component

class DummyComponent extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }

}

// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />

Créditos: Manoj Singh Negi

Artigo Link: React State vs Adereços explicado

O resumo dos adereços versus estado que eu mais gosto está aqui: react-guide Dica de chapéu grande 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 fazer parte de seu estado, caso contrário, deve ser apenas um suporte para esse componente.

adereços

Props (abreviação de propriedades) são a configuração de um 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 props, mas é responsável por montar os props de seus componentes filhos. Os adereços não precisam ser apenas dados - as funções de retorno de chamada 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 alterado ao longo do tempo, principalmente como resultado de eventos do usuário.

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

Alterar adereços e estado

                                                   estado 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 Component? Não Sim
    Pode definir o valor inicial para componentes filhos? sim Sim
    Pode mudar nos componentes filhos? sim não

• Observe que os adereços e os valores iniciais do estado recebidos dos pais substituem os valores padrão definidos dentro de um Componente.

Este 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 o estado em um aplicativo interativo, evite ter muitos componentes com estado.

Tipos de componentes

Componente sem estado Somente adereços, nenhum estado. Não há muita coisa acontecendo além da função render (). A lógica deles gira em torno dos objetos que recebem. Isso os torna muito fáceis de seguir e testar.

Componente com estado Ambos os adereços e o estado. Eles são usados ​​quando seu componente precisa reter algum estado. Este é um bom local para comunicação cliente-servidor (XHR, soquetes da web etc.), processando dados e respondendo a eventos do usuário. 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 a jusante para muitos componentes sem estado.

fontes

• Pergunta sobre 'adereços' e 'estado' - Grupos do Google
• Pensando em reagir: identifique onde seu estado deve morar

props (abreviação de "properties") e state são objetos JavaScript simples. Enquanto os dois mantêm informações que influenciam a saída da renderização, eles são diferentes em um aspecto importante: objetos são passados ​​para o componente (semelhante aos parâmetros de função), enquanto o estado é gerenciado dentro do componente (semelhante às variáveis ​​declaradas em uma função).

Portanto, simplesmente o estado é limitado ao seu componente atual, mas os adereços 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 possuem apenas adereços e não estado interno ...

O exemplo abaixo mostra como eles funcionam no seu aplicativo:

Pai (componente completo do estado):

class SuperClock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
  }

  render() {
    return (
      <div>
        <Clock name={this.state.name} date={this.state.date} />
      </div>
    );
  }
}

Filho (componente sem estado):

const Clock = ({name}, {date}) => (
    <div>
      <h1>{`Hi ${name}`}.</h1>
      <h2>{`It is ${date}`}.</h2>
    </div>
);

A principal diferença entre adereços e estado é que o estado é interno e controlado pelo próprio componente, enquanto os adereços são externos e controlados por qualquer que seja o componente.

function A(props) {
  return <h1>{props.message}</h1>
}

render(<A message=”hello” />,document.getElementById(“root”));

class A extends React.Component{  
  constructor(props) {  
    super(props)  
    this.state={data:"Sample Data"}  
  }  
  render() {
    return(<h2>Class State data: {this.state.data}</h2>)  
  } 
}

render(<A />, document.getElementById("root"));

• Estado pode ser alterado (Mutável)
• Considerando que adereços não podem (imutável)

Basicamente, a diferença é que estado é algo como atributos em OOP : é algo local para uma classe (componente), usado para descrevê-lo melhor. Os adereços são como parâmetros - eles são passados para um componente do chamador de um componente (o pai): como se você tivesse chamado uma função com determinados parâmetros.

Tanto o estado quanto os props in react são usados ​​para controlar os dados em um componente, geralmente os props são definidos pelo pai e transmitidos aos componentes filhos e são corrigidos em todo o componente. Para dados que vão mudar, precisamos usar state. E os adereços são imutáveis, enquanto os estados são mutáveis . Se você deseja alterar os adereços, pode fazê-lo do componente pai e depois passá-lo para os componentes filhos.

como aprendi enquanto trabalhava com o react.

• props são usados ​​por um componente para obter dados de um ambiente externo, ou seja, outro componente (puro, funcional ou classe) ou uma classe geral ou código javascript / texto datilografado

• estados são usados para gerenciar o ambiente interno de um componente significa que os dados são alterados dentro do componente

Props: Props não é senão propriedade do componente e o componente reage não é senão uma função javascript.

  class Welcome extends React.Component {
    render() {
      return <h1>Hello {this.props.name}</h1>;
    }
  }

elemento const =;

aqui <Welcome name="Sara" />passando um objeto {name: 'Sara'} como adereços do componente Welcome. Para passar dados de um componente pai para o componente filho, usamos props. Adereços é imutável. Durante o ciclo de vida de um componente, os objetos não devem mudar (considere-os imutáveis).

Estado: o estado é acessível apenas no Componente. Para acompanhar os dados dentro do componente, usamos state. podemos mudar de estado por setState. Se precisamos passar estado para criança, temos que passar 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 (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

Estado:

1. estados são mutáveis.
2. estados associados aos componentes individuais não podem ser usados ​​por outros componentes.
3. estados são inicializados na montagem do componente.
4. Os estados são usados ​​para renderizar alterações dinâmicas no componente.

adereços:

1. adereços são imutáveis.
2. você pode passar adereços entre componentes.
3. adereços são usados ​​principalmente para se comunicar entre componentes. Você pode passar de pai para filho diretamente. Para passar de filho para pai, você precisa usar o conceito de levantar estados.

class Parent extends React.Component{
  render()
  {
     return(
        <div>
            <Child name = {"ron"}/>
        </div>
      );
  }
}

class Child extends React.Component{
{
    render(){
      return(
         <div>
              {this.props.name}
        </div>
      );
     }
}

Basicamente, props e state 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 qual a loja de nível superior está mais relacionada ao design do aplicativo do que ao modo como o React funciona. A maneira mais simples de decidir, na IMO, é pensar se esse dado específico é útil para a aplicação como um todo ou se são algumas informações locais. Além disso, é importante não duplicar o estado, portanto, se alguns dados puderem ser calculados a partir de adereços - eles devem ser calculados a partir de adereços.

Por exemplo, digamos que você tenha algum controle suspenso (que envolve a seleção padrão de HTML para um estilo personalizado), que pode a) selecionar algum valor da lista eb) ser aberto ou fechado (ou seja, a lista de opções exibida ou oculta). Agora, digamos que seu aplicativo exiba uma lista de itens de algum tipo e seus controles suspensos filtrem as entradas da lista. Então, seria melhor passar o valor do filtro ativo como suporte e manter o estado aberto / fechado local. Além disso, para torná-lo funcional, você passaria um manipulador onChange do componente pai, que seria chamado dentro do elemento suspenso e enviaria informações atualizadas (novo filtro selecionado) para a loja 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 for aberto, até que o usuário realmente altere seu valor.

O código a seguir não está completamente funcionando, ele precisa de CSS e manipulação de eventos suspensos de clique / desfoque / alteração, 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 (
            <div>
            My list:

            <ItemList   items={this.props.listItems} />
          <div>
            <Dropdown 
              onFilterChange={function(e) {
                _store.activeFilter = e.currentTarget.value;
                console.log(_store); // in real life, some action would be dispatched here
              }}
              filterOptions={this.props.filterOptions}
              value={this.props.activeFilter}
              />
          </div>
        </div>
      );
  }
});

const ItemList = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.items.map(function(item) {
          return <div key={item.id}>{item.id}: {item.label}</div>;
        })}
      </div>
    );
  }
});

const Dropdown = React.createClass({
    getInitialState: function() {
    return {
        isOpen: false
    };
  },

  render: function() {
    return (
        <div>
            <select 
            className="hidden-select" 
          onChange={this.props.onFilterChange}
          value={this.props.value}>
            {this.props.filterOptions.map(function(option) {
            return <option value={option.key} key={option.key}>{option.label}</option>
          })}
        </select>

        <div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
            <div className="selected-value">{this.props.activeFilter}</div>
          {this.props.filterOptions.map(function(option) {
            return <div data-value={option.key} key={option.key}>{option.label}</div>
          })}
        </div>
      </div>
    );
  },

  onClick: function(e) {
    this.setState({
        isOpen: !this.state.isOpen
    });
  }
});

ReactDOM.render(
  <App 
    listItems={getFilteredItems(_store.items, _store.activeFilter)} 
    filterOptions={_store.possibleFilters}
    activeFilter={_store.activeFilter}
    />,
  document.getElementById('root')
);

Estado é a maneira pela qual a reação lida com as informações mantidas pelo seu componente.

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

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

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

mas nas implementações mais recentes do react native, você pode fazer:

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

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

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

O Estado DEVE SER INMUTÁ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 no ciclo de atualização e, se alguma 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 reação para obter uma explicação ainda mais expandida: https://facebook.github.io/react/docs/state-and-lifecycle.html

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

Também existe o caso de você ter adereços padrão para que os adereços sejam definidos mesmo se um componente pai não os transmitir.

É por isso que as pessoas se referem ao React como tendo fluxo de dados unidirecional. Isso leva um pouco de atenção e provavelmente vou postar no blog mais tarde, mas por enquanto lembre-se: os dados fluem de pai para filho. Adereços são imutáveis ​​(palavra chique para ele não mudar)

Então, estamos felizes. Os componentes recebem dados do pai. Tudo ordenado, certo?

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

Bem, é por isso que temos estado.

ESTADO

Os acessórios não devem mudar, portanto, o estado aumenta. Normalmente, os componentes não têm estado e, portanto, são referidos como sem estado. Um componente que usa state é conhecido como stateful. Sinta-se livre para dar aquele pequeno petisco nas festas e ver as pessoas se afastarem de você.

Portanto, state é usado para que um componente possa acompanhar as informações entre as renderizações que ele faz. Quando você defineState, ele atualiza o objeto de estado e, em seguida, renderiza novamente o componente. Isso é super legal porque 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 (
   <div className="search-bar">
   <input 
   value={this.state.term}
   onChange={event => this.onInputChange(event.target.value)} />
   </div>
   );
 }
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á apátrida.

Os acessórios 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.

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

Em resumo.

valores de objetos não podem ser alterados [imutáveis]

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

state - É uma propriedade mutável especial que retém os dados de um componente. tem valor padrão quando o Componet é montado.

adereços - é uma propriedade especial imutável por natureza e usada em caso de transmissão de valor de pai para filho. adereços são apenas um canal de comunicação entre os componentes, sempre movendo de cima (pai) para buttom (filho).

abaixo estão um exemplo completo de como combater o estado e os adereços: -

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>state&props example</title>

        <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
        <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

      </head>
      <body>
      <div id="root"></div>
        <script type="text/babel">

            var TodoList = React.createClass({
                render(){
                    return <div className='tacos-list'>
                                {
                                    this.props.list.map( ( todo, index ) => {
                                    return <p key={ `taco-${ index }` }>{ todo }</p>;
                            })}
                            </div>;
                }
            });

            var Todo = React.createClass({
                getInitialState(){
                    return {
                        list : [ 'Banana', 'Apple', 'Beans' ]       
                    }
                },
                handleReverse(){
                    this.setState({list : this.state.list.reverse()});
                },
                render(){
                    return <div className='parent-component'>
                              <h3 onClick={this.handleReverse}>List of todo:</h3>
                              <TodoList list={ this.state.list }  />
                           </div>;
                }
            });

            ReactDOM.render(
                <Todo/>,
                document.getElementById('root')
            );

        </script>
      </body>
      </html>

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

1. O estado reside dentro de um componente em que, como adereços, são transmitidos 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 (
               <Child name={this.state.name}>
           )
       }
   }
   
   class Child extends React.Component {
       constructor() {
           super();
       }
   
       render() {
           return(
               {this.props.name} 
           )
       }
   }

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

Você tem alguns dados que estão sendo inseridos pelos 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, pois precisa manipulá-los e alterá-los durante a entrada de dados

2. em qualquer outro lugar do aplicativo, os dados devem ser transmitidos como acessórios para todos os outros componentes

Então, sim, os objetos estão mudando, mas eles são alterados na 'fonte' e, em seguida, simplesmente fluem a partir daí. Portanto, os objetos são imutáveis no contexto do componente que os recebe .

Por exemplo, uma tela de dados de referência na qual os usuários editam uma lista de fornecedores gerenciaria isso no estado, o que teria uma ação que salvaria os dados atualizados no ReferenceDataState, que poderia estar um nível abaixo do AppState, e essa lista de fornecedores seria transmitida como props a todos os componentes necessários para usá-lo.

Em React, os estados armazenam os dados e os adereços. Sua diferença com o último é que os dados armazenados podem ser modificados por diferentes alterações. Isso nada mais é do que objetos escritos em JavaScript simples, para que eles possam conter dados ou códigos e representar as informações que você deseja modelar. Se você precisar de mais detalhes, é recomendável que você veja essas publicações Uso do estado em reagir e Uso de adereços em reagir

• adereços --- você não pode alterar seu valor.
• states --- você pode alterar seu valor em seu código, mas ele estará ativo quando ocorrer uma renderização.

Algumas diferenças entre "estado" e "adereços" em reagir.

Reagir controla e renderiza o DOM com base no estado. Existem dois tipos de estados de componentes: props é o estado que é transferido entre componentes e state é o estado interno dos componentes. Props é usado para transferência de dados do componente pai para o componente filho. Os componentes também têm seu próprio estado inside: state, que só pode ser modificado dentro do componente.

Geralmente, o estado de determinado componente pode ser o suporte do componente filho, o suporte será passado para os filhos, o que é declarado dentro do método de renderização do componente pai

Adereços

• adereços usam para passar dados no componente filho

• adereços alteram um valor fora de um componente (componente filho)

Estado

• uso de estado dentro de um componente de classe

• estado alterar um valor dentro de um componente

• Se você renderizar a página, chamará setState para atualizar o DOM (atualizar o valor da página)

O Estado tem um papel importante na reação

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

Os componentes do React usam o estado para LER / ESCREVER as variáveis ​​internas que podem ser alteradas / alteradas por exemplo:

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

React props é um objeto especial que permite ao programador obter variáveis ​​e métodos do Componente Pai para o Componente Filho.

É algo como janelas e portas da casa. Os acessórios também são imutáveis ​​O componente filho não pode alterá-los / atualizá-los.

Existem alguns métodos que ajudam a ouvir quando os objetos são alterados pelo componente pai.

Este é o meu ponto de vista atual em relação à explicação entre estado e adereços

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

2. Props é o valor exatamente localizado dentro da sua loja redux, na verdade, vem do estado originado do redutor. Seu componente deve estar conectado ao redux para obter o valor dos adereços. Você também pode passar o valor dos seus adereços para o componente filho

A explicação simples é: STATE é o estado local do componente, por exemplo color = "blue" ou animation = true etc. Use this.setState para alterar o estado do componente. PROPS é como os componentes se comunicam (enviam dados de pai para filho) e tornam os componentes reutilizáveis.

Estado é seus dados, é mutável, você pode fazer tudo o que precisar, adereços são apenas dados de leitura, geralmente quando você os adota, você já trabalhou com seus dados e precisa do componente filho para renderizá-los ou se seus adereços são um função u chamá-lo para executar uma tarefa

O estado é a origem da verdade, onde seus dados residem. Você pode dizer que o estado se manifesta através de adereços.

Fornecer adereços aos componentes é o que mantém sua interface do usuário sincronizada com seus dados. Um componente é realmente apenas uma função que retorna a marcação.

Dado os mesmos adereços (dados para exibição), sempre produzirá a mesma marcação .

Portanto, os objetos são como os pipelines que transportam os dados desde a origem até os componentes funcionais.

Adereços: representa dados "somente leitura", que são imutáveis ​​e se referem aos atributos do componente pai.

Estado: representa dados mutáveis, que afetam o que é renderizado na página e gerenciado internamente pelo próprio componente e altera as horas extras normalmente devido à entrada do usuário.

A principal diferença é que o estado é privado para um componente e pode ser alterado dentro desse componente apenas enquanto props são apenas valor estático e chave para o componente filho que é passado pelo componente pai e não pode ser alterado dentro do componente filho