Estaba viendo un curso de Pluralsight sobre React y el instructor dijo que no se deberían cambiar los accesorios. Ahora estoy leyendo un artículo (uberVU / react-guide) sobre accesorios versus estado y dice

Tanto los accesorios como los cambios de estado desencadenan una actualización de representación.

Más adelante en el artículo dice:

Los accesorios (abreviatura de propiedades) son la configuración de un Componente, sus opciones si es posible. Son recibidos desde arriba e inmutables.

• ¿Entonces los accesorios pueden cambiar pero deberían ser inmutables?
• ¿Cuándo deberías usar accesorios y cuándo deberías usar state?
• Si tiene datos que necesita un componente React, ¿debe pasarlos a través de accesorios o configurarse en el componente React getInitialState?

Los accesorios y el estado están relacionados. El estado de un componente a menudo se convertirá en el accesorio de un componente hijo. Los accesorios se pasan al niño dentro del método de representación del padre como el segundo argumento React.createElement()o, si está utilizando JSX, los atributos de etiqueta más familiares.

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

El valor del estado de los padres se childsNameconvierte en el del niño this.props.name. Desde la perspectiva del niño, el nombre prop es inmutable. Si necesita ser cambiado, el padre solo debe cambiar su estado interno:

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

y React lo propagará al niño por ti. Una pregunta de seguimiento natural es: ¿qué pasa si el niño necesita cambiar su nombre de utilería? Esto generalmente se realiza mediante eventos secundarios y devoluciones de llamadas de los padres. El niño puede exponer un evento llamado, por ejemplo onNameChanged,. El padre se suscribiría al evento pasando un controlador de devolución de llamada.

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

El niño pasaría su nuevo nombre solicitado como argumento para la devolución de llamada del evento llamando, por ejemplo this.props.onNameChanged('New name'), y el padre usaría el nombre en el controlador de eventos para actualizar su estado.

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

Para la comunicación entre padres e hijos, simplemente pase accesorios.

Use el estado para almacenar los datos que su página actual necesita en su vista de controlador.

Utilice accesorios para pasar manejadores de datos y eventos a los componentes de su hijo.

Estas listas deberían guiarlo cuando trabaje con datos en sus componentes.

Accesorios

• son inmutables
  • lo que le permite a React hacer verificaciones de referencia rápidas
• se utilizan para pasar datos desde su controlador de vista
  • su componente de nivel superior
• tener un mejor rendimiento
  • use esto para pasar datos a componentes secundarios

Estado

• debe administrarse en su controlador de vista
  • su componente de nivel superior
• es mutable
• tiene peor rendimiento
• no se debe acceder desde componentes secundarios
  • pasarlo con accesorios en su lugar

Para la comunicación entre dos componentes que no tienen una relación padre-hijo, puede configurar su propio sistema de eventos global. Suscríbase a los eventos en componentDidMount (), anule la suscripción en componentWillUnmount () y llame a setState () cuando reciba un evento. El patrón de flujo es una de las formas posibles de arreglar esto. - https://facebook.github.io/react/tips/communicate-between-components.html

¿Qué componentes deberían tener estado?

La mayoría de sus componentes simplemente deberían tomar algunos datos de los accesorios y renderizarlos. Sin embargo, a veces necesita responder a la entrada del usuario, una solicitud del servidor o el paso del tiempo. Para esto usas estado.

Trate de mantener tantos componentes como sea posible sin estado . Al hacer esto, aislará el estado en su lugar más lógico y minimizará la redundancia, lo que facilitará razonar sobre su aplicación.

Un patrón común es crear varios componentes sin estado que solo representan datos y tienen un componente con estado sobre ellos en la jerarquía que pasa su estado a sus hijos a través de accesorios. El componente con estado encapsula toda la lógica de interacción, mientras que los componentes sin estado se encargan de procesar los datos de forma declarativa. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

¿Qué debe ir en estado?

El estado debe contener datos que los controladores de eventos de un componente pueden cambiar para activar una actualización de la interfaz de usuario. En aplicaciones reales, estos datos tienden a ser muy pequeños y serializables con JSON. Al crear un componente con estado, piense en la representación mínima posible de su estado y solo almacene esas propiedades en this.state. Dentro de render () simplemente calcule cualquier otra información que necesite en función de este estado. Descubrirá que pensar y escribir aplicaciones de esta manera tiende a conducir a la aplicación más correcta, ya que agregar valores redundantes o calculados al estado significa que debe mantenerlos sincronizados explícitamente en lugar de confiar en que React los computará por usted. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

