我们一起聊聊React列表渲染与Key

在React中,列表渲染是一种常见的模式,它允许我们基于数组的内容动态生成React元素。同时,为了提高React的性能并确保正确的元素更新,我们需要为动态生成的元素添加唯一的 key 属性。

列表渲染

列表渲染通常使用map函数,它会遍历数组中的每个元素,并返回一个新的React元素数组。JSX 允许在大括号中嵌入任何表达式,所以我们可以内联 map() 返回的结果:

import React from 'react';


function ListRendering() {
  const items = ['Item 1', 'Item 2', 'Item 3'];


  const itemList = items.map((item, index) => (
    
  • {item}
  • )); return
      {itemList}
    ; } export default ListRendering;

    在上述例子中,items 是一个包含字符串的数组。通过map函数,我们遍历数组并为每个元素创建一个

  • 元素。注意,每个
  • 元素都有一个唯一的key属性,通常使用元素的索引作为key。这有助于React在更新时更准确地识别每个元素。

    添加 key 属性的原因

    1. React的更新算法: React使用key属性来优化元素更新的过程。通过使用key,React能够更有效地确定哪些元素被添加、删除或修改,从而避免不必要的重新渲染。
    2. 帮助React识别元素: 每个React元素都应该有一个唯一的key,以便React能够区分它们。这对于处理动态列表、排序或筛选等操作非常重要。

    使用元素属性作为 key 的注意事项

    你可能会想直接把数组项的索引当作 key 值来用,实际上,如果你没有显式地指定 key 值,React 确实默认会这么做。但是数组项的顺序在插入、删除或者重新排序等操作中会发生改变,此时把索引顺序用作 key 值会产生一些微妙且令人困惑的 bug。

    与之类似,请不要在运行过程中动态地产生 key,像是 key={Math.random()} 这种方式。这会导致每次重新渲染后的 key 值都不一样,从而使得所有的组件和 DOM 元素每次都要重新创建。这不仅会造成运行变慢的问题,更有可能导致用户输入的丢失。所以,使用能从给定数据中稳定取得的值才是明智的选择。

    有一点需要注意,组件不会把 key 当作 props 的一部分。Key 的存在只对 React 本身起到提示作用。

    所以在使用元素属性作为key时,需要确保该属性在列表中是唯一且稳定的。不推荐使用索引作为唯一的key,因为它可能导致一些问题,尤其是在动态操作数组时。

    // 不推荐
    const itemList = items.map((item, index) => (
      
  • {item}
  • ));

    最好的做法是使用每个元素的唯一标识符作为key,例如元素在数据中的ID。

    const itemsWithId = [
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
      { id: 3, text: 'Item 3' },
    ];
    
    
    const itemList = itemsWithId.map((item) => (
      
  • {item.text}
  • ));

    没有稳定的 ID 的情况

    如果数据中没有唯一且稳定的ID,你可以使用一些哈希函数或库来生成一个稳定的ID,确保在数据变化时仍然能够提供唯一的key。

    import { v4 as uuidv4 } from 'uuid';
    
    
    const items = ['Item 1', 'Item 2', 'Item 3'];
    
    
    const itemList = items.map((item) => (
      
  • {item}
  • ));

    在这个例子中,我们使用了uuid库来生成一个唯一的ID作为key。

    总之,列表渲染是React中常见的模式,使用key属性可以确保React在处理动态列表时更加高效和准确。

    马上一练

    数组生成菜谱列表,其中每个菜谱,都用

    来显示它的名称,并在里列出它所需的原料。export const recipes = [
      {
        id: 'greek-salad',
        name: '希腊沙拉',
        ingredients: ['西红柿', '黄瓜', '洋葱', '油橄榄', '羊奶酪'],
      },
      {
        id: 'hawaiian-pizza',
        name: '夏威夷披萨',
        ingredients: ['披萨饼皮', '披萨酱', '马苏里拉奶酪', '火腿', '菠萝'],
      },
      {
        id: 'hummus',
        name: '鹰嘴豆泥',
        ingredients: ['鹰嘴豆', '橄榄油', '蒜瓣', '柠檬', '芝麻酱'],
      },
    ];
    
    export default function RecipeList() {
      return (
        

    菜谱

    {recipes.map(recipe =>

    {recipe.name}

      {recipe.ingredients.map(ingredient =>
    • {ingredient}
    • )}
    )}
    ); }
  • 你可能感兴趣的:(react.js,javascript,前端)