Consejos Tecnológicos

¿Qué son las listas de React y cómo construirlas?

¿Por qué necesitamos listas?

Las listas son una característica clave de la aplicación. Las listas de tareas como las aplicaciones de calendario, las listas de imágenes como Instagram, los elementos que se comprarán en un carrito de compras, etc., son muchos casos de uso para usar listas para mejorar el rendimiento. Imagina una aplicación con una enorme lista de videos o imágenes a medida que te desplazas. Esto puede dificultar el rendimiento de la aplicación. Dado que el rendimiento es un aspecto importante, el uso de listas garantiza que estén diseñadas para un rendimiento óptimo.

Las listas son útiles para mejorar o crear la interfaz de usuario de cualquier sitio web. Las listas se utilizan principalmente para describir o mostrar menús en un sitio web, como un menú de la barra de navegación. Mientras que en JavaScript normal usamos matrices para crear listas, en React podemos crear listas como en JavaScript estándar.

La lista se puede recorrer y actualizar usando la función map() en JavaScript, como se muestra en el siguiente código:

El código anterior registra la salida en la consola:

[3, 4, 5, 6, 7]

Use la tecla para iterar sobre una lista en React: Cada elemento de la lista en nuestra lista desordenada debe tener una clave única. «clave» es una propiedad de cadena especial requerida al crear una lista de elementos en React. Las claves son importantes para mejorar el rendimiento de las aplicaciones React. Las claves también ayudan a identificar qué elementos se han cambiado (agregados/eliminados/reordenados).

import React from 'react';
import ReactDOM from 'react-dom';

