亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Reactjs不能忽略的key

pinecone / 2777人閱讀

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

前言

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

Key的使用允許React來分辨哪些元素改變了，哪些是增加的，那些被刪除了。在元素?cái)?shù)組中，key應(yīng)該被賦予給每個元素，從而每個元素都有一個穩(wěn)定的身份證明。
不使用key，可能出現(xiàn)的錯誤 
可能會造成渲染錯誤

我之前做了一個2048的小游戲，但是在移動的時候，總是會出現(xiàn)跳的現(xiàn)象：

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

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

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并沒有發(fā)生變化，所以就顯示的是Input 3的輸入域里面顯示著原本Input 2的值。
    同理，Input 1變成了Input 2，然后又重新生成了一個Input 1.

    而如果我們使用了key，

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

    那么React就會很容易的辨別子元素，會變成下面這個樣子，就不會造成上面的錯誤了：

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

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

    我們在Item里面加一個shouldComponentUpdate的判斷：

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

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

    首先，我們增加幾個功能reverse(調(diào)轉(zhuǎn)), insert(插入到第一個) 和 delete(刪除第一個)

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

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

    使用Key

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

    key的其他用法

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

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

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

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

    注意事項(xiàng)

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

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

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

    以上

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/81469.html

    相關(guān)文章

    • 【Under-the-hood-ReactJS-Part0】React源碼解讀

      摘要：接上文完整流程圖見繼續(xù)我們的之旅，讓我們從的調(diào)用開始。他們就是用來表示組件方法的返回值，除此之外，沒有其他的。同時，在的創(chuàng)建期間，將會合并和如果有聲明的話，并且嚴(yán)重。顯然，這一步驟會引起一些性能問題。 接上文--- 完整流程圖見：https://bogdan-lyashenko.gith...繼續(xù)我們的React之旅，讓我們從ReactDOM.render的調(diào)用開始。 ReactDOM...

      Turbo 評論0 收藏0

    • Reactjs 列表優(yōu)化的一些心得。

      摘要：前言在應(yīng)用開發(fā)中，列表是我們使用頻率非常高的一種展現(xiàn)形式，在項(xiàng)目中更是如此。無處不在的使用更是需要我們小心觸發(fā)性能瓶頸的深水炸彈。不要用索引當(dāng)值要求我們對列表中的每一項(xiàng)設(shè)置一個唯一的值，這個虛擬的算法有很大關(guān)系。 前言 在應(yīng)用開發(fā)中，列表是我們使用頻率非常高的一種展現(xiàn)形式，在reactjs項(xiàng)目中更是如此。無處不在的使用更是需要我們小心觸發(fā)性能瓶頸的深水炸彈。 下面就我最近的總結(jié)出的幾點(diǎn)...

      劉玉平 評論0 收藏0

    • 【Under-the-hood-ReactJS-Intro】React源碼解讀

      摘要：所以為了簡化流程，這些的代碼都先暫時忽略了。也就是說，每個平臺都有獨(dú)立的實(shí)現(xiàn)。我們將調(diào)試兩個過程，和分別對應(yīng)掛載和更新兩個階段。 概述：先看看React的架構(gòu)圖：https://bogdan-lyashenko.gith... 好好看一下上圖，初看看起來好像很復(fù)雜，但是事實(shí)上，它只描述了兩個過程：掛載和更新。由于卸載在某種程度上就是反掛載，上圖中我們移除了卸載的過程，以使得流程圖看起來...

      seasonley 評論0 收藏0

    • 【Under-the-hood-ReactJS-Part13】React源碼解讀

      摘要：接著，將返回的元素和之前的進(jìn)行比較的，以驗(yàn)證是否真的需要更新。我們看下代碼，代碼比較簡單好，對應(yīng)于我們的這個列子，我們對于方法的更改并不會對方法造成影響。所以我們進(jìn)入下一步，也就是對于節(jié)點(diǎn)的更新。 接上文， React流程圖：https://bogdan-lyashenko.gith... 如果組件真的需要更新 在組件剛開始更新過程時，如果有定義componentWillUpdate方...

      jerryloveemily 評論0 收藏0

    • VS Code配置及插件推薦

      摘要：宋體以像素為單位控制字號。將其設(shè)置為可隱藏窗格。是否已啟用自動刷新是否啟用自動拉取以像素為單位控制終端的字號，這是的默認(rèn)值。要求工作區(qū)使用高于版本的。 用戶設(shè)置 打開 文件 > 首選項(xiàng) > 用戶設(shè)置(U)，（忽略覆蓋工作區(qū)提示） { // 一個制表符等于的空格數(shù)。該設(shè)置在 `editor.detectIndentation` 啟用時根據(jù)文件內(nèi)容進(jìn)行重寫。 editor.tabS...

      wpw 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <