¿Cuál es la diferencia entre el estado y los accesorios en React?

661

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

Both props and state changes trigger a render update.

Más adelante en el artículo dice:

Props (short for properties) are a Component's configuration, its options if you may. They are received from above and immutable.

  • Entonces, ¿los accesorios pueden cambiar pero deberían ser inmutables?
  • ¿Cuándo debería usar los accesorios y cuándo debería usar el estado?
  • Si tiene datos que necesita un componente de React, ¿debería pasar a través de los accesorios o la configuración en el componente de React a través de getInitialState?
2
764

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

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

El valor de estado del padre se childsNameconvierte en el del hijo this.props.name. Desde la perspectiva del niño, el apoyo del nombre es inmutable. Si es necesario cambiarlo, el padre simplemente debería cambiar su estado interno:

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

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

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

El hijo pasaría su nuevo nombre solicitado como un 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 });
}
11
  • 2
    ¡Gracias! Entonces, un par de preguntas más: 1. ¿Por qué la gente dice que los accesorios no deberían cambiar? 2. ¿Dónde pones tu bootstrapping de datos? En la inicialización del componente como getInitialState, ¿o lo coloca fuera del componente y lo renderiza cuando hay datos disponibles? 16/01/15 a las 22:38
  • 44
    1. Este es el aspecto "funcional" de React. Todos los datos (casi) fluyen hacia abajo. Dado que el accesorio es propiedad del padre, solo el padre debe cambiarlo. Idealmente, los niños deberían ser apátridas. Eso no es posible en la práctica (consulte la documentación de formularios en el sitio de React). 2. Puede introducirlo en la parte superior, que es una práctica recomendada, o puede almacenarlo en objetos separados. Un enfoque popular es Flux, que utiliza objetos singleton llamados Stores. Esto es parte de un patrón arquitectónico más amplio. También es de código abierto de Facebook y está diseñado para funcionar con React.
    Todd
    16 de enero de 2015 a las 23:32
  • 3
    ¿Entonces las tiendas son como grandes variables globales? 7/11/15 a las 16:07
  • 6
    Sí, las tiendas Flux son cachés del lado del cliente. También hay otros patrones como el recientemente lanzado Relay, de Facebook y Redux.
    Todd
    8/11/15 a las 18:26
  • 12
    Para resumir esto un poco: el estado son datos de componentes que se administran desde adentro, los accesorios son datos de componentes que se administran desde arriba y se pasan.
    Mark
    20/12/18 a las 15:27
253

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

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

Utilice accesorios para pasar los controladores de eventos y datos a sus componentes secundarios.

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

Accesorios

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

Estado

  • debe ser administrado en su controlador de vista
    • su componente de nivel superior
  • es mutable
  • tiene peor desempeño
  • no se debe acceder desde componentes secundarios
    • transmítelo con accesorios en su lugar

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this. - https://facebook.github.io/react/tips/communicate-between-components.html

What Components Should Have State?

Most of your components should simply take some data from props and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.

Try to keep as many of your components as possible stateless. By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.

A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

What Should Go in State?

State should contain data that a component's event handlers may change to trigger a UI update. In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in this.state. Inside of render() simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

5
  • 2
    En desacuerdo, usar todos los accesorios es en realidad menos eficaz para transmitir datos. Simplemente configure la tienda para los componentes secundarios, entonces no tendrá que lidiar con un lío de accesorios y cuando los accesorios cambien, tendrá que actualizar sus componentes. Simplemente actualice su tienda y deje que el componente obtenga sus datos de su tienda. 17 de julio de 2016 a las 6:07
  • ¿Puedes decirme por qué los accesorios son más interpretativos que los estados? Gracias.
    hqt
    18 dic 2017 a las 18:13
  • @hqt Creo que debido a que es inmutable, la comparación interna para cambiar los valores es más rápida
    Gaspar
    13 de mayo de 2019 a las 14:59
  • @BentOnCoding, buen día, por favor, ¿puede ayudarme? ¿Puedo imaginar un estado así? ¿Siempre que haya datos que vayan a cambiar dentro de un componente en INTERACCIÓN DEL USUARIO, aquí es donde se usa el estado?
    Dickens
    10/09/19 a las 15:33
  • @Dickens sí, el estado se usa para almacenar datos que serán cambiados por la interacción del usuario. Pero también se puede usar para almacenar otras piezas de información que cambian, por ejemplo, datos en tiempo real provenientes de una API. 5 de febrero a las 18:13
