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