React.js: componentes de clase

Hola, mi nombre es Tony y en. Estas lecciones aprenderás sobre la clase. Componentes, estado y componentes de utilería y su uso. En esta lección le mostraré cómo usar componentes de clase y Funciones del ciclo de vida. Componentes es un fragmento de código independiente que podría usarse de la misma manera que una función de JavaScript. Funciona de forma aislada, pero la única advertencia es que un componente siempre debe devolver HTML ya que esa es la representación visual con el que nuestro usuario va a interactuar a lo largo del uso de nuestra aplicación. Ahora, antes de la versión 16.8 de React basada en clases. El componente era la única forma de mantener el estado. y función. Se pensaba que los componentes eran componentes menores, por así decirlo. algo que era apátrida. Pero desde la introducción de tales ganchos. Como UseState ahora tenemos acceso. A la misma funcionalidad que una clase tradicional basada componente. Ahora echemos un vistazo a qué. Un componente basado en clases es. Ahora, ante todo, nos damos cuenta de eso. Un objeto que es un componente de reacción basado en clases siempre se extiende una entidad llamada componente React. Eso es algo que ha implementado el grupo React. y como tal tiene los siguientes métodos de ciclo de vida. Están disponibles para nosotros ya que han sido implementados previamente. El único de todos. Por supuesto, lo que se requiere es el método Render. Constructor es la primera función del ciclo de vida que obtiene llamado. Ves que está recibiendo accesorios, algo que es básicamente argumentos que nuestro componente potencialmente está obteniendo. Digamos que hay argumentos que haremos Uso especial de durante todo el ciclo de vida de nuestro componente. Puedes ver que el estado es. Se mantiene en una variable especial llamada este estado. Ver el estado aquí es bastante simple. Estamos configurando el fondo en blanco. O FFF hexadecimal que es un atajo para FFF o simplemente blanco. Vea cómo se llama la segunda función del ciclo de vida. Obtenga el estado derivado de los accesorios. Esta es una buena función. Actualice el estado si el estado se actualiza. Está garantizado en función de los accesorios que recibe nuestro componente. Entonces digamos que nuestros antecedentes iniciales. es blanco pero si algo mas es. Pasado a un componente que se desvía de. Lo que hemos especificado Lo haremos. Ahora usa ese accesorio como nuestro color. El tercer método en nuestras funciones de ciclo de vida es el único. uno que es requerido y se llama Render. Como puedes ver este método es. Especial ya que devuelve HTML, más específicamente JSX. Y esto va a servir como representación visual para el componente con el que el usuario va a interactuar. Durante todo el ciclo de vida de nuestra aplicación. Esto es muy similar a un componente funcional pero podemos ver en una representación basada en clases render es en realidad es su propio método y, como dije antes, es requerido. Entonces, si no tienes este método, básicamente vas a para recibir una queja de su compilador y su componente no se compilará. Finalmente, la cuarta función en el método del ciclo de vida se llama componente Didmount, y se activa después de que nuestro componente completamente en Dom. Y este es un buen lugar para tomar algún tipo de acción final en nuestro componente antes finalmente se presenta al usuario, y luego depende del usuario para interactuar. A partir de entonces. En nuestra próxima lección, veremos más detalladamente qué. Los accesorios son y cómo se usan. Con componentes basados ​​en clases. Gracias por ver. Adiós.