react pagina entre diferencia app javascript reactjs

javascript - pagina - react native



¿Cuál es la diferencia entre estado y accesorios en React? (30)

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 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 getInitialState través de accesorios o configurarse en el componente React a través de getInitialState ?

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

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

Componente de reacción

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

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

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

Componente de reacción

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

Créditos: Manoj Singh Negi

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

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

Del libro de Andrea Chiarelli "Reacción inicial: simplifique su flujo de trabajo de desarrollo frontend y mejore la experiencia del usuario de sus aplicaciones con React":

Cada componente React tiene una propiedad de utilería . El propósito de esta propiedad es recopilar datos de entrada pasados ​​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 ​​utilizando 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 los datos cambian. 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 admite la propiedad del estado , 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 usar el método setState () . Estado La inicialización es el único caso en el que puede asignar un valor a la propiedad this.state sin usar setState () .

setState () combina 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 debe llamar a render () explícitamente

El estado reside dentro de un componente donde los accesorios se pasan de padres a hijos. Los accesorios son generalmente inmutables.

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

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}

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

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

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.

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

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. Props 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.

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

El estado son sus datos, es mutable, puede hacer lo que necesite con ellos, 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 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

class DummyComponent extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } // when using the component <DummyComponent name="Manoj" /> <DummyComponent name="Ajay" />

  • 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 eventos del usuario. Este tipo de logística debe encapsularse en un número moderado de componentes con estado, mientras que toda la lógica de visualización y formato debe pasar a muchos componentes sin estado.

fuentes

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

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]

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}

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.

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

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, 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 su valor de utilería a su componente hijo

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)

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.

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.

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 elemento secundario dentro del método de representación del elemento primario como el segundo argumento para React.createElement() o, si está utilizando JSX, los atributos de etiqueta más familiares.

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

El valor de estado del padre de childsName convierte en el childsName del niño. 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 hijo pasaría su nuevo nombre solicitado como argumento a 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
    • 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, haciendo más fácil 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 representar los datos de manera 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 construir 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

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 {name: ''Sara''} como accesorios del componente Welcome. 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>); } }

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.

Tanto el estado como los accesorios en reacción se usan 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.

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

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

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

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.

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) al inferior (secundario).

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>

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