華為在今年開源了一款類似于 React 的前端框架, openInula。他的宣傳語上面,把 openInula 與大語言模型、前端 AI 賦能結(jié)合在一起,主打一個高性能、全場景、智能化。
果然遙遙領(lǐng)先在宣傳語的設(shè)計上還是有點水平的。然后我就去了解了一下這個框架。
我想先試一下能不能真的做到無縫切換。如果真的能做到的話,我們就可以非常方便的使用 React 的生態(tài)直接搞 openinula 項目了。
這樣來看的話,確實能夠快速將 React 的生態(tài)遷移到 openInula 上面來。但是由于我大多數(shù)組件都是基于 useState 來編寫的,因此,想要使用 useReactive 的話,只能全部替換掉。
- const [display, setDisplay] = useState(false)+ const display = useReactive({ show: false })
替換掉之后功能基本上沒什么毛病。但是在最佳實踐的摸索上還存在一些疑問。比如當(dāng)我想要將一個響應(yīng)式數(shù)據(jù)傳遞給子組件時,下面哪種方式更好一些呢?我還沒有一個定論,還需要進一步的體會和摸索。
<Dialog show={data.open.get()}}>hello</Dialog>
<Dialog show={data.open}>hello</Dialog>
第一種方式會更加契合解耦方面的思考,但書寫稍微繁瑣了一點,第二種方式呢,會對子組件邏輯造成更大的干擾。想到這里,突然之間明白了在 arkUI 里的狀態(tài)設(shè)計,如果從父組件里傳遞一個響應(yīng)式數(shù)據(jù)給子組件時,子組件必須使用 @Prop
裝飾來接收這個狀態(tài)。
這樣在子組件中,我們就能夠清晰的知道這個數(shù)據(jù)類型的特性到底是怎么回事了。從而降低了維護成本。這樣一想的話,arkUI 在組件狀態(tài)的設(shè)計上,確實有點東西。
@Componentstruct ChildComponent { @Prop private count: number build() { Text(`Child Count: ${this.count}}`) }}
當(dāng)我試圖使用解構(gòu)的方式來拆解 useReactive 時,居然不會失去響應(yīng)性。
const {count, open} = useReactive({ count: 0, open: false });const countText = useComputed(() => { return `計時: ${count.get()}`;});setInterval(() => { count.set((c) => c + 1);}, 1000);
這可就解決了大問題了!當(dāng)數(shù)據(jù)變得龐大,它的繁瑣的程度將會大大的降低。所以在使用上會比 solid.js 方便許多。
我了解到的 Vue3 和 Solid 實際上在這一點上都做得不是很好,解構(gòu)之后,Vue3 的狀態(tài)會失去響應(yīng)性。
// 直接使用 count 無法具備響應(yīng)性const {count} = reactive({ count: 0 })
Solid 的 API 設(shè)計,又無法做到把顆粒度細(xì)分到每個子屬性
const [count, setCount] = createSignal({n: 1});function clickHandler() { setCount({ n: count().n + 1 })}
所以,當(dāng)需要更細(xì)的屬性時,Vue3 可能會更多的使用 ref 來做,而 solid 則與 useState 一樣,單獨聲明這個屬性。
這么橫向一對比,openInula 的響應(yīng)式 API 就有點厲害了。在設(shè)計上充分體現(xiàn)了自己的獨創(chuàng)性和先進性,如果其他方面不出什么問題的話,應(yīng)該會受到一大批程序員的喜愛。
不愧是遙遙領(lǐng)先。
openInula 的使用體驗與 React 幾乎一樣。與 React 不同的是,他增加了一個響應(yīng)式 API。因此能夠增加一些不同的開發(fā)體驗。也正是由于這個響應(yīng)式 API 的存在,讓 openInula 在 API 設(shè)計上有了自己的獨創(chuàng)性。
與其他響應(yīng)式框架相比,我更喜歡 openInula 的 API 設(shè)計,在開發(fā)體驗與維護體驗的綜合考慮上目前是做得最好的,雖然為了考慮維護體驗犧牲了一些開發(fā)體驗,不過我完全能接受。由于接觸了幾款華為的框架,可以感受到,他們在設(shè)計 API 時,會把可維護性的重要性看得比開發(fā)體驗更高。
當(dāng)然,svelte 我還沒有怎么了解過,不過有聽到坊間傳言說是模仿 Vue3 的,那估計設(shè)計模式跟 Vue3 差別不算大。
var { count, a, b, c } = useReactive({ count: 1, a: 1, b: 1, c: 1})count.set((v) => v + 1)count.get()a.set((v) => v + 1)a.get()b.set((v) => v + 1)b.get()c.set((v) => v + 1)c.get()
本文鏈接:http://www.tebozhan.com/showinfo-26-84009-0.html體驗了一把華為的 OpenInula,談?wù)勈褂酶惺?/p>
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com