：ArrayList，可不會讓UI更新哦)
前言有同學遇到了一個問題他是使用ArrayList來存儲的數(shù)據(jù)在動態(tài)給集合添加數(shù)據(jù)后UI并未更新代碼如下import { ArrayList } from kit.ArkTS; Entry Component struct Index { State numItems: ArrayListstring new ArrayList(); aboutToAppear(): void { this.numItems.add(數(shù)據(jù)一) } build() { Column() { ForEach(this.numItems.convertToArray(), (item: string) { Text(item) .height(30) }) Button(添加數(shù)據(jù)) .onClick(() { this.numItems.add(數(shù)據(jù)二) }) }.width(100%) .alignItems(HorizontalAlign.Center) } }貌似以上的代碼看著沒太大問題ForEach中由于支持的是Array類型便使用convertToArray()方法做了轉(zhuǎn)換但是在點擊添加數(shù)據(jù)按鈕之后UI并沒有按照理想的狀態(tài)去增加數(shù)據(jù)。這就是我們需要了解的一個知識點不要用Android的那一套思維來開發(fā)鴻蒙也許在Android中ArrayList非常常見也常用但是在鴻蒙開發(fā)中牽扯到UI更新卻不能使用ArrayList這一點對于初學者務必牢記。首先我們要知道ArrayList是kit.ArkTS提供的線性容器類并非原生ArrayV1裝飾器下的State裝飾器只能觀測原生 Array的增刪改等操作對于ArrayList的相關的API變化如add()是無法觀測的。目前State可以觀測變化如下表類型可觀測的變化基礎類型number、string 等值變化原生Array整體賦值、push、pop、splice、arr[i] value等class對象僅整體賦值第一層屬性修改不觸發(fā)刷新ArrayList等容器類無法觀測 API 調(diào)用帶來的變化所以如果只是基礎類型的數(shù)組觀測可以直接使用原生的數(shù)組就可以比如State numItems: Arraystring new Array();或者如下State numItems: string[] [];不能在繼續(xù)使用ArrayList。為什么不能觀測ArrayList里的API調(diào)用一句話概括根本原因在于觀測機制Proxy代理與ArrayList的底層實現(xiàn)方式不兼容。狀態(tài)管理的觀測原理鴻蒙狀態(tài)管理框架無論是V1版本下的的State還是V2版本下的Local他們的核心觀測機制是Proxy代理當變量被狀態(tài)裝飾器裝飾時框架會在數(shù)據(jù)對象外層包裹一層代理對象代理會攔截對數(shù)據(jù)的屬性訪問和修改操作從而感知變化并觸發(fā) UI 刷新。我們以原生Array為例它其中的push、pop、splice 等方法操作其實是 JavaScript 引擎層面的屬性如length、索引元素Proxy可以攔截這些操作因此State和Local能觀測到變化。ArrayList 為什么無法被代理攔截ArrayList是kit.ArkTS提供的容器類其關鍵特征是使用靜態(tài)語言C實現(xiàn)這意味著第一數(shù)據(jù)存儲在原生內(nèi)存中ArrayList的內(nèi)部元素存儲在 C 層的連續(xù)內(nèi)存空間中而不是JavaScript 可訪問的對象屬性。Proxy只能攔截 JavaScript 層面的屬性操作無法感知原生內(nèi)存中的數(shù)據(jù)變化第二API 方法是原生綁定ArrayList的add()、remove()、insert()等方法直接調(diào)用 C 實現(xiàn)方法執(zhí)行過程中的數(shù)據(jù)增刪改發(fā)生在原生層面完全繞過了Proxy的攔截能力第三不支持自定義屬性和方法ArrayLis 限制了存儲位置和屬性不支持自定義屬性和方法 這進一步限制了框架對其進行代理包裝的可能性。我們簡單做下對比對比項原生ArrayArrayList實現(xiàn)層面JavaScript 引擎內(nèi)置C 靜態(tài)語言實現(xiàn)數(shù)據(jù)存儲JavaScript 對象屬性索引、length原生內(nèi)存空間API 執(zhí)行JavaScript 層面Proxy 可攔截原生層面Proxy 無法攔截自定義屬性支持不支持Proxy 代理可正常包裝攔截無法有效攔截一句話總結(jié)ArrayList作為 C 靜態(tài)語言實現(xiàn)的容器類其數(shù)據(jù)存儲和 API 調(diào)用均在原生層面完成Proxy 無法介入攔截因此框架感知不到add()、remove() 等調(diào)用帶來的數(shù)據(jù)變化UI 自然不會刷新。以后應當這么做前邊在前言中已經(jīng)訴說了基本類型數(shù)組的觀測這里就不再過多贅述如果在實際的開發(fā)中遇到的不是基本類型的數(shù)組比如對象數(shù)組V1裝飾器下需要結(jié)合Observed/ObjectLink裝飾器來使用。第一步給對象加上Observed裝飾器Observed class TestBean { name?: string constructor(name: string) { this.name name } }第二步視圖抽取子組件Component struct TextView { ObjectLink item: TestBean build() { Text(this.item.name) .height(30) } }第三步改為子組件Entry Component struct Index { State items: TestBean[] [ new TestBean(條目一), new TestBean(條目二), new TestBean(條目三)] build() { Column() { ForEach(this.items, (item: TestBean) { TextView({ item: item }) }) Button(添加數(shù)據(jù)) .onClick(() { this.items.push(new TestBean(條目四)) }) }.width(100%) .alignItems(HorizontalAlign.Center) } }如果是使用的V2裝飾器那對象數(shù)組更新就比較簡單了直接使用ObservedV2即可如果你想繼續(xù)類屬性變化觀測可以給對象中的屬性設置TraceObservedV2和Trace一般配套使用。Entry ComponentV2 struct Index { Local items: TestBean[] [ new TestBean(條目一), new TestBean(條目二), new TestBean(條目三)] build() { Column() { ForEach(this.items, (item: TestBean) { Text(item.name) .height(30) }) Button(添加數(shù)據(jù)) .onClick(() { this.items.push(new TestBean(條目四)) }) }.width(100%) .alignItems(HorizontalAlign.Center) } } ObservedV2 class TestBean { Trace name?: string constructor(name: string) { this.name name } }還推薦使用ArrayList嗎在UI更新操作中是不能使用的但是毫不影響其他非UI的操作。ArrayList 的適用與不適用場景場景是否推薦 ArrayList推薦替代方案頻繁按索引隨機訪問元素推薦—增刪操作頻率較低的有序數(shù)據(jù)管理推薦—UI 狀態(tài)管理State/Local驅(qū)動刷新不推薦原生ArrayT[]需要 API 級觀測 并發(fā)安全不推薦collections.Array makeObserved跨線程傳遞數(shù)據(jù)不支持collections.Array頻繁插入刪除元素不推薦LinkedList兩端頻繁增刪元素不推薦Deque比如純數(shù)據(jù)邏輯層無 UI 綁定、無跨線程需求的情況下且需要頻繁按索引隨機訪問還是很推薦使用的如下代碼所示import { ArrayList } from kit.ArkTS; class DataProcessor { private data: ArrayListstring new ArrayList(); // 頻繁按索引讀取ArrayList 的隨機訪問效率高 getItem(index: number): string { return this.data[index]; } addItem(item: string): void { this.data.add(item); } }相關總結(jié)在實際開發(fā)中大多數(shù)涉及 UI 的場景應優(yōu)先使用原生Array它語法簡潔、狀態(tài)管理兼容性好、ForEach直接支持而ArrayList適合用在純數(shù)據(jù)邏輯層中需要頻繁隨機訪問的場景所以大家一定要區(qū)分開來。拋出一個疑問如果我硬要使用ArrayList那么如何來更新UI呢 鴻蒙開發(fā)：ArrayList，可不會讓UI更新哦
前言有同學遇到了一個問題他是使用ArrayList來存儲的數(shù)據(jù)在動態(tài)給集合添加數(shù)據(jù)后UI并未更新代碼如下import { ArrayList } from kit.ArkTS; Entry Component struct Index { State numItems: ArrayListstring new ArrayList(); aboutToAppear(): void { this.numItems.add(數(shù)據(jù)一) } build() { Column() { ForEach(this.numItems.convertToArray(), (item: string) { Text(item) .height(30) }) Button(添加數(shù)據(jù)) .onClick(() { this.numItems.add(數(shù)據(jù)二) }) }.width(100%) .alignItems(HorizontalAlign.Center) } }貌似以上的代碼看著沒太大問題ForEach中由于支持的是Array類型便使用convertToArray()方法做了轉(zhuǎn)換但是在點擊添加數(shù)據(jù)按鈕之后UI并沒有按照理想的狀態(tài)去增加數(shù)據(jù)。這就是我們需要了解的一個知識點不要用Android的那一套思維來開發(fā)鴻蒙也許在Android中ArrayList非常常見也常用但是在鴻蒙開發(fā)中牽扯到UI更新卻不能使用ArrayList這一點對于初學者務必牢記。首先我們要知道ArrayList是kit.ArkTS提供的線性容器類并非原生ArrayV1裝飾器下的State裝飾器只能觀測原生 Array的增刪改等操作對于ArrayList的相關的API變化如add()是無法觀測的。目前State可以觀測變化如下表類型可觀測的變化基礎類型number、string 等值變化原生Array整體賦值、push、pop、splice、arr[i] value等class對象僅整體賦值第一層屬性修改不觸發(fā)刷新ArrayList等容器類無法觀測 API 調(diào)用帶來的變化所以如果只是基礎類型的數(shù)組觀測可以直接使用原生的數(shù)組就可以比如State numItems: Arraystring new Array();或者如下State numItems: string[] [];不能在繼續(xù)使用ArrayList。為什么不能觀測ArrayList里的API調(diào)用一句話概括根本原因在于觀測機制Proxy代理與ArrayList的底層實現(xiàn)方式不兼容。狀態(tài)管理的觀測原理鴻蒙狀態(tài)管理框架無論是V1版本下的的State還是V2版本下的Local他們的核心觀測機制是Proxy代理當變量被狀態(tài)裝飾器裝飾時框架會在數(shù)據(jù)對象外層包裹一層代理對象代理會攔截對數(shù)據(jù)的屬性訪問和修改操作從而感知變化并觸發(fā) UI 刷新。我們以原生Array為例它其中的push、pop、splice 等方法操作其實是 JavaScript 引擎層面的屬性如length、索引元素Proxy可以攔截這些操作因此State和Local能觀測到變化。ArrayList 為什么無法被代理攔截ArrayList是kit.ArkTS提供的容器類其關鍵特征是使用靜態(tài)語言C實現(xiàn)這意味著第一數(shù)據(jù)存儲在原生內(nèi)存中ArrayList的內(nèi)部元素存儲在 C 層的連續(xù)內(nèi)存空間中而不是JavaScript 可訪問的對象屬性。Proxy只能攔截 JavaScript 層面的屬性操作無法感知原生內(nèi)存中的數(shù)據(jù)變化第二API 方法是原生綁定ArrayList的add()、remove()、insert()等方法直接調(diào)用 C 實現(xiàn)方法執(zhí)行過程中的數(shù)據(jù)增刪改發(fā)生在原生層面完全繞過了Proxy的攔截能力第三不支持自定義屬性和方法ArrayLis 限制了存儲位置和屬性不支持自定義屬性和方法 這進一步限制了框架對其進行代理包裝的可能性。我們簡單做下對比對比項原生ArrayArrayList實現(xiàn)層面JavaScript 引擎內(nèi)置C 靜態(tài)語言實現(xiàn)數(shù)據(jù)存儲JavaScript 對象屬性索引、length原生內(nèi)存空間API 執(zhí)行JavaScript 層面Proxy 可攔截原生層面Proxy 無法攔截自定義屬性支持不支持Proxy 代理可正常包裝攔截無法有效攔截一句話總結(jié)ArrayList作為 C 靜態(tài)語言實現(xiàn)的容器類其數(shù)據(jù)存儲和 API 調(diào)用均在原生層面完成Proxy 無法介入攔截因此框架感知不到add()、remove() 等調(diào)用帶來的數(shù)據(jù)變化UI 自然不會刷新。以后應當這么做前邊在前言中已經(jīng)訴說了基本類型數(shù)組的觀測這里就不再過多贅述如果在實際的開發(fā)中遇到的不是基本類型的數(shù)組比如對象數(shù)組V1裝飾器下需要結(jié)合Observed/ObjectLink裝飾器來使用。第一步給對象加上Observed裝飾器Observed class TestBean { name?: string constructor(name: string) { this.name name } }第二步視圖抽取子組件Component struct TextView { ObjectLink item: TestBean build() { Text(this.item.name) .height(30) } }第三步改為子組件Entry Component struct Index { State items: TestBean[] [ new TestBean(條目一), new TestBean(條目二), new TestBean(條目三)] build() { Column() { ForEach(this.items, (item: TestBean) { TextView({ item: item }) }) Button(添加數(shù)據(jù)) .onClick(() { this.items.push(new TestBean(條目四)) }) }.width(100%) .alignItems(HorizontalAlign.Center) } }如果是使用的V2裝飾器那對象數(shù)組更新就比較簡單了直接使用ObservedV2即可如果你想繼續(xù)類屬性變化觀測可以給對象中的屬性設置TraceObservedV2和Trace一般配套使用。Entry ComponentV2 struct Index { Local items: TestBean[] [ new TestBean(條目一), new TestBean(條目二), new TestBean(條目三)] build() { Column() { ForEach(this.items, (item: TestBean) { Text(item.name) .height(30) }) Button(添加數(shù)據(jù)) .onClick(() { this.items.push(new TestBean(條目四)) }) }.width(100%) .alignItems(HorizontalAlign.Center) } } ObservedV2 class TestBean { Trace name?: string constructor(name: string) { this.name name } }還推薦使用ArrayList嗎在UI更新操作中是不能使用的但是毫不影響其他非UI的操作。ArrayList 的適用與不適用場景場景是否推薦 ArrayList推薦替代方案頻繁按索引隨機訪問元素推薦—增刪操作頻率較低的有序數(shù)據(jù)管理推薦—UI 狀態(tài)管理State/Local驅(qū)動刷新不推薦原生ArrayT[]需要 API 級觀測 并發(fā)安全不推薦collections.Array makeObserved跨線程傳遞數(shù)據(jù)不支持collections.Array頻繁插入刪除元素不推薦LinkedList兩端頻繁增刪元素不推薦Deque比如純數(shù)據(jù)邏輯層無 UI 綁定、無跨線程需求的情況下且需要頻繁按索引隨機訪問還是很推薦使用的如下代碼所示import { ArrayList } from kit.ArkTS; class DataProcessor { private data: ArrayListstring new ArrayList(); // 頻繁按索引讀取ArrayList 的隨機訪問效率高 getItem(index: number): string { return this.data[index]; } addItem(item: string): void { this.data.add(item); } }相關總結(jié)在實際開發(fā)中大多數(shù)涉及 UI 的場景應優(yōu)先使用原生Array它語法簡潔、狀態(tài)管理兼容性好、ForEach直接支持而ArrayList適合用在純數(shù)據(jù)邏輯層中需要頻繁隨機訪問的場景所以大家一定要區(qū)分開來。拋出一個疑問如果我硬要使用ArrayList那么如何來更新UI呢