110

You can understand it best by relating it to Plain JS functions.

Simplemente pon,

Estado es el estado local del componente al que no se puede acceder ni 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 a los componentes la capacidad de recibir datos de su componente principal en forma de accesorios. Son equivalentes a los parámetros de 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: Explicación de React State vs Props

2
  • 20
    En realidad, esta es una respuesta muy útil. Después de leer esto, puedo entender las respuestas más completas. Gracias.
    Aaron
    3/11/18 a las 19:28
  • 4
    React component = plain JS function es una forma brillante de explicar esto claramente. Y con React moviéndose cada vez más hacia componentes funcionales, esto se está volviendo aún más literalmente el caso. 25/10/19 a las 5:43
55

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


utilería 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 unir los accesorios de sus componentes secundarios. Los accesorios no tienen que ser solo datos; las funciones de devolución de llamada se pueden pasar como accesorios.

estado

El estado es una estructura de datos que comienza con un valor predeterminado cuando se monta un componente. Puede cambiar 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 utilería y estado

                                                   props   state
    Can get initial value from parent Component?    Yes     Yes
    Can be changed by parent Component?             Yes     No
    Can set default values inside Component?*       Yes     Yes
    Can change inside Component?                    No      Yes
    Can set initial value for child Components?     Yes     Yes
    Can change in child Components?                 Yes     No
  • Tenga en cuenta que tanto las propiedades como los valores iniciales de estado recibidos de los padres anulan los valores predeterminados definidos dentro de un componente.

¿Debe tener estado este componente?

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

Componente sin estado Solo accesorios, sin estado. No hay mucho que hacer 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 de probar.

Componente con estado Ambos apoyos y estado. Se utilizan cuando su componente debe conservar algún estado. Este es un buen lugar para la comunicación cliente-servidor (XHR, sockets web, etc.), procesar datos y responder a los eventos del usuario. Este tipo de logística debe encapsularse en una cantidad moderada de componentes con estado, mientras que toda la lógica de visualización y formato debe moverse hacia abajo en muchos componentes sin estado.

fuentes

2
  • 1
    ¿Qué quiere decir con "indicar el valor inicial recibido de los padres"? Hasta donde yo sé, el estado se define solo en el alcance de un solo componente y no se puede cambiar directamente desde el exterior. 25 de agosto de 2017 a las 19:33
  • @MaximKuzmin Creo que es una referencia al patrón común de incorporar un accesorio como 'initialColor' para inicializar un estado como 'color'. Al estado se le da inicialmente el valor de la propiedad (recibido del padre) y luego continúa actuando como un estado regular después de eso. Puede ser un poco confuso incluir eso en una introducción a estado frente a accesorios, pero es un patrón importante a conocer. 4/11/19 a las 16:13
22

props (short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).

Así que simplemente el estado 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 apoyo 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 completo del 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>
    );
  }
}

Niño (componente sin estado):

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

La diferencia clave entre accesorios y estado es que el estado es interno y está controlado por el componente en sí, 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"));

Estado VS Props

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

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

8

Tanto el estado como los accesorios en reaccionar se utilizan para controlar los datos en un componente, generalmente los accesorios los establece el padre 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 pasarlos a los componentes secundarios.

6

como aprendí mientras trabajaba con react.

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

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

5

