對標蘋果的靈動島 華為帶來實況窗功能
繼蘋果的靈動島之后，華為也在今天正式推出了“實況窗”功能。據今天鴻蒙OS 4.0的現場演示顯示，華為的實況窗可以更高效的展現出實時通知，比如鎖屏上就能看到外賣、打車、銀行
華為在今年開源了一款類似于 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
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號