Puede entenderlo mejor relacionándolo con las funciones de Plain JS.

Simplemente pon,

El estado es el estado local del componente al que no se puede acceder y modificar fuera del componente. Es equivalente a las variables locales en una función.

Función JS simple

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

Componente de reacción

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

Los accesorios , por otro lado, hacen que los componentes sean reutilizables al darles la capacidad de recibir datos de su componente principal en forma de accesorios. Son equivalentes a los parámetros de la función.

Función JS simple

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

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

Componente de reacción

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

Enlace del artículo: Estado de reacción vs accesorios explicados

El resumen de utilería vs estado que más me gusta está aquí: react-guide Big hat tip para esos tipos. A continuación se muestra una versión editada de esa página:

accesorios vs estado

tl; dr Si un Componente necesita alterar uno de sus atributos en algún momento, ese atributo debería ser parte de su estado, de lo contrario debería ser solo un accesorio para ese Componente.

accesorios

Los accesorios (abreviatura de propiedades) son la configuración de un componente. Se reciben desde arriba e inmutables en lo que respecta al Componente que los recibe. Un componente no puede cambiar sus accesorios, pero es responsable de reunir los accesorios de sus componentes hijos. Los accesorios no tienen que ser solo datos: las funciones de devolución de llamada pueden pasarse como accesorios.

estado

El estado es una estructura de datos que comienza con un valor predeterminado cuando se monta un componente. Puede mutar a lo largo del tiempo, principalmente como resultado de eventos del usuario.

Un componente gestiona su propio estado internamente. Además de establecer un estado inicial, no tiene nada que ver con el estado de sus hijos. Puede conceptualizar el estado como privado para ese componente.

Cambio de accesorios y estado

                                                   estado de utilería
    ¿Se puede obtener el valor inicial del componente principal? sí Sí
    ¿Se puede cambiar por componente principal? sí No
    ¿Se pueden establecer valores predeterminados dentro de Componente? * Sí Sí
    Puede cambiar dentro del componente? No si
    ¿Se puede establecer el valor inicial para los componentes secundarios? sí Sí
    Puede cambiar en componentes secundarios? sí No

• Tenga en cuenta que tanto los accesorios como los valores iniciales de estado recibidos de los padres anulan los valores predeterminados definidos dentro de un Componente.

¿Debería este componente tener estado?

El estado es opcional. Dado que el estado aumenta la complejidad y reduce la previsibilidad, es preferible un Componente sin estado. Aunque claramente no puede prescindir del estado en una aplicación interactiva, debe evitar tener demasiados componentes con estado.

Tipos de componentes

Componentes sin estado Solo accesorios, sin estado. No está sucediendo mucho además de la función render (). Su lógica gira en torno a los accesorios que reciben. Esto los hace muy fáciles de seguir y probar.

Componente con estado Ambos accesorios y estado. Estos se usan cuando su componente debe conservar algún estado. Este es un buen lugar para la comunicación cliente-servidor (XHR, zócalos web, etc.), procesando datos y respondiendo a los eventos del usuario. Este tipo de logística debería encapsularse en un número moderado de componentes con estado, mientras que toda la lógica de visualización y formato debería pasar a muchos componentes sin estado.

fuentes

• Pregunta sobre 'accesorios' y 'estado' - Grupos de Google
• Pensando en reaccionar: identifica dónde debería vivir tu estado

accesorios (abreviatura de "propiedades") y estado son objetos JavaScript simples. Si bien ambos contienen información que influye en la salida del render, son diferentes de una manera importante: los accesorios se pasan al componente (similar a los parámetros de la función) mientras que el estado se administra dentro del componente (similar a las variables declaradas dentro de una función).

Entonces, el estado simplemente se limita a su componente actual, pero los accesorios se pueden pasar a cualquier componente que desee ... Puede pasar el estado del componente actual como accesorio a otros componentes ...

También en React, tenemos componentes sin estado que solo tienen accesorios y no estado interno ...

El siguiente ejemplo muestra cómo funcionan en su aplicación:

Padre (componente con estado completo):

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>
    );
  }
}

Hijo (componente sin estado):

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

La diferencia clave entre los accesorios y el estado es que el estado es interno y está controlado por el propio componente, mientras que los accesorios son externos y controlados por lo que sea que represente el 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"));

• El estado se puede cambiar (mutable)
• Mientras que los accesorios no pueden (inmutable)

Básicamente, la diferencia es que el estado es algo así como los atributos en OOP : es algo local para una clase (componente), que se usa para describirlo mejor. Los accesorios son como parámetros : se pasan a un componente desde la persona que llama a un componente (el padre): como si llamara a una función con ciertos parámetros.

