zoukankan      html  css  js  c++  java
  • ReactJS修炼之路(二):组件的key

    核心内容: React是根据组件上设定的key属性来生成该组件唯一的标识,只有key改变了,React才会更新组件,否则重用该组件。如果想要更新组件内容,请保证每次的key都不一样。

    React修炼之路(一)里面实现组件更新的方法就不说了,这里说说上面文档给我的启发。首先要明确自己的业务需求。

    • 你的组件不是动态组件(不需要动态更新),例如你一个列表只做展示,第一次render出来后就不会改变里面的内容,那么你不需要指定key(不指定key时,React也会生成一个默认的标识),或者将index作为key,只要key不重复即可。

    • 你的组件是动态组件(需要动态更新),例如你一个列表做展示时,能向列表添加或删除元素,此时组件是需要刷新的,刷新的依据就是key,对于相同的key,React会采取和上一次刷新同样的方式。这个时候,如果你采取index作为key,那么假设你在列表顶部添加了元素,那么新的元素的key就是index=0,和上一次刷新时旧顶部元素的key相同,此时React将认为这是这个新元素就是就顶部元素,所以就按照顶部元素的内容刷新该元素,导致新元素的内容就是以前的内容,这个和我的预期不一致,我们预期是顶部元素显示新的内容。键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识:

    • 虚拟的dom也就是在内存中存在两个不同的obj去比较,比较两个对象的一些属性的这个过程,就是虚拟dom,不同的话就更新。
  • 相关阅读:
    基于sshpass批量实现主机间的key验证脚本
    一键安装mysql5.7.30脚本
    centos8网卡名称修改
    mysql分库备份脚本
    centos一键二进制编译安装mariadb-10.2.31脚本
    chrony时间同步服务简介及配置
    linux基于key验证
    expect 脚本语言中交互处理常用命令
    shell中数值测试和算术表达式比较
    JAVA Math的简单运用
  • 原文地址:https://www.cnblogs.com/susan-home/p/8693184.html
Copyright © 2011-2022 走看看