React(Key)

key適用于Virtual DOM樹新舊情形如下時

<div>
<TodoItem text="one" />
<TodoItem text="two" />
</div>

<div>
<TodoItem text="zero" />
<TodoItem text="one" />
<TodoItem text="two" />
</div>

我們只是前插了一個TodoItem 節點,但如果沒有key,<TodoItem text="one" />
<TodoItem text="two" />都會被卸載,然后<TodoItem text="zero" />,<TodoItem text="one" />,<TodoItem text="two" />會被加載,這會造成DOM樹更新成本的劇增。

之所以出現上述這種更新方案,是因為react在判斷兩個新舊節點不同時所依據的"標識"是各節點位置。上述情形中,新舊節點位置不同,react自然會認為新舊節點不同。

而按照我們的理想狀態,應該讓<TodoItem text="one" />,<TodoItem text="two" />不被卸載,僅僅只是<TodoItem text="zero" />被加載,這就需要各個節點增加一個新標識,這個標識應該不隨節點位置的變化而變化。這個標識,就被我們稱為"key"。

  • 采用"key"的解決方案

<div>
<TodoItem key={1} text="one" />
<TodoItem key={2} text="two" />
</div>

<div>
<TodoItem key={0} text="zero" />
<TodoItem key={1} text="one" />
<TodoItem key={2} text="two" />
</div>
···

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • react有一個特殊屬性key 應用場景根據數組動態創造,不確定數量,順序的子節點時使用需要對某一組件的更新操作強...
    mengxr閱讀 676評論 0 1
  • 參考文章:深度剖析:如何實現一個Virtual DOM 算法 作者:戴嘉華React中一個沒人能解釋清楚的問題——...
    waka閱讀 5,987評論 0 21
  • It's a common pattern in React to wrap a component in an ...
    jplyue閱讀 3,295評論 0 2
  • 你的名字叫四月雪,你只是覺得很有意境很漂亮,可是有一天你突然發現真的活成了四月雪。 剛剛進入四月的時候,你是很抗拒...
    北塵邀月閱讀 592評論 0 1
  • 看著半夜的指針滴答滴答的走動,忽然心情有些沉重。 以書催眠,那張伴隨我8年的書簽悄然滑落。看著書簽,上面還有你瀟灑...
    云逗閱讀 635評論 0 0