国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React as a UI Runtime(五、列表)

CoyPan / 1248人閱讀

摘要：但是這只在子元素的位置是靜止的并且不需要重排。這可能會引起性能問題和可能的。當(dāng)在中發(fā)現(xiàn)，它就會檢查之前版本中的是否同樣含有。并沒有慣用的支持對在不重新創(chuàng)建元素的情況下讓宿主實例在不同的父元素之間移動。

通過比較樹中的元素是否在同一位置，通常已經(jīng)足夠判斷是否是重用還是再次創(chuàng)建通信組件了。
但是這只在子元素的位置是靜止的并且不需要重排。在我們的上述的例子中，即使message不存在，我們?nèi)匀恢粠nput在message之后，并且沒有其他的子元素。

對于動態(tài)列表，我們不能確定順序是否會一致：

function ShoppingList({ list }) {
  return (
    

      {list.map(item => (
        

          You bought {item.name}
          

          Enter how many do you want: 
        

      ))}
    

  )
}

如果shopping項目沒有被重排，React把所有的p和input元素看做是一個類型，并且不知道怎么移動他們。（從react的視角看，是商品的項目本身改變了，而不是他們的順序）
React執(zhí)行的10個商品項目的重排會是下面這樣：

for (let i = 0; i < 10; i++) {
  let pNode = formNode.childNodes[i];
  let textNode = pNode.firstChild;
  textNode.textContent = "You bought " + items[i].name;
}

So instead of re-ordering them, React would effectively update each of them. This can create performance issues and possible bugs. For example, the content of the first input would stay reflected in first input after the sort — even though conceptually they might refer to different products in your shopping list!

This is why React nags you to specify a special property called key every time you include an array of elements in your output:

所以React會更新每一個元素而不是對他們進(jìn)行重排。這可能會引起性能問題和可能的bugs。例如，當(dāng)商品列表的順序改變時，原本在第一個輸入框的內(nèi)容仍然會存在于現(xiàn)在的第一個輸入框中 — 盡管事實上在商品列表里它應(yīng)該代表著其他的商品！
這就是為什么React會提示你為每一個數(shù)組的遍歷元素標(biāo)記一個獨有的key屬性：

function ShoppingList({ list }) {
  return (
    

      {list.map(item => (
        

          You bought {item.name}
          

          Enter how many do you want: 
        

      ))}
    

  )
}
key 給予 React 判斷子元素是否真正相同的能力，即使在渲染前后它在父元素中的位置不是相同的。

當(dāng) React 在

中發(fā)現(xiàn)

，它就會檢查之前版本中的 是否同樣含有

。即使 中的子元素們改變位置后，這個方法同樣有效。在渲染前后當(dāng) key 仍然相同時，React 會重用先前的宿主實例，然后重新排序其兄弟元素。

需要注意的是 key 只與特定的父親 React 元素相關(guān)聯(lián)，比如 。React 并不會去匹配父元素不同但 key 相同的子元素。（React 并沒有慣用的支持對在不重新創(chuàng)建元素的情況下讓宿主實例在不同的父元素之間移動。）

給 key 賦予什么值最好呢？最簡單的答案就是：哪時候一個元素不會改變即使它在父元素中的順序被改變？ 例如，在商品列表中，商品本身的 ID 是區(qū)別于其他兄弟商品的標(biāo)識。

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/101982.html

相關(guān)文章

  • React as a UI Runtime(二、React元素和入口)

    摘要：元素在宿主環(huán)境中，一個宿主實例是最小的單位像節(jié)點。在中最小的單位是元素。他們總是不斷的重建和銷毀。元素是不可變的。比如，你不能改變一個元素的屬性和其他屬性。入口每一個渲染器都有一個入口。當(dāng)我們說，就意味著親愛的，將我的元素放到的宿主樹去。 1、React元素 在宿主環(huán)境中，一個宿主實例是最小的單位（像DOM節(jié)點）。在React中最小的單位是React元素。一個React元素就是一個描述...

    zhjx922 評論0 收藏0

  • React as a UI Runtime(三、協(xié)調(diào))

    摘要：確定宿主樹怎么樣來響應(yīng)新的信息的這個過程被稱為協(xié)調(diào)。協(xié)調(diào)有兩種方法。我們已經(jīng)創(chuàng)建了一個作為第一個也是唯一一個子元素，并且我們希望在同一個地方再次渲染一個。這個已經(jīng)與的思想非常接近了。 1.協(xié)調(diào) 如果我們在同一個容器中使用兩次ReactDOM.render()會發(fā)生什么？ ReactDOM.render( , document.getElementById(container) ...

    劉德剛 評論0 收藏0

  • React as a UI Runtime(四、條件)

    摘要：我們不想要因為重新創(chuàng)建元素而失去它的選中狀態(tài)，聚焦?fàn)顟B(tài)和顯示內(nèi)容。幸好這個問題有一個簡單的修復(fù)方式，他并不在應(yīng)用中常見。那么會執(zhí)行類似于下面的代碼的狀態(tài)并不會改變 如果React在更新中只重用與元素類型相匹配的宿主實例，那按渲染條件選擇的內(nèi)容怎么辦呢？正如下面的代碼，假如我們開始至需要一個input，但稍后需要在它之前渲染一個message ： // 第一次渲染 ReactDOM.re...

    stonezhu 評論0 收藏0

  • React Native Vs. Xamarin Vs. Ionic Vs. Flutter

    React Native Vs. Xamarin Vs. Ionic Vs. Flutter:Which Is Best For Cross-Platform Mobile App Development? While developing Native Mobile Apps, Android apps are written in Java, and iOS ones in Swift and...

    Clect 評論0 收藏0

  • 程序員練級攻略（2018）：前端性能優(yōu)化和框架

    摘要：，谷歌給的一份性能指南和最佳實踐。目前而言，前端社區(qū)有三大框架和。隨后重點講述了和兩大前端框架，給出了大量的文章教程和相關(guān)資源列表。我認(rèn)為，使用函數(shù)式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習(xí)慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風(fēng)》...

    VEIGHTZ 評論0 收藏0

發(fā)表評論

0條評論

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