虚拟DOM中key的作用

2022-05-03 20:31:32 阅读：160 来源： 互联网

标签：name DOM persons 虚拟 key personObj

1）简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。 2）详细的说：当状态中的数据发生变化时，react会根据“新数据”生成“新的虚拟DOM”，随后React进行“新虚拟DOM” 与“旧虚拟DOM”的Diff比较，比较规则如下 a.旧虚拟DOM中找到了与新虚拟DOM相同的key：（1）若虚拟DOM内容没变，直接使用之前的真实DOM （2）若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM b.旧虚拟DOM中未找到了与新虚拟DOM相同的key 根据数据创建新的真实DOM，随后渲染到页面用index作为key可能引发的问题 1.若对数据进行：逆序添加、删除等破坏顺序的操作：会产生没有必要的真实DOM更新==》界面效果没有问题，但效率低 2.如果机构中还包括输入类的DOM：会产生错误DOM更新==〉界面有问题 3.注意如果不存在对数据的逆序增删改等破坏顺序的操作，仅用于渲染列表展示，使用index作为key时没有问题的开发中如何选择key 1.最好使用每条数据的唯一标识作为key，比如id、手机号、学号等唯一值 2.如果确定只是简单的展示数据，用index也是可以的

class App extends React.Component {
  state = {
    persons: [
      { id: 1, name: 'wang', age: 18 },
      { id: 2, name: 'xiang', age: 19 }
    ]
  }
  add = () => {
    const p = { id: this.state.persons.length + 1, name: "di", age: 20 }
    this.setState({
      persons: [p, ...this.state.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>
        <h2>展示个人信息</h2>

        <h3>使用id作为key</h3>
        <ul>
          {
            this.state.persons.map((personObj) => {
              return <li key={personObj.id}>{personObj.name}--{personObj.age}<input type="text" /></li>
            })
          }
        </ul>
      </div>

    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

标签：name,DOM,persons,虚拟,key,personObj
来源： https://www.cnblogs.com/shuchenhao/p/16219327.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

虚拟DOM中key的作用