大家好,我是「前端实验室」爱分享的了不起~
在程序员界,vue、react的大名相信大家都听过,今天给大家介绍一个新的前端框架,由遥遥领先的华为开源的——openInula
openInulaopenInula 是一款用于构建用户界面的 JavaScript 库,提供响应式 API 帮助开发者简单高效构建 web 页面,比传统虚拟 DOM 方式渲染效率提升30%以上!同时把大语言模型、前端 AI 赋能结合在一起,主打一个高性能、全场景、智能化。
特点响应式API:相比传统虚拟DOM方式,提升渲染效率30%以上。兼容React API:完全兼容React API,支持React应用无缝切换至openInula。大模型驱动: 由大模型驱动的智能框架核心组件:官方提供提供两套开发 API、六款常用组件,助力您高质高效开发。5大常用功能:状态管理器、路由、国际化、请求组件、应用脚手架安装使用方式一:npm安装通过命令行安装
代码语言:javascript代码运行次数:0运行复制npm install openinula
方式二:脚手架安装使用openInula脚手架安装
代码语言:javascript代码运行次数:0运行复制npx create-inula <项目名>
安装过程中可以选择 webpack、 vite两种打包方式
开发与react一样 使用 JSX语法进行开发
代码语言:javascript代码运行次数:0运行复制import Inula, { render, Component } from 'openinula';
// 示例组件 - 按钮组件
class Button extends Component {
render() {
const { text, onClick } = this.props;
return (
);
}
}
// 示例组件 - 表单组件
class Form extends Component {
handleSubmit = (event) => {
event.preventDefault();
// 处理表单提交逻辑
}
render() {
return (
);
};
}
// 示例组件 - 页面组件
class Page extends Component {
render() {
return (
示例页面
);
};
}
// 渲染页面
render(
官方组件同时openlnula提供了一系列的组件
状态管理器:Inula-X是openInula默认提供的状态管理器,无需额外引入三方库,就可以简单实现跨组件/页面共享状态。路由:Inula-router为openInula提供前端路由的能力,是构建大型应用必要组件。请求:Inula-request 涵盖常见的网络请求方式,并提供动态轮询钩子函数给用户更便捷的定制化请求体验。国际化:Inula-intl提供了国际化功能,涵盖了基本的国际化组件和钩子函数,便于用户在构建国际化能力时方便操作。脚手架:Inula-create是一套使用openInula为前端开发框架的脚手架工具。它预置了一系列项目模板,允许开发者通过命令行按需一键生成可运行的项目代码。调试工具:Inula-dev-tools是一个为openInula开发者提供的强大工具集,能够方便地查看和编辑组件树、管理应用状态以及进行性能分析,极大提高了开发效率和诊断问题的便捷性。