Reactjs不能忽略的key

pinecone 發(fā)布于2019-08-20 14:13 / 2721人閱讀

摘要：前言是唯一一個(gè)用來(lái)分辨子元素的標(biāo)識(shí)。在元素?cái)?shù)組中，應(yīng)該被賦予給每個(gè)元素，從而每個(gè)元素都有一個(gè)穩(wěn)定的身份證明。注意事項(xiàng)值并不是需要全局唯一，而只需要在相鄰的兄弟元素中唯一就好。不要使用的來(lái)做為值，因?yàn)槿绻捻樞虬l(fā)生改變，那么值也會(huì)發(fā)生改變。

前言

key是React唯一一個(gè)用來(lái)分辨子元素的標(biāo)識(shí)。如果我們動(dòng)態(tài)創(chuàng)建子React元素，而且這些子元素的順序或者數(shù)量不確定的時(shí)候，那么就需要使用key這個(gè)屬性。

Key的使用允許React來(lái)分辨哪些元素改變了，哪些是增加的，那些被刪除了。在元素?cái)?shù)組中，key應(yīng)該被賦予給每個(gè)元素，從而每個(gè)元素都有一個(gè)穩(wěn)定的身份證明。

不使用key，可能出現(xiàn)的錯(cuò)誤

可能會(huì)造成渲染錯(cuò)誤

我之前做了一個(gè)2048的小游戲，但是在移動(dòng)的時(shí)候，總是會(huì)出現(xiàn)跳的現(xiàn)象：

可能會(huì)出現(xiàn)數(shù)據(jù)的錯(cuò)誤

舉個(gè)例子，目的是可以在最上方增加輸入行：

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} : );
  }
}

看著似乎沒(méi)有問(wèn)題，但是由于缺少key值，會(huì)造成一個(gè)bug:

由上面的GIF中可以看到，原來(lái)在Input 2里面輸入的值變成Input 3的值了，這是為什么？

由于沒(méi)有使用key，造成React靠順序來(lái)判斷子元素，所以就造成了Input 2的元素，修改props成Input 3，而原本里面存著的state并沒(méi)有發(fā)生變化，所以就顯示的是Input 3的輸入域里面顯示著原本Input 2的值。
同理，Input 1變成了Input 2，然后又重新生成了一個(gè)Input 1.

而如果我們使用了key，

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

那么React就會(huì)很容易的辨別子元素，會(huì)變成下面這個(gè)樣子，就不會(huì)造成上面的錯(cuò)誤了：

缺少key，會(huì)造成性能的浪費(fèi)

就像之前的那個(gè)例子里所展示，不加Key可能會(huì)造成更多的渲染。

我們?cè)?b>Item里面加一個(gè)shouldComponentUpdate的判斷：

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

這樣子保證當(dāng)value和state不改變的時(shí)候，不會(huì)調(diào)用re-render。
我們可以通過(guò)React Performance Tool的Perf來(lái)看一下渲染次數(shù)的對(duì)比。

首先，我們?cè)黾訋讉€(gè)功能reverse(調(diào)轉(zhuǎn)), insert(插入到第一個(gè)) 和 delete(刪除第一個(gè))

其次，我們規(guī)定的步驟是1. insert 2.insert 3.reverse 4.delete，來(lái)看一看渲染的次數(shù)

下面是打印的結(jié)果：
沒(méi)有使用Key

使用Key

對(duì)比效果很明顯，沒(méi)有使用key的時(shí)候，render了14次。而使用key的時(shí)候，只render了2次(2次insert)。中間的差別很大，時(shí)間也差很多。

key的其他用法

看了這篇文章發(fā)現(xiàn)了一個(gè)很有趣的用法.

按照作者所說(shuō)，如果同一個(gè)組件，如果要修改其中的一些props會(huì)造成很多數(shù)據(jù)重新計(jì)算，可能會(huì)寫(xiě)很多判斷邏輯，有的時(shí)候還是不如直接重新全部刪除重新計(jì)算。

有的時(shí)候你想要銷毀和重建組件，觸發(fā)componentDidMount方法，重置state。那么就可以使用key這個(gè)屬性。當(dāng)你要銷毀、重建組件的時(shí)候，你就可以通過(guò)改變key值來(lái)達(dá)到這個(gè)目的。

詳細(xì)的可以看看上面的文章鏈接。

注意事項(xiàng)

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

不要使用array的index來(lái)做為key值，因?yàn)槿绻?b>array的順序發(fā)生改變，那么key值也會(huì)發(fā)生改變。就會(huì)造成上面舉的例子的那種問(wèn)題。

排版有點(diǎn)亂。。。我會(huì)繼續(xù)修改

以上