??想了解更多內(nèi)容，請(qǐng)?jiān)L問：??

??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??

??https://ost.51cto.com??

前言

本文主要是對(duì)于鴻蒙開發(fā)文檔 ETS 開發(fā)中的 UI狀態(tài)管理部分進(jìn)行解讀和簡(jiǎn)單的實(shí)踐，方便更快的切入開發(fā)工作，構(gòu)建應(yīng)用，對(duì)應(yīng)文檔鏈接：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ts-ui-state-mgmt-concepts-0000001169868220。

鴻蒙狀態(tài)管理簡(jiǎn)介

首先引用開發(fā)文檔中的圖片，圖片中已經(jīng)基本可以看出整個(gè)應(yīng)用中的數(shù)據(jù)流動(dòng)，非常全面。

華為鴻蒙開發(fā)文檔對(duì)于應(yīng)用中狀態(tài)的管理提供了豐富且全面的接口(僅提供通俗理解，具體定義見文檔)：

• @State：用于定義應(yīng)用管理的狀態(tài),更像是React16.8之后的useState，方便代碼根據(jù)業(yè)務(wù)劃分邏輯，狀態(tài)定義僅支持class、number、boolean、string 及其組成的數(shù)組，并不允許object和any。
• @Props：單項(xiàng)數(shù)據(jù)流，父組件傳遞子組件，直接使用this.屬性名向下傳遞數(shù)據(jù)，子組件使用此修飾器接收，推薦用于只渲染的數(shù)據(jù)用此定義。
• @Link：雙向數(shù)據(jù)流，解決了vue中**emit**函數(shù)的功能，父組件用emit??函數(shù)的功能，父組件用向下傳遞數(shù)據(jù)，子組件使用此修飾器接收，推薦需要在子組件中修改父組件狀態(tài)的情況(即為類似于在vue中需要使用$emit)下使用。
• @Consume和**@Provide**： 其中provide是生產(chǎn)者，consume是消費(fèi)者，寫過react的開發(fā)者應(yīng)該對(duì)此很熟悉，類似于react中的context上下文，這一對(duì)修飾器主要實(shí)現(xiàn)的是上層組件跨多層傳值給下層組件，并實(shí)現(xiàn)雙向綁定數(shù)據(jù)。
• @Observed和**@ObjectLink**：其中@Observed用于修飾類，@ObjectLink用于在子組件中修飾已經(jīng)被@Observed修飾的類對(duì)應(yīng)的狀態(tài)(具體用法見下文)，這一對(duì)修飾器主要解決的問題是，如果定義了一個(gè)包含多個(gè)對(duì)象(類)的數(shù)組，其中對(duì)象的屬性發(fā)生變化，能夠被應(yīng)用監(jiān)測(cè)到并更新視圖。
• @Watch：在某一可被應(yīng)用監(jiān)測(cè)的狀態(tài)發(fā)生修改的時(shí)候，執(zhí)行某個(gè)額外的動(dòng)作。
• AppStorage：

1. 應(yīng)用程序中的單例對(duì)象，由UI框架在應(yīng)用程序啟動(dòng)時(shí)創(chuàng)建，在應(yīng)用程序退出時(shí)銷毀，為應(yīng)用程序范圍內(nèi)的可變狀態(tài)屬性提供中央存儲(chǔ)，簡(jiǎn)單來說就類似于vuex/redux。
2. 上述幾個(gè)狀態(tài)管理的修飾器，更多的是在同一個(gè)page中去使用，根據(jù)業(yè)務(wù)/頁面邏輯劃分組件，實(shí)現(xiàn)狀態(tài)管理，父子組件傳值，跨組件傳值等。
3. 而AppStorage是在多頁面(page文件夾下有多個(gè)@Enter定義頁面)應(yīng)用程序中用于跨頁面共享數(shù)據(jù)。
4. 建議AppStorage的使用在有@Enter的組件中使用，其中的數(shù)據(jù)在組件樹中從頂部注入，對(duì)子組件來說只是一個(gè)父組件傳遞過來的狀態(tài)，保證子組件的職能單一，輸入輸出穩(wěn)定，與外部數(shù)據(jù)解耦，保證復(fù)用性。

夢(mèng)開始的地方(Typescript而非anyscript)

本文主要是對(duì)于復(fù)雜數(shù)據(jù)類型class的使用解讀，對(duì)于number/boolean/string暫不做解讀，請(qǐng)自行嘗試。

一切都是從class開始的：@State定義中明確表示只能class、number、boolean、string 及其組成的數(shù)組，并不允許object和any，所以對(duì)于復(fù)雜數(shù)據(jù)類型的定義就需要用到class，如下圖：

定義接口：

使用接口定義復(fù)雜數(shù)據(jù)(此處例子可以看出，用**new Month( )或者直接{ }**都是可以的)。

這里引用了官方文檔https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ts-rending-control-syntax-foreach-0000001149978669中的例子，根據(jù)本文檔中的例子可以看出，使用class可以定義復(fù)雜數(shù)據(jù)類型，并且其中Month8的屬性在任何地方改變都可以被observe到，calendar中使用數(shù)組方法改變數(shù)組也能被observe到，并且觸發(fā)重渲染。

非常不推薦使用**any[ ]**的方式來定義復(fù)雜數(shù)據(jù)，這樣定義的數(shù)據(jù)不會(huì)被應(yīng)用observe到，數(shù)組發(fā)生改變，不會(huì)引發(fā)視圖更新!

使用class定義的數(shù)據(jù)可以使用@Props和@Link向下傳遞數(shù)據(jù)，如下圖，在second組件中修改calendar是生效的。

• 將class定義的數(shù)據(jù)傳遞給子組件。

• 子組件雙向綁定改變狀態(tài)!

跨組件傳值(@Consume和@Provide)

類似于react中的context上下文實(shí)現(xiàn)跨組件傳值，上層組件的狀態(tài)可以直接傳給最下層組件，非常好用。

我們已經(jīng)有了@Props和@Link解決了簡(jiǎn)單的父子組件傳值，文檔同樣提供了跨組件傳值的方法，@Provide可以直接替換掉@State定義狀態(tài)，@consume可以在需要接收的子組件中拿到傳遞下來的狀態(tài)。

定義狀態(tài)：

使用并渲染，并嘗試改變,(其實(shí)傳給下一層還是下下層使用和效果上沒啥區(qū)別)。

當(dāng)然傳給第三層也可以看一下效果：

渲染結(jié)果：

在子組件中修改數(shù)組。

在子組件中修改對(duì)象中的屬性。

在子組件中修改數(shù)組中的對(duì)象的屬性(此方法失敗，狀態(tài)改變了，但是并沒有渲染，這是有問題的)，正確方法見下文。

神奇的@Observed和@ObjectLink

@Observed是用來修飾類的，能夠幫忙監(jiān)測(cè)多層數(shù)據(jù)中的數(shù)據(jù)變化，官方文檔中已經(jīng)給出了具體的使用方法，而且非常靈活，這一對(duì)修飾器主要解決的正是上述遺留問題，如何修改數(shù)組中的對(duì)象中的屬性，并能夠自動(dòng)觸發(fā)重渲染。

使用@Observed：

使用@ObjectLink，這里主要是驗(yàn)證用provider/link傳遞到下層的數(shù)據(jù)能否被修改。

看效果：

從上述案例可以看出：使用@Observed和@ObjectLink可以實(shí)現(xiàn)對(duì)比較復(fù)雜的數(shù)據(jù)最內(nèi)部數(shù)據(jù)的修改，使用起來相對(duì)靈活。

總結(jié)

本文主要對(duì)于使用class定義復(fù)雜數(shù)據(jù)，以及跨組件傳值、修改數(shù)據(jù)根據(jù)官方文檔進(jìn)行簡(jiǎn)單解析，對(duì)于狀態(tài)管理還包括AppStorage、持久化數(shù)據(jù)以及環(huán)境變量的驗(yàn)證，將會(huì)在下一篇文章中做出詳解，希望本篇文章能夠在一定程度上幫助初學(xué)ets的開發(fā)者快速掌握其開發(fā)方式。