React之旅-05 List Key

每个React的初学者,在调试程序时,都会遇到这样的警告:**Warning: Each child in a list should have a unique "key" prop.**如下面的代码:

TypeScript 复制代码
const list = ['Learn React', 'Learn GraphQL'];

const ListWithoutKey = () => (
  <div>
    <ul>
      {list.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  </div>
);

这个警告提示我们,需要为列表中的每个元素添加 key 属性。如下面的代码:

TypeScript 复制代码
const ListWithoutKey = () => (
  <div>
    <ul>
      {list.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  </div>
);

使用上面的代码调试时,之前的警告会消失,但其实在其背后,有一个隐式的 bug。当你对列表进行重新排序时,特别是当你添加了非受控的元素,问题就会发生。

如果你的代码如下:

TypeScript 复制代码
const initialList = ['Learn React', 'Learn GraphQL'];

const ListWithUnstableIndex = () => {
  const [list, setList] = React.useState(initialList);

  const handleClick = event => {
    setList(list.slice().reverse());
  };

  return (
    <div>
      <ul>
        {list.map((item, index) => (
          <li key={index}>
            <label>
              {item}
            </label>
          </li>
        ))}
      </ul>

      <button type="button" onClick={handleClick}>
        Reverse List
      </button>
    </div>
  );
};

运行你的代码,点击按钮对列表进行重新排序,看样子,一切正常。

可是当你添加了不受控的元素时,假如你的代码如下:

TypeScript 复制代码
const initialList = ['Learn React', 'Learn GraphQL'];

const ListWithUnstableIndex = () => {
  const [list, setList] = React.useState(initialList);

  const handleClick = event => {
    setList(list.slice().reverse());
  };

  return (
    <div>
      <ul>
        {list.map((item, index) => (
          <li key={index}>
            <label>
              <input type="checkbox" />
              {item}
            </label>
          </li>
        ))}
      </ul>

      <button type="button" onClick={handleClick}>
        Reverse List
      </button>
    </div>
  );
};

在上述的代码中,checkbox 是非受控元素,当你运行上述的代码时,运行的结果,可能和你相像的不太一致。

TypeScript 复制代码
// 列表最初的样子

[x] Learn React
[ ] Learn GraphQL

// 点击按钮,列表重新排序后的样子

[x] Learn GraphQL
[ ] Learn React

这种结果显然不是你想要的,那这背后终究发生了什么呢?

TypeScript 复制代码
// 列表当初的样子

[x] Learn React (index = 1)
[ ] Learn GraphQL (index = 2)

// 点击按钮,列表重新排序后的样子

[x] Learn GraphQL (index = 1)
[ ] Learn React (index = 2)

那如何解决这个问题呢,办法当然有,这次,我们使用了相当稳定的元素作为 key 属性。代码如下:

TypeScript 复制代码
const initialList = [
  { id: 'a', name: 'Learn React' },
  { id: 'b', name: 'Learn GraphQL' },
];

const ListWithStableIndex = () => {
  const [list, setList] = React.useState(initialList);

  const handleClick = event => {
    setList(list.slice().reverse());
  };

  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item.id}>
            <label>
              <input type="checkbox" />
              {item.name}
            </label>
          </li>
        ))}
      </ul>

      <button type="button" onClick={handleClick}>
        Reverse List
      </button>
    </div>
  );
};

点击按钮,列表重新排序后,背后发生了变化。

TypeScript 复制代码
// 列表最初的样子
[x] Learn React (id = a)
[ ] Learn GraphQL (id = b)

// 点击按钮,列表重新排序后的样子

[ ] Learn GraphQL (id = b)
[x] Learn React (id = a)

在这里,我们使用了 id 作为 key 属性,当然,你也可以使用列表中的其他元素,但前提是这个元素是不可改变的唯一值。

不管怎样,仍然值得注意的是,只要你的列表保持的顺序或大小没有改变,使用索引是可以的。然后,列表中每个项目的位置不会改变------它与索引一样稳定------因此使用索引是可以的。

原文链接:Why do we need a React List Key

相关推荐
布列瑟农的星空2 分钟前
大话设计模式——关注点分离原则下的事件处理
前端·后端·架构
山有木兮木有枝_5 分钟前
node文章生成器
javascript·node.js
yvvvy21 分钟前
前端必懂的 Cache 缓存机制详解
前端
北海几经夏37 分钟前
React自定义Hook
前端·react.js
龙在天41 分钟前
从代码到屏幕,浏览器渲染网页做了什么❓
前端
TimelessHaze42 分钟前
【performance面试考点】让面试官眼前一亮的performance性能优化
前端·性能优化·trae
yes or ok1 小时前
前端工程师面试题-vue
前端·javascript·vue.js
我要成为前端高手1 小时前
给不支持摇树的三方库(phaser) tree-shake?
前端·javascript
Noxi_lumors1 小时前
VITE BALABALA require balabla not supported
前端·vite
周胜21 小时前
node-sass
前端