Consejos Tecnológicos

¿Qué es una clave reactiva?

Lista de nuestro amor:

En React, una lista es una forma de matriz en JavaScript, que puede almacenar varios valores del mismo tipo de datos. La necesidad general de presentar una lista de elementos en una aplicación, ya sean aplicaciones web o móviles, se debe a que la lista ayuda a mostrar los datos en un formato ordenado. También se utiliza principalmente para mostrar menús en el sitio web. En otras palabras, la lista se centra en la parte de la interfaz de usuario del sitio web y se utiliza principalmente para mostrar los menús en el sitio web. Algunos ejemplos de listas en un sitio web son los menús de la barra de navegación, los menús de la barra lateral, etc.

En JavaScript normal

En JavaScript ordinario, la función map () se usa para recorrer la lista. En el código que se proporciona a continuación, la función map () se usa para tomar una matriz de números y luego multiplicar los elementos de la matriz por 3. Aquí declaramos una nueva variable de matriz triplicada, asignamos el nuevo valor de matriz devuelto por el mapa a la función () y luego lo registramos.

Código

const number = [2, 4, 5, 3]; 
const tripled = number.map((num) => num * 3); 
console.log(tripled) 

Producción: [6, 12, 15, 9]

Lista en React

Al crear una lista en React, la función map () se usa para recorrer los elementos de la lista y actualizar el contenido de la lista.usamos grandes paréntesis Al trabajar con listas en React.

La salida obtenida por la función map () se asigna a listItem.Especificamos la naturaleza secuencial de la lista en la salida y devolvemos un

  • El elemento de cada elemento de la lista.Finalmente, renderizamos React-DOM y usamos
      El formato está al final.

      El código es el siguiente:

      Index.js

      import React from 'react';     
      import ReactDOM from 'react-dom';     
      import reportWebVitals from './reportWebVitals'; 
      // declaring the constants 
      const myList = [1, 2, 3, 4, 5];     
      const listItems = myList.map((myList)=>     
      return <div><li>myList</li></div>;     
      );     
      // rendering using the ReactDOM, render() function 
      ReactDOM.render(     
      <ul> listItems </ul>,     
      document.getElementById('root')    
      ); 
      reportWebVitals();

      Producción

      Cuerda ReactDom.render () El método se usa para renderizar elementos React en el DOM en el contenedor provisto y devolver una referencia al componente.Aquí estamos importando cualquier Application.js Archivo o lo que sea Index.html El archivo utilizado para representar la página.En el ejemplo anterior, declaramos variables y usamos funciones en el mismo archivo raíz elemento.

      En cambio, estamos usando «raíz» Señale los elementos que existen en el propio archivo index.ex.js.esta «raíz«El elemento es un contenedor proporcionado en el DOM y

        Elemento de lista

      Es un componente. La raíz ayuda a procesarse automáticamente en el documento, que contiene el elemento de escucha que se imprimirá en la consola.

      Cómo no presentar la lista

      En el ejemplo anterior, inicializamos la lista y la representamos usando la función map ().No podemos renderizar la lista sin usarla. «llave» Elemento. Si hacemos esto, es posible que obtengamos resultados, pero es posible que obtengamos algunos errores en la consola. Considere el ejemplo anterior, que se codificó sin utilizar componentes clave. En este caso, obtuvimos el resultado, pero la consola causó algunas advertencias. Por lo tanto, se recomienda no enumerar componentes en programas sin componentes críticos para identificar de manera única los elementos en una lista de elementos determinada.

      Producción

      ¿Qué es una clave reactiva?¿Qué son los atributos «críticos»?

      En React, las claves son como atributos de cadena especiales incluidos en la lista de elementos de creación. Las claves son importantes en React. Nos ayudan a comprender qué elementos de una lista de elementos determinada se han modificado, actualizado o eliminado. En resumen, las claves ayudan a proporcionar identidades para los elementos de la lista. La clave ayuda a identificar de forma única los elementos de la lista.

      Sintaxis de la inicialización de claves

      Por lo general, la clave se declara con llaves «», y la función correspondiente se agrega entre corchetes para obtener la salida del programa. Deben proporcionarse claves para los elementos presentes en la matriz con el fin de proporcionar entidades estables para los elementos. Para seleccionar la clave correcta de la lista, el elemento debe identificarse de forma única entre los elementos de la lista.

      Sintaxis:- Clave =

      ¿Cómo elegir la llave?

      Se recomienda elegir una CADENA como clave, que puede identificar de forma única un elemento en una lista determinada. Si la lista dada contiene valores de variables en forma de cadenas, y estas cadenas se consideran únicas, entonces el valor correspondiente se puede usar como CLAVE. De lo contrario, si la lista dada no contiene una cadena de valores de variable, la variable correspondiente se convierte explícitamente en una cadena y luego se usa en el programa.

      Teniendo en cuenta los problemas encontrados en el ejemplo anterior, intentamos usar el atributo Key en el programa anterior para eliminar la advertencia. Después de usar el atributo de clave en el ejemplo anterior, al ver el código fuente de la página web, encontré que la consola no reportó un error. De esta forma, la propiedad Key puede ayudarnos a superar el error de crear listas en React. La consola se muestra en la siguiente figura:

      Ejemplos de uso de claves

      List.js

      import React from 'react';
      
      // creating a function
      function Lists()
          const numbers = [1,2,3,4,5]
          const listItems = numbers.map((number) =>  <li         key=number.toString()>number</li>)
          return <div><ul>listItems</ul></div>
      
      export default Lists;

      Application.js

      import './App.css';
      import Lists from './Lists';
      import React from 'react';
      
      // Defining the class named “App”
      class App extends React.Component 
        render() 
          return (
            <div className = "ml-2">
              <h4>Usage of Keys resulted no Errors!</h4>
            <Lists />  
            </div>
          )
        
      
      export default App;

      Producción

      ¿Qué es una clave reactiva?Generalmente, Key se usa para identificar de forma única un elemento en una lista.Para una identificación única, podemos utilizar algunos métodos alternativos, como «IDENTIFICACIÓN» o «índice» El formulario sirve como clave en nuestros datos.

      Utilice el formulario de identificación para acceder al elemento clave

      List.js

      import React from 'react';
      
      // Creating the function using function keyword in react
      function Lists()
          const stringLists = [ 'upgrad', 'knowledge', 'Hut', 'Blog', 'Writing'];    
          const updatedLists = stringLists.map((strList)=>    
              <li key=strList.id> strList </li>)  
              return <div><ul>updatedLists</ul></div>  
      
      
      export default Lists;

      Application.js

      import './App.css';
      import Lists from './Lists';
      import React from 'react';
      
      // the class Name is defined here “App”
      class App extends React.Component 
        render() 
          return (
            <div className = "ml-2">
              <h4>Usage of ID Form </h4>
            <Lists />  
            </div>
          )
        
      
      export default App;

      Producción

      ¿Qué es una clave reactiva?

      Cuando no tenemos una ID estable para representar el elemento, usamos el índice del elemento como clave para acceder a los elementos de la lista.

      Utilice el formulario de índice para acceder a elementos claveList.js

      List.js

      import React from 'react';
      
      // defining the function
      function Lists()
          const stringLists = [ 'bombay', 'delhi', 'calcutta' ];    
          const updatedLists = stringLists.map((strList, index)=>    
              <li key=index> strList </li>)  
              return <div><ul>updatedLists</ul></div>
       
      
      export default Lists;

      Application.js

      import './App.css'; 
      import Lists from './Lists'; 
      import React from 'react'; 
      
      // class Name is defined here 
      class App extends React.Component  
        render()  
          return ( 
            <div className = "ml-2"> 
              <h4>Usage of INDEX Form </h4> 
            <Lists />   
            </div> 
          ) 
         
       
      export default App;

      Producción

      ¿Qué es una clave reactiva?

      Si cambia el orden de los elementos, no se recomienda utilizar un índice en KEYS. Esta operación a veces puede causar una degradación del rendimiento y puede causar algunos problemas en el estado del componente.

      Uso de llaves y componentes

      Las claves se utilizan a menudo para identificar elementos únicos en una lista de elementos determinada. Sin embargo, el uso de claves al mapear elementos describe un orden específico. La asignación de claves crea la secuencia y la estructura que conducen a una implementación correcta.

      Por ejemplo, supongamos que hemos creado La lista de elementos Como componente independiente, ListItem se utiliza para extraer elementos de la lista de elementos.En este caso, deberíamos asignar llave Componente paraLa lista de elementos /> en la matriz de elementos dada en lugar deexiste El componente /> existe en el propio ListItem.

      Ejemplos de uso incorrecto de claves en componentes

      Index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import reportWebVitals from './reportWebVitals';
      
      function ListItem(props)   
        const item = props.item;  
        return (  
          // Wrong Usage
          <li key=item.toString()>  
            item  
          </li>  
        );  
        
      
      function NameList(props)   
        const myLists = props.myLists;  
        const listItems = myLists.map((strLists) =>  
          // Key should be used here
          <ListItem item=strLists />  
        );  
      
      return (  
          <div>  
              <h2>Incorrect Key Usage Example</h2>  
                    <ol>listItems</ol>  
          </div>  
        );  
        
      
      const myLists = ['csk', 'rcb', 'mi', 'srh', 'kkr', 'dd'];  
      
      ReactDOM.render(  
        <NameList myLists=myLists/>,  
        document.getElementById('root')  
      )
      
      reportWebVitals();

      Index.html

      <!DOCTYPE html> 
      <html lang="en">
      
      <head> 
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
        <title>REACT TEST</title> 
      </head> 
      
      <body> 
        <div id="root"></div> 
        <script src="https://www.knowledgehut.com/blog/web-development/./index.js"></script> 
      </body>
      
      </html>

      Producción

      ¿Qué es una clave reactiva?

      Ejemplos de componentes que utilizan claves correctamente

      Index.js

      import React from 'react'; 
      import ReactDOM from 'react-dom'; 
      import './index.css'; 
      import reportWebVitals from './reportWebVitals'; 
      function ListItem(props)    
        const item = props.item;   
        return (   
          // key is not written here   
          <li> item </li>   
        );   
         
      function NameList(props)    
        const myLists = props.myLists;   
        const listItems = myLists.map((strLists) =>   
          // Key is written here   
          <ListItem key=myLists.toString() item=strLists />   
        );   
        return (   
          <div>   
              <h2>Correct Key Usage Example</h2>   
                  <ol>listItems</ol>   
          </div>   
        );   
         
      
      const myLists = ['HYD', 'MYS', 'AP', 'GOA'];   
      
      ReactDOM.render(   
        <NameList myLists=myLists/>,   
        document.getElementById('root')   
      ) 
      reportWebVitals();

      Index.html

      <!DOCTYPE html> 
      <html lang="en"> 
      
      <head> 
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
        <title>REACT TEST</title> 
      </head> 
      
      <body> 
        <div id="root"></div> 
        <script src="https://www.knowledgehut.com/blog/web-development/./index.js"></script> 
      </body> 
      
      </html>

      Producción¿Qué es una clave reactiva?

      Cuando usamos Key with Component, tratamos principalmente con dos archivos, a saber, archivos JavaScript («Index.js») Y archivos HTML («Index.html»). En este punto, no tenemos ningún trabajo en el archivo App.js, por lo que comentamos las líneas de código en el archivo y solo trabajamos en la indexación de archivos JavaScript y HTML.

      El uso de claves en los dos ejemplos mostrados anteriormente producirá un resultado similar. Pero si hay un uso incorrecto de la clave, encontraremos un error en la página HTML correspondiente al verificar. Si la clave se usa correctamente, revisamos la página sin errores.

      La singularidad de la llave entre sus hermanos

      Hemos aprendido que una clave debe ser única entre todos los elementos de una lista de elementos determinada, es decir, debe ser única entre los elementos hermanos de una lista determinada. Las claves inicializadas en el programa no necesitan ser globalmente únicas. Intentaremos generar dos matrices diferentes utilizando el mismo conjunto de claves, como se muestra a continuación:

      Index.js

      import React from 'react'; 
      import ReactDOM from 'react-dom'; 
      import './index.css'; 
      import reportWebVitals from './reportWebVitals'; 
      
      function TourBlog(props)    
        const place = (   
          <ol>   
            props.data.map((show) =>   
              <li key=show.id>   
                show.title   
              </li>   
            )   
          </ol>   
        );   
        const famousfor = props.data.map((show) =>   
          <div key=show.id>   
            <h3>show.title: show.content</h3>       
          </div>   
        );   
        return (   
          <div>   
            place   
            <hr />   
            famousfor   
          </div>   
        );   
         
      const data = [   
        id: 1, title: 'Goa', content: 'Famous For Beaches.....!!',   
        id: 2, title: 'Mumbai', content: 'Famous For Street Food.........!!',   
        id: 3, title: 'Manali', content: 'Famous for Valleys & Beautiful Scenaries....!!'   
      ];   
      ReactDOM.render(   
        <TourBlog data=data />,   
        document.getElementById('root')   
      );   
      reportWebVitals();

      Index.html

      <!DOCTYPE html> 
      <html lang="en"> 
      
      <head> 
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
        <title>REACT TEST</title> 
      </head> 
      
      <body> 
        <div id="root"></div> 
        <script src="https://www.knowledgehut.com/blog/web-development/./index.js"></script> 
      </body> 
      
      </html>

      Producción¿Qué es una clave reactiva?Generalizar

      Para resumir lo que aprendimos en este artículo:

      • La clave es el único elemento entre sus elementos hermanos en una lista de elementos determinada.
      • La clave se declara en formato de matriz. Toma el formato de cadena como estado predeterminado para obtener la salida de la lista.
      • Si los elementos dados en la lista no están en forma de cadena, se convertirán en forma de cadena y luego se accederá a ellos usando el componente Key en React.

      Podemos acceder a los elementos clave utilizando los formularios Id e Index.

      Podemos usar claves con componentes.En este caso, solo asignamos el componente Key al correspondiente , No asignado a

    • Componentes, a menos que no se especifique un tipo de elemento específico en un programa determinado.

      Finalmente, hemos visto el uso de componentes clave con dos tipos de matrices en el programa dado para generar el resultado final.

  • 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