function Navmenuexample(props)
{
    const listexample = props.menuitems;

    const updatedListExample = listexample.map((listItems)=>{
        return(
                
  •                     {listItems}                
  •             );       });     return(        
      {updatedListExample }
        ); } const menuItemsexample = [1,2,3,4,5]; ReactDOM.render(     ,       document.getElementById('root') );

    Listas de renderizado en React

    función mapa()

    Las listas se representan mediante datos de mapeo. Mapeamos usando el método de instancia de mapa de la matriz. Podemos hacer esto:

    import React from "react";
    const people= [
      { firstName: "John", lastName: "Smith" },
      { firstName: "Bill", lastName: "Jones" },
      { firstName: "Roger", lastName: "Moore" }
    ];
    const People= ({ firstName, lastName }) => (
      
        {firstName} {lastName}  
    ); export default function App() {   return (    
          {people.map((p, i) => (               ))}    
      ); }

    La matriz de personas se denomina mapa en la aplicación. Pasamos una devolución de llamada para devolver el componente Personas en el método de mapa, con todas las características de cada entrada de matriz de personas pasadas como accesorios.

    Se requiere el atributo clave en React para identificarlos correctamente. Esta es una identificación única, pero el índice de la matriz también puede ser el valor de la propiedad clave.

    El código anterior enumera firstName y LastName.

    al final de lo siguiente producción La pantalla muestra:

    John Smith
    Bill jones
    roger moore

    Nombre del componente dinámico

    Los componentes dinámicos se pueden usar en React. Con React, es fácil renderizar componentes dinámicos a través de JSX. Podemos representar un componente dinámico de reacción de la siguiente manera:

    import React from "react";
    const first = ({ text }) => 

    {text} first

    ; const second= ({ text }) =>

    {text} second

    ; const components = {   first: First,   second: Second }; export default function App() {   const [name, setName] = React.useState("foo");   const toggle = () => {     setName(name => (name === "first" ? "second" : "first"));   };   const Component = components[name];   return (     <>      
                         
          ); }

    Tenemos el estado de nombre, que se establece mediante la función setName. La función de alternancia llama a setName para cambiar el nombre.

    const Component = components[name];

    Devuelve el componente para renderizarlo. Haga clic en el botón de alternar y cuando se haga clic en el botón, los nombres deben cambiar a «hola primero» y «hola segundo».

    Accesorios predeterminados

    Los accesorios predeterminados se aseguran de que se establezcan algunos valores para nuestros accesorios.

    Para establecer accesorios predeterminados, cada accesorio usa la propiedad defaultProps. El siguiente código muestra cómo configurar accesorios predeterminados para nuestro componente Personas anterior:

    import React from "react";
    const people= [
      { firstName: "John", lastName: "Smith" },
      { firstName: "Bill", lastName: "Jones" },
      { firstName: "Roger", lastName: "Moore" },
      {}
    ];
    const People= ({ firstName, lastName }) => (
      
        {firstName} {lastName}  
    ); People.defaultProps = {   firstName: "Default",   lastName: "Value" }; export default function App() {   return (    
          {people.map((p, i) => (               ))}    
      ); }

    En el código anterior, hemos establecido valores predeterminados para las propiedades firstName y lastName.

    People.defaultProps = {
      firstName: "Default",
      lastName: "Value"
    };

    Las siguientes identificaciones se muestran en la pantalla:

    John Smith
    Bill jones
    Roger más
    valores predeterminados

    Hay un objeto vacío en la matriz de personas, que está en la última entrada. Todo lo que se pase generará el valor predeterminado.

    Atributos «clave» importantes

    prefacio

    Los desarrolladores de React deben haber encontrado esta desagradable advertencia al escribir código:

    Una solución simple para deshacerse del error anterior es agregar el accesorio clave a la etiqueta de esta manera:

    ¿Qué son las listas de React y cómo construirlas?

    ¿Sabes por qué este accesorio clave es tan importante? Exploremos y comprendamos su importancia en un entorno profesional.

    Accesorios «clave»:

    llave Ayuda a React a identificar qué detalles se han modificado, agregado o eliminado. Las claves se pasan como elementos dentro de la matriz, proporcionando identidades estables para los elementos.

    React proporciona un algoritmo de «diferenciación» mediante el cual los componentes de React se pueden actualizar fácilmente en un sitio web/aplicación. El proceso de actualizar fácilmente los componentes utilizando algoritmos de diferenciación se define como un mecanismo de «coordinación» en React. Para entender el significado del accesorio clave, vayamos paso a paso para entenderlo mejor.

    Paso 1: DOM virtual:

    El DOM virtual en React se considera la característica más importante, que es el término utilizado en lugar del DOM real.

    ¿Qué son las listas de React y cómo construirlas?

    La ventaja del DOM virtual es que es más rápido y usa menos memoria que el DOM normal. La nueva actualización/cambio hará que el DOM real vuelva a representar todos los elementos, es decir, la actualización y los elementos secundarios. Un DOM virtual, por otro lado, creará una copia del DOM «real» y hará coincidir o comparará los elementos actualizados. Este mecanismo de comparación se llama «diferenciación». React luego usará esa copia para resumir lo que necesita ser actualizado.

    paso 1: Cuando se realizan nuevos cambios, los componentes completos de la interfaz de usuario se vuelven a representar en la representación DOM virtual.

    ¿Qué son las listas de React y cómo construirlas?

    Paso 2: Correlacione o compare DOM virtual y DOM real

    ¿Qué son las listas de React y cómo construirlas?

    Paso 3: Siga el DOM real y actualice con los cambios

    ¿Qué son las listas de React y cómo construirlas?

    Paso 2: React itera sobre los hijos del nodo DOM

    En React usando DOM virtual, itera ambas sublistas al mismo tiempo y crea un cambio cuando hay un cambio o diferencia.

    El siguiente código:

    function FrameworkList(props) {
      const frameexample = props.frameexample;
      const listJSFrameworks = frameworks.map(frameexample =>
        
  • {frameexample}
  •   );   return (    
      {listJSFrameworks}
      ); } const frameexample = ["PHP", "Python"]; ReactDOM.render(   ,   document.getElementById('root') );

    Nuestra matriz cuando se imprime se ve así:

       
       
    • PHP
    •  
    • Python
    •  

    Si la matriz se actualiza de la siguiente manera:

     
       
    • PHP
    •  
    • Python
    • ASP.net
    •  

    React es fácil de hacer coincidir estas dos matrices, con un ligero cambio al final, React puede comparar fácilmente las matrices usando el algoritmo de diferenciación, el nuevo cambio es

  • ASP.net
  • Fácil en los árboles.

    Pero cuando el nuevo elemento se agrega ingenuamente, es decir, al principio:

       
    • ASP.net
    • <- the new item  
    • React
    •  
    • Angular

    React tarda un tiempo en implementar los cambios, es decir,

  • ASP.net
  • Después de «mutar» toda la lista e iterar sobre toda la lista, mantendrá el subárbol intacto. Pero los nodos recién agregados no iteran fácilmente. La «implementación» es muy ineficiente, por lo que los accesorios clave juegan un papel importante.

    Paso 3: Accesorios «clave»:

    El uso del atributo clave ayuda a React a identificar rápidamente las actualizaciones realizadas en el árbol.

    El atributo clave se puede agregar así:

       
    • ASP.net
    • <- the new item  
    • PHP
    •  
    • Python

    Usando las funciones id y map, los datos se verán así:

    const listJSFrameworks = frameworks.map(framework =>  
      
  • {framework.name}
  • const JsFrameworks = [     {     id: 1,     name: "ASP.net"   },     {     id: 2,     name: "PHP"   },     {     id: 3,     name: "Python"   }  ];

    notas: Las claves son importantes para React, ya que ayudan a categorizar los detalles que se modifican, agregan o eliminan mediante el algoritmo de diferenciación.

    Representación de listas anidadas basadas en conjuntos de datos

    Para listas anidadas, en reaccionar podemos crear un mapa dentro de un mapa.

    Aquí hay un ejemplo de una lista de usuarios que tienen mascotas.

    function App() {
      const peoplevalues = [
        {  
          name: Ram,
          petsname: [
            { name: 'umbrella', type: 'rain' },
            { name: ‘coconut’, type: 'sheep' }
          ]
        },
        {  
          name: 'nicky',
          petsname: [
            { name: 'hilo', type: 'dog' },
            { name: 'Hello', type: 'rabbit' }
          ]
        }
      ];
    
      return (
        
          {peoplevalues.map((person, index) => (        
             

    {person.name}'s Petsname

              {/* loop over the pets */}          
                {person.petsname.map((pet, i) => (              

                    {pet.type} named {pet.name}              

                ))}          
           
          ))}    
      ); } ReactDOM.render(, document.getElementById('root'));

    producción:

    Nombre de mascota de Ram
    lluvia nombre paraguas
    oveja llamada coco

    el nombre de mascota de nicky
    perro llamado shelo
    Conejo llamando hola

    Trabajando con listas en React

    Al desarrollar una aplicación React Native, se encuentra con etapas en las que tiene que lidiar con arreglos. Estos casos pueden incluir datos de una API externa, comentarios a un servicio de back-end o, en general, una lista de elementos de datos para su componente. React Native ofrece muchos beneficios únicos. Sin embargo, no existe una solución única para todos, y su elección de tecnología depende en gran medida de su idea de negocio, ya sea que sea una empresa nueva o un líder empresarial próspero.

    Publicaciones relacionadas

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Botón volver arriba