React入门学习（四）-- key的作用

📢 大家好，我是小超同学，一名在职的前端人员

📢 这篇文章将尽力说明白 key的作用

📢 愿你忠于自己，热爱生活

前言

diff 算法是 React 提升渲染性能的一种优化算法，在 React 中有着很重要的地位，也不止于 React ，在 Vue 中也有 diff 算法，似乎没有差别。在最近的 React 学习中，学到了 diff 算法、对于 diff 算法的一点理解，有什么问题或者错误的地方，大家一定要指出！

什么是虚拟 DOM ？

在谈 diff 算法之前，我们需要先了解虚拟 DOM 。它是一种编程概念，在这个概念里，以一种虚拟的表现形式被保存在内存中。在 React 中，render 执行的结果得到的并不是真正的 DOM 节点，而是 JavaScript 对象

虚拟 DOM 只保留了真实 DOM 节点的一些基本属性，和节点之间的层次关系，它相当于建立在 JavaScript 和 DOM 之间的一层“缓存”

jsx
<div class="hello">
    <span>hello world!</span>
</div>

上面的这段代码会转化可以转化为虚拟 DOM 结构

jsx
{
    tag: "div",
    props: {
        class: "hello"
    },
    children: [{
        tag: "span",
        props: {},
        children: ["hello world!"]
    }]
}

其中对于一个节点必备的三个属性 tag，props，children

• tag 指定元素的标签类型，如“li，div”
• props 指定元素身上的属性，如 class ，style，自定义属性
• children 指定元素是否有子节点，参数以数组形式传入

而我们在 render 中编写的 JSX 代码就是一种虚拟 DOM 结构。

key的作用

引入 key 的优化策略，让性能上有了翻天覆地的变化

那 key 有什么作用呢？

当同一层级的节点添加了 key 属性后，当位置发生变化时。react diff 进行新旧节点比较，如果发现有相同的 key 就会进行移动操作，而不会删除再创建

为什么不能用 index 作为 key 值呢？

index 作为 key ，如果我们删除了一个节点，那么数组的后一项可能会前移，这个时候移动的节点和删除的节点就是相同的 key ，在react中，如果 key 相同，就会视为相同的组件，但这两个组件是不同的，这样就会出现很麻烦的事情，例如：序号和文本不对应等问题

所以一定要保证 key 的唯一性

示例演示

页面展示条件：1、我有一个数组persons里面有两条人员默认数据，然后展示到页面、在每一条人员里在> > 加一个输入框 2、还有一个添加按钮每次点击在页面顶部增加一条人员数据

代码执行后页面效果

演示效果视频

完整代码

jsx
class Person extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          persons: [
            { id: 1, name: 'tom', age: 18 },
            { id: 2, name: 'jack', age: 19 },
          ]
        }
      }
      componentDidMount () {

      }
      add = () => {
        const { persons } = this.state
        const newPersons = { id: persons.length + 1, name: 'lucy', age: 21 }
        this.setState({
          persons: [newPersons, ...persons]
        })
      }
      render () {
        return (
          <div>
            <h2> 展示人员信息</h2>
            <button onClick={this.add}>添加</button>
            <h3>使用index索引值作为key</h3>
            <ul>
              {
                this.state.persons.map((personObj, index) => {
                  return <li key={index}>姓名：{personObj.name}---年龄：{personObj.age} <input type="text" /> </li>
                })
              }
            </ul>
            <hr></hr>
            <h3>使用数据id(数据的唯一标识)索引值作为key</h3>
            <ul>
              {
                this.state.persons.map((personObj, index) => {
                  return <li key={personObj.id}>姓名：{personObj.name}---年龄：{personObj.age} <input type="text" /></li>
                })
              }
            </ul>
          </div>
        )
      }
    }
    ReactDOM.render(<Person />, document.getElementById("example"))

总结：

1、通过上面的例子发现key（写正确）不仅可以提升性能而且还可以 排除不可预知的bug