javascript - Componentes controlados frente a componentes no controlados ReactJs

onchange

Question

Casi en cada tutorial de ReactJS o incluso en la documentación oficial para manejar los cambios de entrada, se recomienda onChange. Usamos un estado para el valor y lo cambiamos mediante onChange. Esto activa el renderizado en cada golpe de tecla. Asi que,

1. ¿Es realmente tan barato renderizar?
2. ¿El valor de entrada no se mantiene en DOM? Entonces, no hay diferencia entre DOM y VirtualDOM, por lo tanto, aunque la representación ocurre, ¿nada cambia? (Probabilidad errónea probablemente).

Solo por diversión y aprendizaje, probé esos:

1. Usó una función personalizada y una variable para mantener el valor, establecer el estado después de la última entrada, no en cada pulsación de tecla, pasar ese componente relacionado con el valor, etc.
2. Usado en Blur en lugar de onChange.

Pero no me gusta ninguno de ellos y quiero hacer esta pregunta. Si los cambios en el valor de entrada en vivo no son importantes para nosotros, solo nos preocupamos por la última entrada, aún así ¿Cambiar es el camino a seguir?

Answer 1

Para mí, la razón principal para usar componentes controlados, aparte de la validación en tiempo real, es el principio de "Fuente única de verdad".

En el caso de un componente no controlado, el valor de la entrada puede ser diferente entre la entrada del formulario y la utilizada en su componente React. Puede obtener el nuevo valor en onBlur , pero hay formas en que el valor en DOM puede cambiar sin emitir este evento, y en ese caso el valor que ve el usuario y el que está trabajando puede diferir, lo que resulta en un resultado diferente de lo que el usuario espera.

Puede que esto no sea una gran preocupación, pero dado que React predica mucho este principio (como no mantener los valores en un estado que se puede derivar de otros estados), lo haría por razones de coherencia.

Además, no necesita preocuparse por el costo de volver a renderizar en cada entrada.

Answer 2

React maneja la re-renderización de manera muy eficiente. Solo re-renderiza los cambios.

Hay dos formas de configurar las entradas.

Primero: entrada controlada

Con una entrada controlada, usted especifica el valor de la entrada con una variable de estado en general (o incluso un accesorio en algunos casos). En este caso, debe llamar a la función onChange para establecer el estado (o el accesorio) ya que el valor se establece en un estado / accesorio y debe cambiarlo para cambiar el valor; de lo contrario, seguirá siendo el mismo.

Ex

<input value={this.state.textVal} onChange={(e) => this.setState({textVal: e.target.value}) />

Las ventajas de tener una entrada controlada es que tiene el valor disponible en todo su componente Reaccionar y no necesita que se active un evento en la entrada o acceda al DOM para obtener el valor.

Segundo: entrada no controlada

En este caso, no necesita un controlador onChange para obtener la entrada, ya que no especifica un valor personalizado para la entrada. El valor de la entrada se puede obtener accediendo al dom o desde un objeto de evento

Ex:

<input type="text" onBlur={(e) => {console.log(e.target.value)}/>

La otra forma de obtener el valor de entrada será accediendo al DOM, lo que hacemos usando referencias como this.inputVal.value

Vea esta respuesta sobre cómo usar la referencia:

En React .js: ¿hay alguna función similar como document.getElementById () en javascript? ¿Cómo seleccionar cierto objeto?

Con respecto a su pregunta sobre React virtualDOM

El DOM virtual se utiliza para una representación eficiente del DOM. Esto no está realmente relacionado con la verificación sucia de sus datos. Puede volver a renderizar utilizando un DOM virtual con o sin verificación sucia. Hay cierta sobrecarga en el cálculo de la diferencia entre dos árboles virtuales, pero la diferencia de DOM virtual se trata de comprender qué necesita actualizarse en el DOM y no si sus datos han cambiado o no.

El árbol virtual se vuelve a representar solo cuando cambia el estado. Por lo tanto, usar un observable para verificar si el estado ha cambiado es una forma eficiente de evitar reproducciones innecesarias, lo que causaría muchas diferencias innecesarias en los árboles.