啰嗦啰嗦React/Vue里key这个东东

前言：最近面试经常聊到key的概念，一个非常常见的知识点，但还是遇到了一部分并不理想的情况。所以我想再啰嗦啰嗦，交流分享一下我的理解和认识。

key这个概念，无论是React还是Vue，写过的同学，应该没有不知道的。对于key的理解，大部分人都描述的相差无二，基本都是在渲染数组列表的场景，条目项在添加、删除或调整顺序时，前后便于对应起来，提供diff以及渲染性能。

下面就以React为例唠一唠，先参考一下官网文档的说明：

“key” 是在创建元素数组时，需要用到的一个特殊字符串属性。key 帮助 React 识别出被修改、添加或删除的 item。应当给数组内的每个元素都设定 key，以使元素具有固定身份标识。

只需要保证，在同一个数组中的兄弟元素之间的 key 是唯一的。

不要将 Math.random() 之类的值传递给 key。重要的是，在前后两次渲染之间的 key 要具有“固定身份标识”的特点，以便 React 可以在添加、删除或重新排序 item 时，前后对应起来。理想情况下，key 应该从数据中获取，对应着唯一且固定的标识符，例如 post.id。

这个说道在创建元素数组时，因为这一点，应该有相当一部分人就局限于此了。我们多想一想，这里实际上只是一个特别有代表性，而且便于理解释义的一个场景case。多理解理解上面的解释，帮助React识别，使元素具有固定身份标识，唯一性，为什么需要这样呢，达成这样的条件，React它是想做什么？从这里我深入想一想，研究一下。

首先 `SHOW ME YOUR CODE!`

元素数组的case，个人认为就没有必要跟大家絮叨了，官网以及网上都能找到很多参考，这里我们拿非数组场景来研究一下。

只做核心代码逻辑展示，上下文省略，需要的自行下去完善。
定义一个示例组件：CompA.js

import { useEffect, useState } from "react";

export default function CompA({ name }) {
  const [val, setVal] = useState("");
  useEffect(() => {
    console.log(name, "mounted!!!");
  }, []);
  return (
    <div className="App">
      <h2>CompA name: {name}</h2>
      <input
        style={{ width: "200px" }}
        value={val}
        onChange={(ev) => setVal(ev.target.value)}
        placeholder="代表组件内部状态, 初始状态"
      />
      {val ? <p>当前组件内部状态变化：val = {val}</p> : null}
    </div>
  );
}

示例展示容器： App.js

import "./styles.css";
import CompA from "./CompA";
import { useState } from "react";

export default function App() {
  const [key, setKey] = useState("");
  const [name, setName] = useState("");
  const [cname, setCname] = useState("default");
  const [ckey, setCkey] = useState("a1");

  return (
    <div className="App">
      <h1>React key</h1>
      <input
        placeholder="请输入key"
        value={key}
        onChange={(ev) => setKey(ev.target.value)}
      />
      <button onClick={() => setCkey(key)}>修改CompA实例的key</button>
      <br />
      <input
        placeholder="请输入name"
        value={name}
        onChange={(ev) => setName(ev.target.value)}
      />
      <button onClick={() => setCname(name)}>修改CompA实例的props: name</button>
      <CompA key={ckey} name={cname} />
    </div>
  );
}

运行效果，初始状态

运行效果，初始状态

控制台打印内容：
```
default CompA mounted!!! 
```
修改组件状态，效果如下，ComA组件实例内部状态发生了变化

修改组件状态，展示效果

此时控制台无新的打印
改变一下CompA组件的props属性看看

修改props，展示效果

此时组件CompA实例一直是没有变化，还是最初构建的实例对象，因为控制台依然没有新的打印。
现在我们改变一下key，试试看

修改key，展示效果

此时控制打印内容： (第一行未#1打印的)
```
default CompA mounted!!! 
porps change CompA mounted!!! 
```

结果很明了了，#4仅仅是改变了key，props还是name='props change'，从打印及执行展示效果上来看，组件重新构建实例化了，props还是原来的，但因为重新实例化，内部状态没有了，回到了初始状态。这点其实在我们实际开发中很有用的，不仅限于元素数组。
线上查看：https://codesandbox.io/s/react-key-hwq6y

最终总结一下

React拿key做什么的呢，再回看官网解释，重点我们不要仅关注元素数组，而唯一的固定身份标识和前后对应，这点才是核心。
在我面试的时候，很多候选人还会说到diff算法，理论上说的很多都没有问题，甚至没有破绽。但是否真正理解了diff算法以及key的概念，对应上实际case，就有一部分断线了。
React根据key，唯一确定定位对应的组件实例，通过key更快速定位，综上因此就是：

key相同，复用保持原实例，props或者内部state状态变化，react只更新组件对应变化的属性。
key不同，销毁之前的组件实例，再重新构建新的组件实例。(前提上下文，仅针对当前组件，组件数组情况可对比参考官网)

技术最重要的还是应用，要灵活应用好，首先我们要真正的理解它是怎么运行的，进而逻辑原理，最终能做到触类旁通，举一反三，知其然，知其所以然。

参考

React官网-术语key

个人理解整理，欢迎交流，如有错误之处，还请斧正。

啰嗦啰嗦React/Vue里key这个东东

首先 SHOW ME YOUR CODE!

最终总结一下

参考

推荐阅读更多精彩内容

首先 `SHOW ME YOUR CODE!`