OpenHarmony—淺析ETS開發(fā)狀態(tài)管理

作者：楊保斌 2022-03-07 15:22:16

本文主要對于使用class定義復(fù)雜數(shù)據(jù)，以及跨組件傳值、修改數(shù)據(jù)根據(jù)官方文檔進行簡單解析。

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

前言

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

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

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

華為鴻蒙開發(fā)文檔對于應(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：單項數(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是消費者，寫過react的開發(fā)者應(yīng)該對此很熟悉，類似于react中的context上下文，這一對修飾器主要實現(xiàn)的是上層組件跨多層傳值給下層組件，并實現(xiàn)雙向綁定數(shù)據(jù)。
@Observed和**@ObjectLink**：其中@Observed用于修飾類，@ObjectLink用于在子組件中修飾已經(jīng)被@Observed修飾的類對應(yīng)的狀態(tài)(具體用法見下文)，這一對修飾器主要解決的問題是，如果定義了一個包含多個對象(類)的數(shù)組，其中對象的屬性發(fā)生變化，能夠被應(yīng)用監(jiān)測到并更新視圖。
@Watch：在某一可被應(yīng)用監(jiān)測的狀態(tài)發(fā)生修改的時候，執(zhí)行某個額外的動作。
AppStorage：

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

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

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

一切都是從class開始的：@State定義中明確表示只能class、number、boolean、string 及其組成的數(shù)組，并不允許object和any，所以對于復(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ù)不會被應(yīng)用observe到，數(shù)組發(fā)生改變，不會引發(fā)視圖更新!

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

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

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

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

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

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

定義狀態(tài)：

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

當然傳給第三層也可以看一下效果：

渲染結(jié)果：

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

在子組件中修改對象中的屬性。

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

神奇的@Observed和@ObjectLink

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

使用@Observed：

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

看效果：

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

總結(jié)

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

責任編輯：jianghua 來源：鴻蒙社區(qū)