Tanto el estado como los accesorios en reacción se utilizan para controlar los datos en un componente, generalmente los accesorios se configuran por padres y se pasan a los componentes secundarios y se fijan en todo el componente. Para los datos que van a cambiar, tenemos que usar el estado. Y los accesorios son inmutables mientras que los estados son mutables , si desea cambiar los accesorios, puede hacerlo desde el componente principal y luego pasarlo a los componentes secundarios.

como aprendí mientras trabajaba con react.

• apoyos son utilizados por un componente para obtener datos de entorno externo es decir, otro componente (puro, funcional o clase) o una clase general o javascript / mecanografiado código

• los estados se usan para administrar el entorno interno de un componente, lo que significa que los datos cambian dentro del componente

Props: Props no es más que propiedad del componente y el componente de reacción no es más que una función de JavaScript.

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

elemento const =;

aquí <Welcome name="Sara" /> pasando un objeto {nombre: 'Sara'} como accesorios del componente Bienvenido. Para pasar datos de un componente principal al componente secundario, utilizamos accesorios. Los accesorios son inmutables. Durante el ciclo de vida de un componente, los accesorios no deberían cambiar (considérelos inmutables).

Estado: solo se puede acceder al estado dentro del Componente. Para realizar un seguimiento de los datos dentro del componente, usamos estado. Podemos cambiar el estado mediante setState. Si necesitamos pasar el estado al niño, tenemos que pasarlo como accesorios.

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. Los estados son mutables.
2. los estados están asociados con los componentes individuales que no pueden ser utilizados por otros componentes.
3. los estados se inicializan en el montaje de componentes.
4. los estados se usan para representar cambios dinámicos dentro del componente.

accesorios:

1. Los accesorios son inmutables.
2. puedes pasar accesorios entre componentes.
3. Los accesorios se utilizan principalmente para comunicarse entre componentes. Puede pasar de padres a hijos directamente. Para pasar de niño a padre, debe usar el concepto 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>
      );
     }
}

Básicamente, los accesorios y el estado son dos formas en que el componente puede saber qué y cómo renderizar. Qué parte del estado de la aplicación pertenece al estado y cuál a alguna tienda de nivel superior está más relacionada con el diseño de su aplicación que con la forma en que funciona React. La forma más sencilla de decidir, IMO, es pensar si este dato en particular es útil para la aplicación en su conjunto, o si es información local. Además, es importante no duplicar el estado, por lo que si algunos datos pueden calcularse a partir de accesorios, deberían calcularse a partir de los accesorios.

Por ejemplo, supongamos que tiene algún control desplegable (que ajusta la selección HTML estándar para un estilo personalizado), que puede a) seleccionar algún valor de la lista yb) abrirse o cerrarse (es decir, la lista de opciones mostrada u oculta). Ahora, supongamos que su aplicación muestra una lista de elementos de algún tipo y sus controles desplegables filtran las entradas de la lista. Entonces, sería mejor pasar el valor del filtro activo como accesorio y mantener el estado abierto / cerrado local. Además, para que sea funcional, debe pasar un controlador onChange desde el componente principal, que se llamaría dentro del elemento desplegable y enviaría información actualizada (nuevo filtro seleccionado) a la tienda de inmediato. Por otro lado, el estado abierto / cerrado puede mantenerse dentro del componente desplegable, porque al resto de la aplicación realmente no le importa si el control está abierto, hasta que el usuario realmente cambie su valor.

El siguiente código no funciona completamente, necesita CSS y manejo de eventos desplegables de clic / desenfoque / cambio, pero quería que el ejemplo fuera mínimo. Espero que ayude a entender la diferencia.

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')
);

El estado es la forma en que reacciona lidia con la información que posee su componente.

Supongamos que tiene un componente que necesita obtener algunos datos del servidor. Por lo general, desea informar al usuario si la solicitud se está procesando, si ha fallado, etc. Esta es una información que solo es relevante para ese componente específico. Aquí es donde el estado ingresa al juego.

Por lo general, la mejor manera de definir el estado es la siguiente:

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

pero en las últimas implementaciones de react native puedes hacer lo siguiente:

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

Estos dos ejemplos se ejecutan exactamente de la misma manera, es solo una mejora de sintaxis.

Entonces, ¿qué es diferente de solo usar atributos de objeto como siempre tenemos en la programación OO? Por lo general, la información contenida en su estado no debe ser estática, sino que cambiará con el tiempo y su Vista deberá actualizarse para reflejar estos cambios. State ofrece esta funcionalidad de una manera simple.

