10. Desestructuración. La función de asignación desestructurada es la que más se utiliza en React. Es una expresión que nos permite asignar los valores o propiedades de un objeto iterable a variables. Generalmente, con esta función puede convertir sus componentes props en variables (o constantes):
11. Funciones flecha. ES6 proporciona una nueva forma de crear funciones utilizando el operador =>. A estas funciones se les llama funciones flecha. Este nuevo método tiene una sintaxis más corta, y las funciones flecha son anónimas. En React, las funciones flecha se utilizan para enlazar el objeto this a los métodos en lugar de enlazarlo al constructor:
12. Plantillas literales. Las plantillas literales son una nueva forma de crear una cadena de caracteres utilizando comillas invertidas (` `) en lugar de comillas simples (' ') o dobles (" "). React utiliza las plantillas literales para concatenar nombres de clases o para renderizar (representar) una cadena usando un operador ternario:
13. Map. El método map()devuelve una nueva matriz con los resultados de la llamada a una función que actúa sobre cada elemento de la matriz que hace la llamada. Map se utiliza frecuentemente en React, y se emplea fundamentalmente para renderizar múltiples elementos dentro de un componente de React. Por ejemplo, se puede utilizar para renderizar una lista de tareas:
14. Object.assign(). El método Object.assign() se utiliza para copiar los valores de las propiedades características enumerables de uno o más objetos fuente a un objeto destino. Devuelve el objeto destino. Este método se utiliza en Redux para crear objetos inmutables y devolver un nuevo estado a los reductores (Redux se tratará en el Capítulo 5, Dominio de Redux):
15. Clases. Las clases en JavaScript, introducidas en ES6, son fundamentalmente una nueva sintaxis para la herencia basada en prototipos existentes. Las clases son funciones y no son izadas. React utiliza clases para crear los Componentes de clase:
16. Métodos estáticos. A los métodos estáticos no los requieren las instancias de clase. En lugar de esto, los precisa la clase misma. Son a menudo funciones de utilidades, pero también pueden ser funciones para crear o clonar objetos. En React se pueden utilizar para definir las PropTypes en un componente:
17. Promises. El objeto Promise (promesa) representa la eventual finalización (o fallo) de una operación asíncrona y el valor resultante. Utilizará promises en React para tratar las peticiones utilizando axios o fetch; también va a usar promises para implementar la renderización del lado del servidor (esto se tratará en el Capítulo 11, Implementación de la renderización del lado del servidor).
18. async/await. La declaración de una función async define una función asíncrona, que devuelve el objeto AsyncFunction. Esta también se puede utilizar para realizar una petición al servidor, por ejemplo utilizando axios:
¿Qué novedades hay en React?
Este párrafo lo escribí el 14 de agosto de 2018, y la última versión de React era 16.4.2. La version 16 de React tiene una nueva arquitectura central llamada Fiber.
En esta receta, verá las actualizaciones más importantes de esta versión que debe conocer para sacar el máximo partido a React.
Cómo hacerlo...
Vea las nuevas actualizaciones:
1. Los componentes pueden devolver matrices y cadenas en el renderizado: Antes, para devolver un elemento, React obligaba a envolverlo con <div> o con cualquier otra etiqueta. Ahora es posible devolver una matriz o una cadena directamente:
2. React tiene ahora también una nueva característica llamada Fragment (fragmento), que funciona como un envoltorio especial para los elementos. Se puede especificar con etiquetas vacías (<></>) o utilizando directamente React.Fragment:
3. Límite de error. Explicación que aparece en el sitio web oficial:
Un error de JavaScript en una parte de la interfaz de usuario (IU) no debería afectar a toda la aplicación. Para resolver este problema a los usuarios de React, React 16 introduce un nuevo concepto de “límite de error". Los límites de error son componentes de React que capturan errores de JavaScript en cualquier parte del árbol de componentes hijo, registran esos errores y muestran una interfaz de usuario de emergencia en lugar del árbol de componentes que ha fallado. Los límites de error detectan errores durante el renderizado, en los métodos de ciclo de vida y en los constructores del árbol que se encuentra debajo de ellos. Un componente de clase se convierte en límite de error si define un nuevo método de ciclo de vida llamado componentDidCatch(error, info).
4. Mejora del renderizado del lado del servidor. Como se indica en el sitio web oficial:
React 16 incluye un renderizador que ha sido reescrito en su totalidad. Es muy rápido. Soporta streaming, por lo que es posible empezar a enviar bytes al cliente más rápidamente. Y gracias a una nueva estrategia de empaquetado que compila las comprobaciones de process.env (¡lo creas o no, la lectura de process.env en Node es realmente lenta!), ya no es necesario empaquetar React para obtener un buen rendimiento de renderizado del servidor.
5. Reducido tamaño del archivo. Como se indica en el sitio web oficial: A pesar de todas estas incorporaciones, React 16 es muy pequeño comparado con la versión 15.6.1.
• React ocupa 5,3 kb (2,2 kb comprimido), inferior a los 20,7 kb (6,9 kb comprimido)
• React-dom ocupa 103,7 kb (32,6 kb comprimido), inferior a los 141 kb (42,9 kb comprimido)
•
