近日，在华为全联接大会（HUAWEI CONNECT 2023）“开源创新，共筑智能世界”论坛上，更快、更简单、更智能的新一代响应式前端框架openInula（Inula发音：[ˈɪnjʊlə]）正式开源发布，为国内前端生态提供底层技术支撑，共建国内前端繁荣生态，推动前端领域技术持续进步。
官网
什么是openInula
openInula 是一款用于构建用户界面的 JavaScript 库，提供响应式 API 帮助开发者简单高效构建 web 页面，比传统虚拟 DOM 方式渲染效率提升30%以上！同时 openInula 提供与 React 保持一致的 API，并且提供5大常用功能丰富的核心组件：状态管理器、路由、国际化、请求组件、应用脚手架，以便开发者高效、高质量的构筑基于 openInula 的前端产品。
特性
-
响应式 API
openInula提供响应式API，相比传统虚拟DOM方式，提升渲染效率30%以上。
-
兼容React API
完全兼容React API，支持React应用无缝切换至openInula。
-
核心组件
包含6大常用功能组件，帮助开发者高效构筑基于openInula的前端产品。
上手试玩
传统 Hook API
传统 Hook API 在状态改变时重新运行组件，通过基于虚拟DOM的DIFF算法更新界面。
计时: n 组件渲染次数:n
import { useRef, useState } from 'openinula';
let interval;
function HooksComponent() {
const renderCount = ++useRef(0).current;
const [count, setCount] = useState(0);
if (!interval) {
interval = setInterval(() => {
setCount(c => c + 1);
}, 1000);
}
return (
<div>
<div>计时: {count}</div>
<div>组件渲染次数:{renderCount}</div>
</div>
);
}
响应式 API
响应式 API 避免重复运行组件，无需对比虚拟DOM树，可精准更新DOM，大幅提升网页性能。
计时: n 组件渲染次数: 1
import { useRef, useReactive, useComputed } from 'openinula';
function ReactiveComponent() {
const renderCount = ++useRef(0).current;
const data = useReactive({ count: 0 });
const countText = useComputed(() => {
return `计时: ${data.count.get()}`;
});
setInterval(() => {
data.count.set(c => c + 1);
}, 1000);
return (
<div>
<div>{countText}</div>
<div>组件渲染次数:{renderCount}</div>
</div>
);
}
生态
状态管理器/[Inula-X](Inula-X | openInula文档)
Inula-X是openInula默认提供的状态管理器，无需额外引入三方库，就可以简单实现跨组件/页面共享状态。
路由/[Inula-router](Inula-router | openInula文档)
Inula-router为openInula提供前端路由的能力，是构建大型应用必要组件。
请求/[Inula-request](Inula-request | openInula文档)
Inula-request涵盖常见的网络请求方式，并提供动态轮询钩子函数给用户更便捷的定制化请求体验。
国际化/[Inula-intl](Inula-intl | openInula文档)
Inula-intl提供了国际化功能，涵盖了基本的国际化组件和钩子函数，便于用户在构建国际化能力时方便操作。
脚手架/Inula-create
Inula-create是一套使用openInula为前端开发框架的脚手架工具。它预置了一系列项目模板，允许开发者通过命令行按需一键生成可运行的项目代码。
调试工具/Inula-dev-tools
Inula-dev-tools是一个为openInula开发者提供的强大工具集，能够方便地查看和编辑组件树、管理应用状态以及进行性能分析，极大提高了开发效率和诊断问题的便捷性。