Estado se supone que es inmutable! y no puedo hacer suficiente hincapié en esto. ¿Qué significa esto? Significa que NUNCA debes hacer algo como esto.

 state.key2 = newValue;

La forma correcta de hacerlo es:

this.setState({ key2: newValue });

Al usar this.setState, su componente se ejecuta a través del ciclo de actualización y, si alguna parte del estado cambia, se llamará nuevamente al método de representación de componentes para reflejar estos cambios.

Consulte los documentos de reacción para obtener una explicación aún más amplia: https://facebook.github.io/react/docs/state-and-lifecycle.html

Los accesorios simplemente son una abreviatura de propiedades. Los accesorios son cómo los componentes se comunican entre sí. Si está familiarizado con React, debe saber que los accesorios fluyen hacia abajo desde el componente principal.

También existe el caso de que puede tener accesorios predeterminados para que los accesorios se configuren incluso si un componente principal no pasa los accesorios.

Es por eso que las personas se refieren a React como un flujo de datos unidireccional. Esto requiere un poco de comprensión y probablemente escribiré un blog sobre esto más tarde, pero por ahora solo recuerde: los datos fluyen de padres a hijos. Los accesorios son inmutables (palabra elegante para que no cambie)

Entonces estamos felices. Los componentes reciben datos del padre. Todo ordenado, ¿verdad?

Bueno, no del todo. ¿Qué sucede cuando un componente recibe datos de alguien que no es el padre? ¿Qué pasa si el usuario ingresa datos directamente al componente?

Bueno, por eso tenemos estado.

ESTADO

Los accesorios no deberían cambiar, por lo que el estado aumenta. Normalmente, los componentes no tienen estado y, por lo tanto, se denominan sin estado. Un componente que usa estado se conoce como con estado. Siéntase libre de dejar ese pequeño bocado en las fiestas y ver a la gente alejarse de usted.

Por lo tanto, se utiliza el estado para que un componente pueda realizar un seguimiento de la información entre los renderizados que hace. Cuando establece State actualiza el objeto de estado y luego vuelve a representar el componente. Esto es súper genial porque eso significa que React se encarga del trabajo duro y es increíblemente rápido.

Como un pequeño ejemplo de estado, aquí hay un fragmento de una barra de búsqueda (vale la pena echarle un vistazo a este curso si desea obtener más información sobre 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);
 }
}

RESUMEN

Los accesorios y el estado hacen cosas similares, pero se usan de diferentes maneras. La mayoría de sus componentes probablemente serán apátridas.

Los accesorios se utilizan para pasar datos de padre a hijo o por el componente mismo. Son inmutables y, por lo tanto, no se cambiarán.

El estado se usa para datos mutables o datos que cambiarán. Esto es particularmente útil para la entrada del usuario. Piense en las barras de búsqueda, por ejemplo. El usuario escribirá los datos y esto actualizará lo que ve.

En breve.

los valores de los accesorios no se pueden cambiar [inmutable]

los valores de estado se pueden cambiar, usando el método setState [mutable]

state : es una propiedad mutable especial que contiene datos de un componente. tiene valor predeterminado cuando se monta Componet.

accesorios : es una propiedad especial que es inmutable por naturaleza y se usa en caso de pasar el valor de padres a hijos. Los accesorios son solo un canal de comunicación entre los componentes, que siempre se mueven desde la parte superior (principal) a la inferior (secundaria).

a continuación se muestran ejemplos completos de combinar el estado y los accesorios: -

<!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>

En general, el estado de un componente (padre) es propicio para el componente hijo.

1. El estado reside dentro de un componente donde los accesorios se pasan de padres a hijos.

2. Los accesorios son generalmente inmutables.

   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} 
           )
       }
   }

En el código anterior, tenemos una clase principal (Principal) que tiene un nombre como su estado que se pasa al componente secundario (Clase secundaria) como accesorio y el componente secundario lo representa usando {this.props.name}

Tiene algunos datos que están ingresando los usuarios en algún lugar de la aplicación.

1. el componente en el que se ingresan los datos debe tener estos datos en su estado porque necesita manipularlos y cambiarlos durante la entrada de datos

2. En cualquier otro lugar de la aplicación, los datos deben pasarse como accesorios a todos los demás componentes.

Entonces, sí, los accesorios están cambiando, pero se cambian en la 'fuente' y luego simplemente fluirán hacia abajo desde allí. Por lo tanto, los accesorios son inmutables en el contexto del componente que los recibe .

