key 是用來幫助 react 識別哪些內容被更改、添加或者刪除。
### key 的唯一性
在相鄰的元素間,key 值必須是唯一的,如果出現了相同的 key,同樣會拋出一個 Warning,告訴相鄰組件間有重復的 key 值。并且只會渲染第一個重復 key 值中的元素,因為 react 會認為后續擁有相同 key 的都是同一個組件。
### key 值不可讀
### 反模式
react默認會在數組組件加上index值作為key,如果在該數組末尾push元素,react 經過 diff 后就會發現前面的元素都沒有變化,就會只插入一個新的組件,但是如果在數組前unshift元素,導致之前每個都發生變化,就會重新渲染所有組件,影響性能。所以需要給每個元素加上唯一穩定的key值。
- Houser的個人Wiki
- Javascript
- 語言基礎
- 變量
- 操作符整理
- new
- Ajax
- 事件
- 遍歷
- 字符串轉數字方法
- 原型鏈
- apply/call/bind
- 異步編程
- 模塊化
- 繼承的方式
- 對象的創建方式
- 內存泄漏
- js延遲加載
- 數據類型
- typeof
- 垃圾回收
- 作用域
- 閉包
- this
- es6
- 代碼片段
- 對象拷貝
- Node.js
- 模塊
- 庫&框架
- Jquery
- 優點
- 組件庫
- React
- React原理
- Key的作用
- JSX
- Redux
- Mobx
- 生命周期
- Typescript
- HTML&CSS
- viewport meta
- websocket
- webwork
- web GL
- html全局屬性
- iframe
- 頁面間通訊
- SVG
- 盒模型
- 輸入url到顯示的過程
- BFC(塊格式化上下文)
- 動畫
- CSS 秘密花園
- 前端
- webpack
- 后端
- nginx
- springboot
- 網絡
- 跨域
- 網絡攻擊
- TCP
- Https
- Http狀態碼
- 緩存策略
- Http2
- 數據結構&算法
- 常用數據結構
- 開發&編碼
- Git
- 分支策略
- 基本操作
- VSCode
- 工具
- App開發
- ReactNative
- 項目&業務
- Docker
- 協作工具
- 前端性能優化
- 登錄授權
- 軟件工程
- 漸進增強和優雅降級
- 計算機基礎
- 設計模式
- 單例模式
- 工廠模式
- 發布訂閱模式
- 適配器模式
- 代理模式
- 外觀模式
- 命令模式
- 橋接模式
- 模板模式
- 職責鏈模式
- 正則