React之旅-05 List Key

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

const list = ['Learn React', 'Learn GraphQL'];

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

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

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

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

如果你的代码如下：

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>
  );
};

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

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

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 是非受控元素，当你运行上述的代码时，运行的结果，可能和你相像的不太一致。

// 列表最初的样子

[x] Learn React
[ ] Learn GraphQL

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

[x] Learn GraphQL
[ ] Learn React

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

// 列表当初的样子

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

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

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

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

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>
  );
};

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

// 列表最初的样子
[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