En reaccionar, un componente no controlado es un componente que no está controlado por su componente principal; un componente no controlado es un componente independiente que no necesita pasar un valor y no tiene ninguna intersección con el componente principal del componente actual. un componente, solo El componente actual se encapsulará como un componente no controlado cuando solo se use con fines de visualización y no haga ninguna diferencia.
El entorno operativo de este tutorial: sistema Windows 10, versión de reacción 17.0.1, computadora Dell G3.
¿Qué es un componente no controlado?
Comenzamos con dos palabras, es decir, componente. Controlado y no controlado son conceptos desde la perspectiva de los componentes. El significado literal es que los componentes no están controlados, no están controlados por nadie, por supuesto, no por el componente principal. ¿Las características de los componentes no controlados? Es decir, toda lógica solo está relacionada consigo misma y no tiene comunicación ni intersección con otros componentes.
En HTML, elementos de formulario como, y mantienen su propio estado y se actualizan según la entrada del usuario. Pero en React, todos estos componentes son componentes no controlados sin ningún procesamiento, porque cuando realmente los usa, encontrará que estos componentes no actualizarán automáticamente el valor que ingresamos sin ningún procesamiento. No se puede obtener el valor ingresado usando.
Ejemplo
importar React, { Componente } de 'react'; importar ReactDOM de 'react-dom'; clase Demo1 extiende Componente { render() { return ( <input /> //<ABC /> ) }}ReactDOM.render(<Demo1 />, document.getElementById('contenido'))Explicación de componentes no controlados.
Dado que un componente no controlado es un componente que no tiene intersección con el mundo exterior, entonces ya no podemos usar componentes no controlados. La respuesta es no. En realidad, podemos usar componentes no controlados en determinadas circunstancias.
Componente de carrusel (no controlado), piense si nuestra página necesita un componente de carrusel, y el componente solo se usa una vez y no está destinado a ser reutilizado. Ponemos el código del carrusel en un componente del carrusel. No es necesario interactuar con el mundo exterior, por lo que cuando el componente del carrusel que escribimos está codificado independientemente de cómo se ejecute el gráfico del carrusel actual, incluidos los eventos de clic, el tiempo del carrusel y otras condiciones, entonces el componente del carrusel es un componente no controlado. Por supuesto, este ejemplo es un poco exagerado. Cuando creamos componentes, debemos querer un componente universal y reutilizable. Necesitamos conocer el estado actual del carrusel, lo que hará que nuestros componentes no controlados ya no sean aplicables.
Desarrollo de páginas estáticas Al desarrollar páginas estáticas, generalmente no usamos marcos y solo usamos HTML para escribir archivos separados. El rendimiento puede ser mejor después del empaquetado, pero si una determinada página de nuestro proyecto es una página estática, ¿la usaremos? Las páginas mostradas por nuestros componentes no controlados no tienen encapsulación y solo pueden ser páginas personalizadas. Cuando los componentes de nuestra página existen solos, son componentes no controlados.
Un componente no controlado es un componente independiente que no necesita pasar un valor y no tiene ninguna intersección con el componente principal del componente actual. Cuando encapsulamos el componente, solo se usará cuando el componente actual sea solo para fines de visualización. y no hay diferencia. Encapsulado como un componente no controlado.
Amplíe sus conocimientos:
¿Qué es un componente controlado?
Esto es lo opuesto a un componente no controlado. Literalmente significa un componente controlado por un componente principal. Se llama componente controlado.
La forma en que el componente principal controla al componente secundario se controla, por supuesto, pasando valores cuando el valor de accesorios es utilizado por el componente secundario y el contenido, método o resultado de visualización del componente secundario cambia debido al valor pasado por el componente principal. , el componente secundario es un componente controlado controlado por el componente principal
Ejemplo
importar React, {Componente} desde 'react'; importar ReactDOM desde 'react-dom'; clase Entrada extiende Componente {constructor(){ super(); this.state = {val:''}; =>{ let val = event.target.value; this.setState({val}) } render(){ return ( <div> <p>{this.state.val}</p> //<tipo de entrada= "text" value='123' /> <input type="text" value={this.state.val} onChange={this.handleChange} /> // La entrada es un componente controlado controlado por las propiedades del objeto de estado </ div> ) }}ReactDOM.render(<Input/>,ventana.app)No debemos considerar la entrada como un componente de entrada. Deberíamos considerar la entrada como cualquier componente al que hacemos referencia o encapsulamos nosotros mismos. Después de que le pasamos un valor a este componente, incluso si es una cadena fija que le pasamos, sigue siendo esencialmente el. Al igual que los componentes controlados, los componentes controlados no analizan si existe un enlace bidireccional de datos, sino si están controlados por naturaleza. Cuando pasamos un valor fijo, el valor del componente de entrada es fijo y no puede. Se puede modificar, aunque pasamos accesorios es un valor codificado, pero este valor aún controla el componente de entrada.
Explicación de los componentes controlados.
Los componentes controlados en realidad aparecen en todos los aspectos de nuestra programación. Cualquier componente que eliminemos por separado probablemente sea un componente controlado. Después de todo, la demanda de páginas estáticas aún es pequeña y nuestro js maneja la lógica la mayor parte del tiempo. debe ser interactivo.
Por ejemplo, el código del componente de entrada anterior es equivalente al área de texto y a los componentes seleccionados. Todos necesitamos pasar algunos parámetros (accesorios) para informar las reglas de representación específicas y mostrar el contenido del componente. para que podamos controlar el componente.
Vinculación bidireccional de datos: de hecho, cuando pasamos cualquier valor o atributo a valor, el significado del componente se ha cambiado a un componente controlado, pero cuando vinculamos onChange, se le da un cambio de datos a nuestro componente a través de onChange. En el método de devolución de llamada, cambiamos los datos a través de setState para volver a renderizarlos. Este es el enlace bidireccional de los datos que controla la vista y la vista controla los datos.
Resumen: Los componentes controlados y los componentes no controlados son un concepto que indica si el componente actual está controlado y si es un componente separado que no tiene interacción con otro contenido. En pocas palabras, un componente completamente independiente puede verse como un componente no controlado, todos los demás. Los componentes están controlados.