1 00:00:02,510 --> 00:00:04,590 Así que ahora podemos comunicarnos. 2 00:00:05,470 --> 00:00:10,240 Y en realidad estamos actualizando nuestra matriz de objetivos del curso en el componente de la aplicación. 3 00:00:11,040 --> 00:00:17,170 Pero lo que ves es que a pesar de que la matriz se está actualizando y claramente el nuevo objetivo es parte de la matriz, 4 00:00:17,740 --> 00:00:19,960 nuestra salida aquí en la pantalla no cambió. 5 00:00:20,260 --> 00:00:23,920 Y eso nos lleva a un concepto central de estado de reacción. 6 00:00:25,170 --> 00:00:34,530 React no vuelve a procesar la descarga es el código X y, por lo tanto, la interfaz de usuario real todo el tiempo cada vez que se activa algún evento en cualquier 7 00:00:34,560 --> 00:00:36,060 lugar de la aplicación. 8 00:00:36,270 --> 00:00:41,400 Por lo tanto, el hecho de que haga clic en este botón aquí no significa que reaccionar representará la pantalla completa solo para 9 00:00:41,400 --> 00:00:43,890 asegurarse de que no se pierda ningún cambio de datos. 10 00:00:44,130 --> 00:00:46,080 No es así como funciona reaccionar. 11 00:00:46,560 --> 00:00:48,270 En cambio, al final, tienes que decirlo. 12 00:00:48,330 --> 00:00:49,610 Reaccionar cuando debería. 13 00:00:49,650 --> 00:00:50,340 Re render. 14 00:00:51,050 --> 00:00:55,150 Y luego lo haces usando un concepto llamado discurso de estado. 15 00:00:55,230 --> 00:00:55,640 Los objetivos son 16 00:00:55,760 --> 00:00:57,610 Aquí hay una matriz de JavaScript normal. 17 00:00:58,230 --> 00:01:01,640 En otras palabras, reaccionar lo ignora totalmente. 18 00:01:02,280 --> 00:01:06,840 Tenemos que decir reaccionar que no debe ignorarlo y en su lugar está muerto. 19 00:01:06,900 --> 00:01:11,660 Cada vez que cambiamos la matriz, debería actualizar d ui. 20 00:01:11,690 --> 00:01:15,360 La J es el código X del componente en el que lo cambiamos. 21 00:01:15,450 --> 00:01:17,490 Entonces, en este caso del componente de la aplicación. 22 00:01:18,420 --> 00:01:22,440 Ahora para hacer eso importamos otra cosa del paquete REAC. 23 00:01:22,470 --> 00:01:29,490 Y ese es el estado de uso de la función integrado en la biblioteca de reacción, un llamado gancho de reacción. 24 00:01:29,610 --> 00:01:32,400 Y aprende más sobre ganchos en mi reacción para completar la guía. 25 00:01:32,430 --> 00:01:32,730 Curso. 26 00:01:32,730 --> 00:01:33,180 Por supuesto. 27 00:01:33,870 --> 00:01:38,340 Una función que no podemos ejecutar termina en todos los componentes funcionales. 28 00:01:38,580 --> 00:01:42,770 Y solo en lugar de componentes funcionales en componentes basados en clase. 29 00:01:42,810 --> 00:01:47,880 También tiene un mecanismo de gestión estatal, no es el foco de este curso aquí, pero también podría hacerlo 30 00:01:47,880 --> 00:01:48,240 allí. 31 00:01:48,660 --> 00:01:53,700 Pero en los componentes funcionales, utiliza estas funciones de enlace, como se les llama. 32 00:01:53,970 --> 00:01:54,960 Todas estas funciones. 33 00:01:55,020 --> 00:01:59,280 Comenzando con el uso al principio para administrar el estado. 34 00:01:59,790 --> 00:02:06,390 Por lo tanto, para administrar los datos que, cuando se modifican, deberían conducir a la interfaz de usuario de ese componente en el que se las arregla para mostrar 35 00:02:06,390 --> 00:02:07,830 el estado para volver a representar. 36 00:02:08,610 --> 00:02:09,810 Así que aquí está el componente de la aplicación. 37 00:02:10,200 --> 00:02:14,280 No quiero llamar a use state y use state. 38 00:02:14,790 --> 00:02:16,410 Paso esta matriz aquí. 39 00:02:16,800 --> 00:02:18,960 Este es mi llamado estado inicial. 40 00:02:18,990 --> 00:02:21,690 Entonces puedo deshacerme de ese concepto por ahora. 41 00:02:22,260 --> 00:02:26,970 Esto indica que este componente tiene algún estado y que este es mi estado inicial. 42 00:02:27,180 --> 00:02:32,100 Por cierto, también puede tener varias piezas de estado diferentes y todas se ven de forma independiente. 43 00:02:32,370 --> 00:02:35,790 Pero aquí solo tengo un estado principal y ese es mi conjunto de objetivos. 44 00:02:36,330 --> 00:02:40,290 Y digo reaccionar que tengo este estado y que este es mi estado inicial. 45 00:02:41,220 --> 00:02:46,620 Ahora, por supuesto, quiero obtener acceso a ese almacenamiento de estado inicial y algo constante para poder usarlo en 46 00:02:46,620 --> 00:02:50,280 el resto del componente, porque Core Scholes ahora falta en todas partes. 47 00:02:50,940 --> 00:02:52,980 Entonces declaras que todos devolvieron algo. 48 00:02:53,430 --> 00:02:56,490 Devuelve una matriz de exactamente dos elementos. 49 00:02:56,910 --> 00:03:01,110 El primer elemento siempre es nuestra última instantánea del estado. 50 00:03:01,500 --> 00:03:05,760 Entonces, nuestro estado inicial o una vez que lo cambiamos, el estado actualizado. 51 00:03:06,450 --> 00:03:12,630 Y el segundo elemento de esa matriz devuelto por el estado de uso es una función que nos permite actualizar ese 52 00:03:12,630 --> 00:03:13,080 estado. 53 00:03:13,500 --> 00:03:18,030 Reemplácelo con un nuevo valor y diga a Reaction que debería volver a renderizarse. 54 00:03:18,930 --> 00:03:26,010 Así que aquí usará la estructura de matriz D usando corchetes en el lado izquierdo de mi tiempo igual aquí 55 00:03:26,730 --> 00:03:28,620 para extraer estos dos elementos. 56 00:03:28,680 --> 00:03:31,270 Tengo una matriz indefinida devuelta por estado de uso. 57 00:03:31,380 --> 00:03:33,810 Y siempre hay exactamente dos elementos. 58 00:03:34,080 --> 00:03:37,200 Por lo tanto, no depende de qué tipo de datos de estado tatta pases aquí. 59 00:03:37,440 --> 00:03:40,140 El estado de uso le proporciona una matriz con exactamente dos elementos. 60 00:03:40,470 --> 00:03:42,740 Primer elemento, tu estado actual. 61 00:03:42,840 --> 00:03:45,230 Entonces, en mi caso, mi matriz aquí. 62 00:03:45,870 --> 00:03:48,120 Segundo elemento de función para actualizar el estado. 63 00:03:48,240 --> 00:03:50,460 Por lo tanto, normalmente nombramos como conjunto. 64 00:03:51,150 --> 00:03:52,770 Y luego cualquier nombre de su elección Chote. 65 00:03:52,860 --> 00:03:54,330 Establecer objetivos del curso en mi caso. 66 00:03:54,900 --> 00:03:57,600 Así que ahora tengo dos constantes creadas con la ayuda de U. S. 67 00:03:57,720 --> 00:04:00,600 La primera constante del estado contiene mi instantánea de estado. 68 00:04:00,840 --> 00:04:05,880 Segundo, constante en realidad tiene una función que podemos llamar para actualizar esa instantánea de estado. 69 00:04:06,510 --> 00:04:09,360 Y llamaremos a esa función aquí y agregaremos una nueva meta. 70 00:04:09,360 --> 00:04:13,410 El controlador puede llamar a objetivos establecidos del curso aquí y ahora. 71 00:04:13,410 --> 00:04:16,740 Quiero actualizar los objetivos de mi curso agregando un nuevo objetivo. 72 00:04:17,400 --> 00:04:24,210 Ahora, una forma simple de hacerlo es simplemente usar mis objetivos de curso anteriores y llamar a concat aquí, no presionar, 73 00:04:24,210 --> 00:04:31,350 porque push modifica el elemento existente en lugar de establecer objetivos de curso una vez que una nueva matriz que reemplazará la matriz 74 00:04:31,350 --> 00:04:37,110 anterior y concat también agrega un elemento a una matriz, pero devolverá una nueva matriz a la que 75 00:04:37,140 --> 00:04:38,520 se agregó este elemento. 76 00:04:38,850 --> 00:04:41,870 Por lo tanto, nos da una nueva gama, no toca la anterior. 77 00:04:42,190 --> 00:04:46,080 Y no aprobamos el nuevo conjunto para establecer objetivos del curso y reaccionar. 78 00:04:46,080 --> 00:04:52,200 Luego usará esa nueva matriz para colocarla debajo del capó, reemplazará el rayo anterior en su estado administrado 79 00:04:52,200 --> 00:04:59,760 internamente y volverá a procesar este componente una vez que lo hizo, y, por lo tanto, actualizará los objetivos del discurso con la 80 00:04:59,760 --> 00:05:00,660 nueva matriz. 81 00:05:00,900 --> 00:05:06,210 En el próximo ciclo de renderizado, lo que significa que reaccionar ejecutará esta función aquí y, por lo 82 00:05:06,240 --> 00:05:10,470 tanto, cuando lo haga, reflejará que los nuevos datos en Arjay son código X. 83 00:05:11,430 --> 00:05:13,560 Así que aquí quiero alcanzar mi nuevo objetivo. 84 00:05:13,990 --> 00:05:15,360 Y si ahora estamos a salvo. 85 00:05:16,850 --> 00:05:25,300 Y hago clic en Agregar objetivo, verá que se agregan nuevos objetivos a la lista porque Reaccionar ahora muestra esta pantalla o las 86 00:05:25,360 --> 00:05:27,610 partes que deben mostrarse nuevamente. 87 00:05:28,120 --> 00:05:35,500 Cada vez que actualizamos nuestro estado ahora, la forma exacta en que reacciona el procesamiento no es el enfoque de este curso. 88 00:05:35,530 --> 00:05:39,850 Puede aprenderlo y recursos dedicados como los documentos oficiales o mi guía completa. 89 00:05:40,450 --> 00:05:45,040 Por ahora solo basta notar que reaccionan mágica y eficientemente. 90 00:05:45,300 --> 00:05:49,840 ¿Se renderizó una página o partes de la página que necesitan renderizarse nuevamente? 91 00:05:50,020 --> 00:05:52,150 Según los cambios de estado que aplicamos.