Estado:

  1. los estados son mutables.
  2. Los estados asociados con los componentes individuales no pueden ser utilizados por otros componentes.
  3. los estados se inicializan en el montaje del componente.
  4. Los estados se utilizan para representar cambios dinámicos dentro del componente.

accesorios:

  1. los accesorios son inmutables.
  2. puede pasar accesorios entre componentes.
  3. Los accesorios se utilizan principalmente para comunicarse entre componentes. Puede pasar de padre a hijo directamente. Para pasar de hijo a padre, necesita utilizar el concepto de elevar 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>
      );
     }
}
1
  • {"message": "Error de sintaxis no detectado: token inesperado <", "nombre de archivo": " stacksnippets.net/js ", "lineno": 17, "colno": 9} 8 de septiembre de 2018 a las 6:36
4

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

props - Es una propiedad especial que es inmutable por naturaleza y se usa en caso de pasar por valor de padre a hijo. Los accesorios son solo un canal de comunicación entre Componentes, siempre moviéndose de arriba (padre) a abajo (hijo).

a continuación se muestra un ejemplo completo de combinación del 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>
4

Props: Props no es más que una 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 de bienvenida. Para pasar datos de un componente principal a un componente secundario, usamos accesorios. Los apoyos son inmutables. Durante el ciclo de vida de un componente, los accesorios no deben cambiar (considérelos inmutables).

Estado: el estado es accesible solo dentro del Componente. Para realizar un seguimiento de los datos dentro del componente, utilizamos el estado. podemos cambiar el estado por 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>);
  }
}
3

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 primer nivel, está más relacionado con el diseño de su aplicación que con el funcionamiento de React. La forma más sencilla de decidir, en mi opinión, es pensar si este dato en particular es útil para la aplicación en su conjunto o si se trata de información local. Además, es importante no duplicar el estado, por lo que si se puede calcular algún dato a partir de los accesorios, debería calcularse a partir de los accesorios.

Por ejemplo, supongamos que tiene algún control desplegable (que envuelve 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, digamos 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 un accesorio y mantener el estado local abierto / cerrado. Además, para hacerlo funcional, pasaría un controlador onChange del 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 se puede mantener 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 cambia su valor.

El siguiente código no funciona completamente, necesita CSS y manejar los eventos de clic / desenfoque / cambio del menú desplegable, pero quería mantener el ejemplo al mínimo. Espero que ayude a comprender 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')
);
3

El estado es la forma en que reaccionar se ocupa de la información contenida en su componente.

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

Por lo general, la mejor forma 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 puede hacer:

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 simplemente usar atributos de objeto como siempre lo hacemos en la programación OO? Por lo general, la información contenida en su estado no debe ser estática, cambiará con el tiempo y su Vista deberá actualizarse para reflejar estos cambios. State ofrece esta funcionalidad de forma sencilla.

¡El estado DEBE SER INMUTABLE! y no puedo hacer suficiente énfasis 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 a su método de renderización del componente 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

0
3

Los accesorios simplemente son una abreviatura de propiedades. Los accesorios son la forma en que 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 establezcan incluso si un componente principal no los transfiere.

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

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 sea el padre? ¿Qué pasa si el usuario ingresa datos directamente al componente?

Bueno, es por eso que tenemos estado.

ESTADO

Los accesorios no deberían cambiar, así 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 estado. Siéntete libre de dejar caer ese pequeño bocado en las fiestas y ver a la gente alejarse de ti.

Por lo tanto, el estado se usa para que un componente pueda realizar un seguimiento de la información entre cualquier renderizado que realice. Cuando establecesState, actualiza el objeto de estado y luego vuelve a renderizar el componente. Esto es 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 consultar 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

Props y State hacen cosas similares pero se usan de diferentes maneras. La mayoría de sus componentes probablemente no tendrán estado.

