déjame hablarte de tres errores
que los desarrolladores reaccionan cometen, que van desde errores de diseño hasta errores
que desactivarán tu aplicación y nosotros no queremos hacerlo, aprenderemos sobre el
por qué de sus errores y cómo solucionarlos, y aprenderemos sobre las funciones internas de reacción
en el proceso, entremos directamente en el error número uno: invocar
funciones de componentes directamente así que aquí tenemos una aplicación que tiene
dos componentes, tenemos un componente de campo de correo electrónico y tenemos un componente de aplicación y
el campo de correo electrónico es simplemente un entrada de control solo tiene algún estado para administrar el correo electrónico y
luego el campo de entrada y luego el componente de la aplicación actualmente solo tiene un dividendo, así que
vayamos y traigamos el campo de correo electrónico a nuestra aplicación ahora voy a usar la sintaxis jsx para
esto porque es lo más fácil de hacer bien, esto se ve bastante bien, tenemos nuestro
campo de correo electrónico aquí arriba, escriba en él se ve bien y si vamos aquí a nuestra pestaña de componentes de herramientas de codo reactivo
que definitivamente deberías haberlo instalado .
Vemos que tenemos dos componentes. Tenemos el
componente de la aplicación en la parte superior que no tiene estado. Entonces, tal vez el componente del campo de correo electrónico aquí abajo que tiene
un gancho que tiene nuestro estado actual. Incluso puedes cambiar ese estado y nosotros. puedo ver ese estado
actualizándose dinámicamente, qué genial es que definitivamente deberías tener esto instalado,
así que intentemos pensar y reaccionar, veamos esto y digamos wow, sabes que este campo de correo electrónico es
una función que deberíamos poder llamar esa función es No es lo que está haciendo esta sintaxis jsx,
bueno, intentemos eso, vamos y, en lugar de usar jsx aquí, vamos a crear una expresión, obtener el
campo de correo electrónico e invocarlo.
parece funcionar, la única indicación de que algo puede estar mal es que ahora ya no tenemos el componente del campo de correo electrónico
, solo tenemos el componente de la aplicación y tenemos algo llamado enlace de campo de correo electrónico,
que es amable de extraño, lo que esencialmente hemos hecho es que hemos fusionado la aplicación y el campo de correo electrónico en
un súper componente y hemos convertido el campo de correo electrónico en nuestro propio enlace personalizado y lo
invocamos justo en el medio de nuestra declaración de devolución ahora un inconveniente
inmediato es cuando cambiamos el estado aquí, el componente de la aplicación se vuelve a procesar de inmediato, por lo
que hemos perdido la encapsulación de volver a procesar cuando teníamos el campo de correo electrónico como su propio componente
antes de cambiar los datos en ese correo electrónico solo actualizaría el componente del campo de correo electrónico ahora En
realidad, también estamos actualizando la aplicación, así que de inmediato, algo que no es genial, pero bueno,
sigamos, veamos si podemos hacer más con esto.
ahora vemos el ninja de la consola aquí, que es este
texto rojo que nos muestra una vista previa de las próximas atracciones, dijo que generó más ganchos que durante el
procesamiento anterior, lo cual es absolutamente cierto, así que volvamos aquí es todavía funciona bien,
así que parece que funciona e incluso puedo escribir cosas allí y funciona, así que ese es uno
de los problemas de este error en particular, parece que funciona hasta que deja de hacerlo y
luego explota y es malo así que hagamos que se apague, volvamos a nuestro código,
deshagámonos de estos campos de correo electrónico adicionales e imaginemos que nuestro gerente de producto nos pide que
coloquemos un interruptor sobre este campo de correo electrónico, básicamente alterna si ese campo de correo electrónico se muestra o no
entonces iremos y agregaremos un acosador para ese interruptor, lo llamaremos enviar correo electrónico y luego
agregaremos alguna interfaz de usuario para la casilla de verificación, esto solo tiene el campo de entrada que es el control,
que es un campo de casilla de verificación y luego enviarme correos electrónicos Presiona guardar.
Vuelvo aquí a Arc. Funciona sin problemas, pero en realidad no
oculta ni muestra este campo de correo electrónico, así que vamos a usar un envío de correo electrónico para alternar eso, así que
diremos si tenemos el campo de correo electrónico de envío verdadero. muestre el campo de correo electrónico y vamos a comenzar
en false WH ich significa que si por defecto no lo somos , vamos a echar un vistazo y tenemos 70 correos electrónicos, hagamos
clic en eso y boom, entonces, ¿qué pasó? Bueno, ahora hemos eliminado la aplicación que tenemos de acuerdo.
para reaccionar generó más ganchos que durante el anterior renderizar, entonces, ¿cómo sucedió eso? Si
miramos hacia atrás aquí la primera vez que renderizamos la aplicación , teníamos este correo electrónico de envío y envío de correos electrónicos
renderizados como falsos y ese es el único gancho que sería el gancho de U State que vino aquí y debido a que esto es
falso, nosotros no mostró el campo de correo electrónico, por lo que tuvimos un enlace en la aplicación y luego, la segunda vez, cuando
hicimos clic en enviar un correo electrónico y lo cambiamos a verdadero, volvimos a procesar la aplicación y vinimos
aquí y ahora fuimos a enviar el correo electrónico dijo genial, es verdad, así que vamos a renderizar el
campo de correo electrónico que trajo otro gancho así que comenzamos con uno y pasamos a dos y
eso viola la regla de los ganchos que nunca puede tener una cantidad diferente de ganchos según
el renderizado que nunca puede tener ganchos condicionales así que ahí tienes, la solución para esto es bastante
obvia, solo cambia el campo de correo electrónico para que se invoque jsx y ahora todo funciona como se esperaba y podemos ir a
echar un vistazo a nuestros componentes y podemos ver que ahora la aplicación tiene su propio estado, que es actualmente
verdadero porque esto es verdadero falso verdadero falso verdadero y luego el campo de correo electrónico es su estado, que
actualmente está configurado en nada, pero podemos ir y configurarlo para que vaya perfecto y todo esté haciendo
lo que debería cuando el campo de correo electrónico actualice su estado solo eso actualizaciones y al enviar actualizaciones por correo electrónico,
luego la totalidad de las actualizaciones de la aplicación, por lo que todo está bien, pero volvamos y echemos un vistazo al
código y veamos si podemos entender esto un poco mejor.
Entonces, ¿cuál es el ingrediente secreto aquí de
jsx por qué funciona? e invocar el campo de correo electrónico directamente no funciona bien, así que comprenda que
debe entender cómo funciona su entorno de reacción , no envía jsx al navegador, envía
JavaScript al navegador, así que si tiene JavaScript jsx o mecanografiado más jsx tiene
que transpilar ese código fuente este código fuente aquí mismo en JavaScript antes de enviarlo
al navegador y eso a menudo lo hacen sistemas como Babel o mecanografiado, así que voy a ir y
tomar esta etiqueta de campo de correo electrónico y llévelo a Babel Rebel, así que este es un banco de pruebas, es un sitio
web puede simplemente pegar su código y ver qué el transpilador de mamíferos va a crear dado el
código fuente de entrada y, por lo tanto, el código fuente de entrada solo será un correo electrónico campo aquí y lo que bammal
crea es react.createelement email field null wow, eso es un puñado, así que vamos a tomarlo y
pegarlo aquí y ver si realmente funciona, así que reemplazo el campo de correo electrónico aquí con esta
salsa secreta que se creó, veamos cómo eso funciona, vuelve a Arc y sí, se ve genial,
así que esto es exactamente lo que teníamos antes, así que lo que es react.create element well react.crate element
es cómo creas componentes en react, así que le das el componente función o clase de componente
o el nombre de la etiqueta también puede hacer cosas como div aquí y está bien y lo que hace
es invocar en este caso la función de campo de correo electrónico recupera los elementos resultantes,
los agrega al árbol vdom y dice que parte del árbol vdom está controlado por
ese campo de correo electrónico de la función de representación de componentes de modo que cuando el campo de correo electrónico se
actualiza , esa parte del árbol se actualiza el segundo parámetro aquí son las propiedades
no estamos enviando ninguna propiedad en este caso pero si tuviéramos que enviar propiedades iría
y enviaría un objeto aquí con todas sus propiedades y luego el tercer argumento sería cualquier elemento
secundario de este componente que podría ser solo un elemento o una matriz de elementos
o lo que tiene ahora, obviamente, la solución más fácil en este caso es alguien que no reacciona y crea el
elemento manualmente, sino que deja que jsx lo haga por nosotros y listo, ¿qué hemos aprendido?
Hemos aprendido a no invocar las funciones de los componentes directamente.
y hemos aprendido un poco sobre
los elementos internos de reacción y el elemento react.crate ahora nuestro próximo error es más
un problema de diseño de codificación. El error número dos es anidar las
definiciones de los componentes. Tenemos dos componentes aquí. Tenemos la aplicación que tenemos. tengo un campo de correo electrónico y digamos que
no queremos que el campo de correo electrónico sea utilizado por nada que no sea la aplicación, bueno, lo que he visto hacer es
ir y tomar la definición del campo de correo electrónico y literalmente colocarlo dentro de la definición de la aplicación
como esto y se ve bien, ¿verdad? Me refiero a una especie de contención ordenada, así que veamos si realmente funciona
y cuando lo sepas, funciona y esto parece realmente bastante bueno.
¿Por qué estoy reinando en este
desfile? Bueno, primero un par de razones importantes, incluso en este tamaño, este componente está empezando a inflarse un poco
y cuando lleva este patrón a 10 15 20 subcomponentes que definitivamente he visto
ese tamaño del componente, solo el tamaño del código físico es enorme y comienza a ser difícil
razonar sobre el segundo d es imposible realizar una prueba unitaria del campo de correo electrónico porque está incrustado en una aplicación como esta, por lo
que no puede realizar una prueba unitaria de estos componentes de forma aislada en tercer lugar, es un posible problema de rendimiento cada
vez que volvemos a renderizar la aplicación, damos una nueva referencia al campo de correo electrónico que lo está redefiniendo o
haciéndolo pasar a reaccionar y no está claro cómo reaccionar debe responder cuando seguimos cambiando la
referencia a la función del componente continuamente y cuatro tiene un posible problema de fuga
entre el componente host y los subcomponentes, por ejemplo, este envío el correo electrónico podría usarse dentro del
campo de correo electrónico y no está claro si eso es lo correcto, ciertamente no está usando
el mecanismo básico de reacción, que es hacer perforaciones o contexto, está haciendo este
intercambio implícito de estado que no es genial, así que simplemente no creo que esto sea lo
correcto y es realmente innecesario incluso cuando el campo de correo electrónico estaba fuera de la aplicación, todavía no era
ciencia fuera de esta aplicación módulo p lo único que se exporta de este módulo de la aplicación es la aplicación, por lo que el
campo de correo electrónico es invisible para el mundo exterior, a menos que se exporte, por lo que no hay motivo para
hacerlo ahora, antes de llegar a nuestro error final, ¿puedo pedirle un favor si usted? me han enseñado
esta metodología de definir componentes dentro de otros componentes, comente en la
sección de comentarios a continuación y dígame quién se lo enseñó o dónde lo aprendió porque realmente
quiero conversar con esas personas y obtener alguna información sobre por qué Estoy enseñándoles
cuál es la razón y, con suerte, convencerlos de que no lo enseñen porque creo que es una muy
mala idea.
Ahora nuestro tercer error es una especie de fusión entre los dos primeros errores. El error número
tres es tan complicado e innecesario que no pude. incluso pensar en un buen nombre abreviado para ello,
solo llamémoslo funciones de componentes invocadas localmente, de acuerdo, echemos un vistazo a nuestra aplicación aquí y
digamos que solo queremos ir y agregar un H1 para mi aplicación justo en la parte superior La forma más fácil de hacerlo
es ir y agregar un H1 desde mi aplicación justo en la parte superior.
No sé por qué la gente hace esto,
pero está bien, tenemos mi aplicación aquí. y volvamos al código y lo que he visto es que la gente
hace esto, irán y crearán una expresión irán y crearán una
función de componente que represente mi aplicación e intentarán ver si funciona. no
funciona y, de hecho, le da un error de consola sobre cómo las funciones no son válidas reaccionar niños
porque están pasando para reaccionar crear elemento el div y luego el div tiene niños en él
y uno de esos niños es esta función y reaccionar es como función qué y
para evitar esto, la gente va y convierte esto en una expresión y luego la
invoca bien y el resultado es que funciona, pero es una fusión de los dos primeros
errores en este video, el primer error de invocar un componente como una función es solo algo
malo que hacer y luego la segunda El segundo error de definir un componente localmente en este caso no estamos
dando un nombre, pero lo estamos definiendo localmente, por lo que es una especie de fusión de los
primeros errores y tiene todas las desventajas de ambos, por lo que es lo más fácil.
hacer
aquí es solo ir y convertirlo en el H1 mi aplicación no complique demasiado las cosas No sé de
dónde viene este patrón podría ser otro idioma difícil de decir pero por favor
no hagas esto está bien espero que hayas disfrutado aprendiendo sobre estos tres errores
y ahora comprende por qué son errores y cómo evitarlos y ha aprendido
un poco sobre cómo reaccionar internamente en el proceso si tiene alguna pregunta o comentario,
póngalo en la sección de comentarios a continuación si
Me gusta el video, presiona el botón Me gusta si realmente te gusta el video, presiona el botón Suscribirse y haz clic en esa Campana y
recibe una notificación la próxima vez que salga un nuevo codificador de cuello azul.