Recién comencé a aprender React y quiero comprender la diferencia en los accesorios y el comportamiento del estado. Tengo dos archivos App.js y Counter.js.
Aplicación.js:
import Counter from './Counter' function App() { return ( <Counter initialCount={2} /> ) } export default App;Y Contador.js:
import React, { Component } from 'react' export default class Counter extends Component { constructor(props) { super(props) this.state = { count: props.initialCount } } render() { return ( <div> <button>-</button> <span>{ this.state.count }</span> <button>+</button> </div> ) } } Cuando cambio initialCount en App.js y guardo el archivo, solo cambia en el navegador automáticamente si tengo { this.props.initialCount } en <span></span> .
Si tengo { this.state.count } entre intervalos (como en el código anterior) y trato de cambiar initialCount en App.js y presiono guardar, entonces el valor no cambia en el navegador. Si actualizo el navegador o cambio algo en Counter.js después de eso y presiono guardar (incluso agregando espacio simple en cualquier lugar), entonces actualiza el valor sin tener que actualizar el navegador.
Yo uso Chrome y ReactDeveloperTools. Desde la pestaña Componentes, puedo ver que después de presionar Guardar en App.js, cambia los accesorios al nuevo valor, pero el estado sigue siendo el mismo.
Parece que el constructor solo llamó una vez. Pero todavía no entiendo este comportamiento.
El constructor del componente solo se llama una vez, cuando se crea el componente. Entonces, cuando, por ejemplo, cambia initialCount mediante programación, el constructor de Counter no se volverá a llamar.
Esta es una función de Hot Reloading que no recrea el componente Counter cuando cambia los accesorios en la aplicación, pero se comporta como los accesorios del componente Counter se cambian mediante programación.
Parece que estás confundiendo dos cosas diferentes. Una cosa es una repetición del cambio de datos en React (por ejemplo, cambios en el valor del contador en el evento Click) y la otra es un cambio manual de datos codificados en la aplicación.
Parece que está describiendo una representación forzada con un cambio en su código fuente. Lo más probable es que esté conectado con la herramienta de observación que está configurada por una herramienta que administra las actualizaciones automáticas durante el desarrollo en un servidor local (probablemente la configuración de Webpack / Create React App). Traté de simular en este sandbox pero no pude, ya que el valor del contador siempre se actualiza a pesar de usar estado o accesorios.
Además, para su información, tenga cuidado al establecer el estado con accesorios. Puedes leer este breve post al respecto.