Los accesorios se utilizan para pasar datos de padres a hijos o por el propio componente. 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 ingresará datos y esto actualizará lo que ve.

3

En breve.

props values can't be changed [immutable]

state values can be changed, using setState method [mutable]

3

Accesorios

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

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

Estado

  • uso estatal dentro de un componente de clase

  • estado cambiar un valor dentro de un componente

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

El estado tiene un papel importante en reaccionar

2

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 (Parent) que tiene un nombre como su estado que se pasa al componente secundario (clase Child) como un accesorio y el componente secundario lo representa usando {this.props.name}

2

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 consulte estas publicaciones Uso del estado en React y Uso de accesorios en React

1

En respuesta a la pregunta inicial acerca de que los accesorios son inmutables, se dice que son inmutables en lo que respecta al componente secundario, pero se pueden cambiar en el elemento principal.

1

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 de estado utilizando establecer estado. A continuación, 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, esto 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 el valor de sus accesorios a su componente secundario

1

Tiene algunos datos que los usuarios están ingresando 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 transmitirse 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 gestionarían 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 para usarlo.

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

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

React controla y renderiza DOM según el estado. Hay dos tipos de estados de componentes: props es el estado que se transfiere entre componentes y el estado es el estado interno de los componentes. Los accesorios se utilizan para la transferencia de datos del componente principal al componente secundario. Los componentes también tienen su propio estado dentro: estado que solo se puede modificar dentro del componente.

Por lo general, el estado de cierto componente podría ser la utilería del componente secundario, las proposiciones se pasarán a los niños, lo que se indica dentro del método de representación del componente principal.

1

De: Andrea Chiarelli libro "Beginning React: Simplifique su flujo de trabajo de desarrollo de frontend y mejore la experiencia del usuario de sus aplicaciones con React":

Cada componente de React tiene una propiedad de props . El propósito de esta propiedad es recopilar la entrada de datos que se pasa al componente en sí. El atributo JSX se adjunta a un elemento React, una propiedad con el mismo nombre se adjunta al  objeto props . Entonces, podemos acceder a los datos pasados ​​usando la propiedad adjunta. Además, la inmutabilidad de los accesorios nos permite pensar en los componentes como funciones puras , que son funciones que no tienen efectos secundarios (ya que no cambian sus datos de entrada). Podemos pensar en los datos que pasan de un componente a otro como un flujo de datos unidireccional, desde el componente principal hacia los componentes secundarios. Esto nos da un sistema más controlable.

React proporciona un mecanismo para admitir la representación automática de un componente cuando cambian los datos. Tal mecanismo se basa en el concepto de estado . El estado de reacción es una propiedad que representa datos que cambian con el tiempo. Cada componente es compatible con la propiedad estatal , pero debe usarse con cuidado. Se dice que los componentes que almacenan datos que pueden cambiar con el tiempo son  componentes con estado . Un componente con estado almacena el estado en la propiedad this.state . Para informar a un componente que el estado ha cambiado, debe utilizar el método setState () . La inicialización del estado es el único caso en el que puede asignar un valor althis.state propiedad sin usar setState () .

setState () fusiona datos nuevos con datos antiguos ya contenidos en el estado y sobrescribe el estado anterior setState () activa la ejecución del método render () , por lo que nunca debes llamar a render () explícitamente

0

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 las puertas y ventanas de la casa. Los accesorios también son inmutables. El componente secundario no puede cambiarlos / actualizarlos.

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

0

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

0

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

0

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 interfaz de usuario sincronizada con sus datos. Un componente es en realidad solo una función que devuelve marcado.

Dados los mismos accesorios (datos para que se muestren), siempre producirá el mismo marcado .

Entonces, los accesorios son como las tuberías que transportan los datos desde el origen hasta los componentes funcionales.

0

Props: representa datos de "solo lectura", que son inmutables y se refieren a atributos del componente principal.

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 con el tiempo debido a la entrada del usuario.

0