• React组件中的key


    React组件中的key

    一、key的作用

      react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给react自己用的。

      简单来说,react利用key来识别组件,它是一种身份标识标识,就像我们的身份证用来辨识一个人一样。每个key对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建。例如下面代码:

    //this.state.users内容
     this.state = {
        users: [
          {
              id: 1, 
              name: '张三'
          },
          {
              id: 2, 
              name: '李四'
          }, 
          {
              id: 2,
              name: "王五"
           }],
         ....//省略}
          render()
          return (
              <div>
                  <h3>用户列表</h3>
                  {this.state.users.map(
                      u => <div key={u.id}>{u.id}: {u.name}</div>
                  )}
              </div>
          )
      );                    

      上面代码在dom渲染挂载后,用户列表只有张三李四两个用户,王五并没有展示处理,主要是因为react根据key认为李四王五是同一个组件,导致第一个被渲染,后续的会被丢弃掉。

      这样,有了key属性后,就可以与组件建立了一种对应关系,react根据key来决定是销毁重新创建组件还是更新组件。

      1) key相同,若组件属性有所变化,则react只更新组件对应的属性;没有变化则不更新。

      2) key值不同,则react先销毁该组件(有状态组件的componentWillUnmount会执行),然后重新创建该组件。

      3) setState:谁用到了所更新的state,就会刷新该组件,render也并不是所有都会变化,只变state改变的部分。

    另外需要指明的是:

    key不是用来提升react的性能的,不过用好key对性能是有帮组的。

      应该知道React使用virtual dom来比较UI状态的变化,如果DOM中的某一节点更新时重新渲染,一样的话就不渲染。key属性的作用就在与解决渲染List的这种难题,简单来说,例如你有一个List:

    <li>Orange</li> <li>Banana</li>

    如果想更新成

    <li>Apple</li> <li>Orange</li>

    那dom比较算法就可以有多种选择,例如销毁两个,生成两个新的代替,或者销毁banana,在orange前插入apple等等,当list多的时候情况就比较复杂,所以React为了使得Dom比较算法最快,需要你提供给每一个list元素一个特殊的key,这样就容易比较前后两个大型的List了,帮助React如何移动、替代、销毁、插入节点,例如:

    let List = this.props.fruits.map((fruit) => {
        return <FruitList key={fruit.id} name={fruit.name}/>
    });
    
    return (<div>{List}</div>)

    二、注意

    1、key是React中使用的一种特殊的属性(除此之外还有ref属性)。当元素被创建的时候,React会将元素的key值和对应元素绑定存储起来。
    2、尽管key看起来像是props的一部分,可是事实上我们无法通过this.props.key获取到key的值。React会在判断元素更新的时候自动使用key,而组件自己是无法获取到key的
    3、当一个列表被重新渲染时,React会根据较新的元素内容依据相应的key值来匹配之前的元素内容
    4、当一个新的key值添加到列表中时,表示有一个组件被创建;被删除时表示有一个组件被销毁。
    5、Key值可以让React明确标识每个组件,这样在重新渲染的时候保有对应的状态数据。
    6、如果你去改变某个组件的key值的话,它会在下次渲染的时候被销毁并当作新的组件重新渲染进来

  • 相关阅读:
    24节气冬至
    最佳人体舒适温度是多少?
    常用正则
    点击按钮后的Loading处理
    支付时过渡动画
    npm ci 和 npm install
    Vue批量上传文件及实时进度
    HTML DOM classList 属性的使用
    Electron Uncaught ReferenceError: require is not defined
    javascript 深拷贝的问题
  • 原文地址:https://www.cnblogs.com/Michelle20180227/p/9869502.html
Copyright © 2020-2023  润新知