Reactjs不能忽略的key

pinecone 发布于2019-08-20 14:13 / 2708人阅读

摘要：前言是唯一一个用来分辨子元素的标识。在元素数组中，应该被赋予给每个元素，从而每个元素都有一个稳定的身份证明。注意事项值并不是需要全局唯一，而只需要在相邻的兄弟元素中唯一就好。不要使用的来做为值，因为如果的顺序发生改变，那么值也会发生改变。

前言

key是React唯一一个用来分辨子元素的标识。如果我们动态创建子React元素，而且这些子元素的顺序或者数量不确定的时候，那么就需要使用key这个属性。

Key的使用允许React来分辨哪些元素改变了，哪些是增加的，那些被删除了。在元素数组中，key应该被赋予给每个元素，从而每个元素都有一个稳定的身份证明。

不使用key，可能出现的错误

可能会造成渲染错误

我之前做了一个2048的小游戏，但是在移动的时候，总是会出现跳的现象：

可能会出现数据的错误

举个例子，目的是可以在最上方增加输入行：

export default class List extends React.Component {
  index = 3

  constructor(props) {
    super(props);

    this.state = {
      list: [2,1]
    };
  }

  insert = ()=>{
    let list = [this.index++, ...this.state.list];
    this.setState({
      list
    });
  }

  render(){
    return (
      
        
        {
          this.state.list.map(value=>{
            return 
          });
        }
        
        
      
      );
  }
}

export default class Item extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      input: ""
    };
  }

  onChange = (e)=>{
    this.setState({
      input: e.target.value
    })
  }

  render(){
    return (Input {this.props.value} : );
  }
}

看着似乎没有问题，但是由于缺少key值，会造成一个bug:

由上面的GIF中可以看到，原来在Input 2里面输入的值变成Input 3的值了，这是为什么？

由于没有使用key，造成React靠顺序来判断子元素，所以就造成了Input 2的元素，修改props成Input 3，而原本里面存着的state并没有发生变化，所以就显示的是Input 3的输入域里面显示着原本Input 2的值。
同理，Input 1变成了Input 2，然后又重新生成了一个Input 1.

而如果我们使用了key，

render(){
    return (
      
        
        {
          this.state.list.map(value=>{
            return 
          });
        }
        
        
      
      );
  }

那么React就会很容易的辨别子元素，会变成下面这个样子，就不会造成上面的错误了：

缺少key，会造成性能的浪费

就像之前的那个例子里所展示，不加Key可能会造成更多的渲染。

我们在Item里面加一个shouldComponentUpdate的判断：

shouldComponentUpdate(nextProps, nextState){
    return nextProps.value != this.props.value || this.state.input !== nextState.input;
  }

这样子保证当value和state不改变的时候，不会调用re-render。
我们可以通过React Performance Tool的Perf来看一下渲染次数的对比。

首先，我们增加几个功能reverse(调转), insert(插入到第一个) 和 delete(删除第一个)

其次，我们规定的步骤是1. insert 2.insert 3.reverse 4.delete，来看一看渲染的次数

下面是打印的结果：
没有使用Key

使用Key

对比效果很明显，没有使用key的时候，render了14次。而使用key的时候，只render了2次(2次insert)。中间的差别很大，时间也差很多。

key的其他用法

看了这篇文章发现了一个很有趣的用法.

按照作者所说，如果同一个组件，如果要修改其中的一些props会造成很多数据重新计算，可能会写很多判断逻辑，有的时候还是不如直接重新全部删除重新计算。

有的时候你想要销毁和重建组件，触发componentDidMount方法，重置state。那么就可以使用key这个属性。当你要销毁、重建组件的时候，你就可以通过改变key值来达到这个目的。

详细的可以看看上面的文章链接。

注意事项

key值并不是需要全局唯一，而只需要在相邻的兄弟元素中唯一就好。

不要使用array的index来做为key值，因为如果array的顺序发生改变，那么key值也会发生改变。就会造成上面举的例子的那种问题。

排版有点乱。。。我会继续修改

以上

GPU云服务器云服务器 php忽略警告的设置 python的key linux的key php 的key

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81469.html

【Under-the-hood-ReactJS-Part0】React源码解读

摘要：接上文完整流程图见继续我们的之旅，让我们从的调用开始。他们就是用来表示组件方法的返回值，除此之外，没有其他的。同时，在的创建期间，将会合并和如果有声明的话，并且严重。显然，这一步骤会引起一些性能问题。接上文--- 完整流程图见：https://bogdan-lyashenko.gith...继续我们的React之旅，让我们从ReactDOM.render的调用开始。 ReactDOM...

Turbo 2019-08-22 18:20 评论0 收藏0
Reactjs 列表优化的一些心得。

摘要：前言在应用开发中，列表是我们使用频率非常高的一种展现形式，在项目中更是如此。无处不在的使用更是需要我们小心触发性能瓶颈的深水炸弹。不要用索引当值要求我们对列表中的每一项设置一个唯一的值，这个虚拟的算法有很大关系。前言在应用开发中，列表是我们使用频率非常高的一种展现形式，在reactjs项目中更是如此。无处不在的使用更是需要我们小心触发性能瓶颈的深水炸弹。下面就我最近的总结出的几点...

刘玉平 2019-08-22 11:08 评论0 收藏0
【Under-the-hood-ReactJS-Intro】React源码解读

摘要：所以为了简化流程，这些的代码都先暂时忽略了。也就是说，每个平台都有独立的实现。我们将调试两个过程，和分别对应挂载和更新两个阶段。概述：先看看React的架构图：https://bogdan-lyashenko.gith... 好好看一下上图，初看看起来好像很复杂，但是事实上，它只描述了两个过程：挂载和更新。由于卸载在某种程度上就是反挂载，上图中我们移除了卸载的过程，以使得流程图看起来...

seasonley 2019-08-22 18:16 评论0 收藏0
【Under-the-hood-ReactJS-Part13】React源码解读

摘要：接着，将返回的元素和之前的进行比较的，以验证是否真的需要更新。我们看下代码，代码比较简单好，对应于我们的这个列子，我们对于方法的更改并不会对方法造成影响。所以我们进入下一步，也就是对于节点的更新。接上文， React流程图：https://bogdan-lyashenko.gith... 如果组件真的需要更新在组件刚开始更新过程时，如果有定义componentWillUpdate方...

jerryloveemily 2019-08-22 18:32 评论0 收藏0
VS Code配置及插件推荐

摘要：宋体以像素为单位控制字号。将其设置为可隐藏窗格。是否已启用自动刷新是否启用自动拉取以像素为单位控制终端的字号，这是的默认值。要求工作区使用高于版本的。用户设置打开文件 > 首选项 > 用户设置(U)，（忽略覆盖工作区提示） { // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。 editor.tabS...

wpw 2019-08-20 14:42 评论0 收藏0