Hoy les presentamos la primera parte de la traducción de
este gran material. Está dedicado a un análisis detallado de las nuevas características de React que han aparecido en esta biblioteca desde la versión 16. El autor de este material ha estado programando durante 5 años. En el pasado, fue diseñador y se probó a sí mismo como ilustrador. Incluyó cómics en el artículo, que, en su opinión, ayudará a los lectores a comprender mejor lo que se está discutiendo.
En el original, este artículo se titula "Reintroducción de React: cada actualización de React desde v16 desmitificada". El título sugiere que el lector, quizás ya familiarizado con React, está invitado a conocer esta biblioteca nuevamente. Esta reintroducción a React lo ayudará a racionalizar lo que ya sabe y descubrir algo nuevo.
¿Cómo leer este material?
Antes de leer este artículo, puede descargar el
libro electrónico , que se distribuye de forma gratuita. Representa el mismo material, diseñado como un archivo PDF, Epub o Mobi independiente. El libro proporciona ejemplos de código con resaltado de sintaxis. Quizás sea más conveniente para usted leer el material y trabajar a través del código en paralelo, según el libro. Además, se recomienda que utilice
este repositorio. Puede encontrar el código de los ejemplos discutidos aquí.
¿Para quién y por qué se escribió este material?
Escribí mi primera aplicación React hace unos 4 años. Desde entonces, los principios fundamentales de React no han cambiado. Ante nosotros está el mismo código declarativo y todos los mismos componentes. Todo esto es bueno, pero la forma en que se escriben las aplicaciones modernas de React es diferente de lo que era antes. Con los años, han aparecido muchas cosas nuevas en React, y parte de esta biblioteca se ha eliminado.
Si estudiaste React durante mucho tiempo, es muy posible que no estés particularmente familiarizado con las nuevas características de esta biblioteca. Además, incluso el que sigue las innovaciones puede muy bien "perderse" en ellas, por así decirlo. ¿Cómo arreglar la situación, dándome cuenta de que lo viejo necesita ser descartado y cuál de los nuevos debe ser aceptado? ¿Cómo resalta esas características modernas de React que puede encontrar particularmente útiles?
Incluso yo, un programador experimentado, a veces me pierdo, si es necesario, para olvidar algo viejo y aprender algo nuevo. Esto puede parecer tan difícil como aprender un concepto completamente nuevo.
Si también siente algo así, entonces espero que mi trabajo pueda ayudarlo a poner todo en su lugar.
Lo mismo puede decirse de aquellos que acaban de comenzar a aprender React.
Alrededor hay mucha información desactualizada. Si aprende React de algunas publicaciones bastante antiguas, entonces ciertamente puede dominar los conceptos básicos. Sin embargo, en el desarrollo moderno de React, hay muchas características nuevas e interesantes que merecen su atención. Es mejor aprender sobre estas características lo antes posible, en lugar de tratar de olvidar los métodos de trabajo anteriores más tarde y aprender otros nuevos.
De hecho, aquí analizaremos en detalle todo lo nuevo que apareció en React 16+.
¿Qué hay de nuevo en React 16+?
A primera vista, puede parecer que en React, después del lanzamiento de la versión 16, no se han realizado tantos cambios. Pero en realidad esto no es así. Esto es de lo que hablaremos:
- Nuevos componentes del ciclo de vida.
- Gestión de estado simplificada utilizando la API de contexto.
- La propiedad contextType y las características de la API de contexto.
- Aplicación de perfiles: diagramas, análisis de interacción.
- Carga perezosa de materiales usando React.lazy y Suspense.
- Una versión funcional de componentes basados en PureComponent creados con React.memo.
- Simplifique las aplicaciones React usando ganchos.
- Avanzados patrones de diseño de aplicaciones React basados en ganchos.
Cada elemento de esta lista se presenta como una sección grande separada. La primera sección se centra en las nuevas técnicas de ciclo de vida de los componentes.
Estimados lectores! Ahora estamos pensando en traducir la continuación de
este material. Si el tema de React-development está cerca de usted, lo invitamos a votar y comentar.
