华为在今年开源了一款类似于 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.28at.com/showinfo-26-84009-0.html体验了一把华为的 OpenInula，谈谈使用感受
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号