Por ejemplo, una pantalla de datos de referencia donde los usuarios editan una lista de proveedores manejaría esto en estado, lo que luego tendría una acción que haría que los datos actualizados se guardaran en ReferenceDataState, que podría estar un nivel por debajo de AppState y luego esta lista de proveedores se pasaría como accesorios. a todos los componentes que necesitaban usarlo.

En React, los estados almacenan los datos y los accesorios. Su diferencia con este último es que los datos almacenados pueden modificarse mediante diferentes cambios. Estos no son más que objetos escritos en JavaScript plano, por lo que pueden contener datos o códigos, representar la información que desea modelar. Si necesita más detalles, se recomienda que vea estas publicaciones Uso del estado en React y Uso de accesorios en React

• accesorios --- no puedes cambiar su valor.
• estados --- puede cambiar su valor en su código, pero estaría activo cuando ocurra un render.

Algunas diferencias entre "estado" y "accesorios" en reaccionar.

Reacciona los controles y procesa DOM según el estado. Hay dos tipos de estados de componentes: los accesorios son el estado que se transfiere entre componentes, y el estado es el estado interno de los componentes. Props se utiliza para la transferencia de datos desde el componente primario al componente secundario. Los componentes también tienen su propio estado dentro: estado que solo puede modificarse dentro del componente.

En general, el estado de cierto componente podría ser el accesorio del componente secundario, los accesorios se pasarán a los elementos secundarios que se indican dentro del método de representación del componente principal

Accesorios

• los accesorios se usan para pasar datos en el componente secundario

• los accesorios cambian un valor fuera de un componente (componente hijo)

Estado

• uso del estado dentro de un componente de clase

• estado cambiar un valor dentro de un componente

• Si representa la página, llama a setState para actualizar DOM (actualizar el valor de la página)

El estado tiene un papel importante en reaccionar

En respuesta a la pregunta inicial acerca de que los accesorios son inmutables, se dice que son inmutables en lo que respecta al componente hijo, pero son cambiables en los padres.

React Components usa el estado para LEER / ESCRIBIR las variables internas que se pueden cambiar / mutar, por ejemplo:

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

React props es un objeto especial que permite al programador obtener variables y métodos del Componente principal al Componente secundario.

Es algo así como ventanas y puertas de la casa. Los accesorios también son inmutables. El componente secundario no puede cambiarlos ni actualizarlos.

Hay un par de métodos que ayudan a escuchar cuando el componente principal cambia los accesorios.

Este es mi punto de vista actual con respecto a la explicación entre estado y accesorios.

1. El estado es como su variable local dentro de su componente. Puede manipular el valor del estado utilizando el estado establecido. Luego puede pasar el valor de estado a su componente hijo, por ejemplo.

2. Props es el valor que se encuentra exactamente dentro de su tienda redux, en realidad proviene del estado que se originó en el reductor. Su componente debe estar conectado a redux para obtener el valor de los accesorios. También puede pasar su valor de utilería a su componente hijo

La explicación simple es: ESTADO es el estado local del componente, por ejemplo, color = "azul" o animación = verdadero, etc. Use this.setState para cambiar el estado del componente. PROPS es cómo los componentes se comunican entre sí (envían datos de padres a hijos) y hacen que los componentes sean reutilizables.

El estado es su información, es mutable, puede hacer cualquier cosa que necesite con ella, los accesorios son datos de solo lectura, generalmente cuando pasa accesorios ya ha trabajado con sus datos y necesita el componente hijo para representarlos o si sus accesorios son un la función la llamas para realizar una tarea

El estado es el origen de la verdad, donde viven sus datos. Se puede decir que el estado se manifiesta a través de accesorios.

Proporcionar accesorios a los componentes es lo que mantiene su UI sincronizada con sus datos. Un componente es realmente solo una función que devuelve marcado.

Dados los mismos accesorios (datos para mostrar) siempre producirá el mismo marcado .

Por lo tanto, los accesorios son como las tuberías que transportan los datos desde el origen a los componentes funcionales.

Props: representa datos de "solo lectura", que son inmutables y hacen referencia a atributos del componente primario.

Estado: representa datos mutables que, en última instancia, afectan lo que se representa en la página y lo gestiona internamente el propio componente y cambia las horas extraordinarias comúnmente debido a la entrada del usuario.

La principal diferencia es que el estado es privado para un componente y se puede cambiar dentro de ese componente solo mientras que los accesorios son solo valores estáticos y clave para el componente secundario que se pasa a través del componente primario y no se puede cambiar dentro del componente secundario