关于react的diff算法面试题

最新推荐文章于 2025-03-27 20:21:54 发布

壹加贰

最新推荐文章于 2025-03-27 20:21:54 发布

阅读量744

点赞数 1

文章标签： reactjs vue.js javascript

本文链接：https://blog.youkuaiyun.com/One_And_One/article/details/116239163

版权

本文探讨了React和Vue中key的作用及其内部原理。强调了在遍历数据时，为何通常不建议使用index作为key，尤其是在涉及增删操作可能打乱顺序的情景下。总结了何时可以使用index以及何时应使用具有唯一性的标识作为key。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react/vue中的key有什么作用？（key的内部原理是什么？）

为什么遍历的时候最好不要用index作为key值?

直接上代码。。。

<script type="text/babel">
  class Life extends React.Component {
    state = {
      person: [
        { id: 1, name: '张三', age: 16 },
        { id: 2, name: '小明', age: 17 },
        { id: 3, name: '小红', age: 18 },
      ]
    }
    render() {
      return (
        <div>
          <button onClick={this.add}>添加一个数据-李四</button>
          <h2>用index作为key的操作</h2>
          <ul>
            {
              this.state.person.map((ele, index) => {
                return <li key={index}>{ele.name}------{ele.age} </li>
              })
            }
          </ul>
          <hr />
          <hr />
          <h2>用id作为key的操作</h2>
          <ul>
            {
              this.state.person.map((ele, index) =>