近期，众多企业纷纷推出自家的跨平台框架。腾讯公司刚刚宣布，计划在四月开源基于 Kotlin 的跨平台框架“Kuikly”。紧接着，字节跳动也开源了他们的跨平台框架“Lynx”。若将 Kuikly 视为一个专注于客户端的全平台框架，那么 Lynx 则是一个完全针对 Web 前端的全方位跨平台解决方案。
为何如此断言？若我们仔细观察官方所提供的示范案例，定能发现众多令人熟知的形象：
import "../index.scss";
引入了来自 "@lynx-js/react" 的 useEffect、useMainThreadRef 和 useRef 三个功能模块。
引入了来自 "@lynx-js/types" 的 MainThread 和 ScrollEvent 类型定义。
引入模块类型 { NodesRef } 来自 "@lynx-js/types"。
引入 LikeImageCard 组件自“../Components/LikeImageCard.jsx”路径。
引入了来自“../Pictures/furnitures/furnituresPictures.jsx”文件中的类型定义{ Picture }。
引入 calculateEstimatedSize 函数，源自于“../utils.jsx”文件。
引入模块 { NiceScrollbar, 定义类型为 NiceScrollbarRef } 来自文件 "./NiceScrollbar.jsx"。
引入 adjustScrollbarMTS 和 NiceScrollbarMTS 两个函数，分别来源于 "./NiceScrollbarMTS.jsx" 文件。
export const Gallery = (参数: 包含 { 图片数据: 图片数组 }) 的对象 => {
从props中提取了{pictureData}这一数据项。
const scrollbarRef = useRef(null);
定义了一个名为 scrollbarMTSRef 的变量，该变量通过 useMainThreadRef 钩子函数创建。(null);
const galleryRef = useRef(null);
定义一个名为onScrollMTS的函数，该函数接受一个滚动事件作为参数。
"main thread";
adjustScrollbarMTS(
event.detail.scrollTop,
event.detail.scrollHeight,
scrollbarMTSRef,
);
};
定义一个名为onScroll的函数，该函数接受一个滚动事件作为参数。
当前scrollbarRef引用对象若存在，则调用其adjustScrollbar方法。
event.detail.scrollTop,
event.detail.scrollHeight,
);
};
useEffect(() => {
galleryRef.current
?.invoke({
method: "autoScroll",
params: {
rate: "60",
start: true,
},
})
.exec();
}, []);
return (
遍历pictureData数组，对每个元素执行如下操作：提取出其中的图片信息（作为Picture类型），并记录其索引位置（即index）。
))}
);
};
export default Gallery;
确实，目前Lynx开源项目所采用的第一个支持框架是建立在React之上的ReactLynx，尽管官方已经明确指出Lynx并非仅限于React，因此未来可能会有VueLynx等其他框架加入支持行列。实际上，作为核心引擎，Lynx并不依赖于任何特定的前端框架，只是目前可用的版本中，ReactLynx是唯一的选择。
目前，开源版本对Android、iOS和Web平台提供支持；同时，Lynx官方透露，其内部已实现对鸿蒙平台的兼容；然而，受限于时间因素，这一功能尚未对外公开。
至于是否支持小程序，这个从设计上看其实应该并不会太困难。
此外，Lynx 还具备CSS兼容性强的特性，它不仅原生支持CSS动画与过渡效果，还涵盖了CSS选择器的应用，以及诸如渐变、裁剪和遮罩等先进的CSS视觉功能，从而让开发者得以在Web开发中继续运用标记语言和CSS。
Lynx 还指出，用户在将界面从 Web 转移至 Lynx 后，普遍可以体验到启动时间的显著减少，缩短幅度在 2 到 4 倍之间。此外，与同类技术相比，Lynx 在 iOS 平台上表现相当出色，而在安卓平台上更是持续保持领先地位。
性能主要体现在自己特有的排版引擎、线程模型和更新机制。
在实施过程中，源代码中的标识将在运行阶段被Lynx引擎解读，并转化为用于显示的元素，这些嵌套的元素进而构成一棵树状结构，以此构建出结构复杂的用户界面。
Lynx Element 具备与平台无关的统一抽象特性，这种特性使得 Lynx 引擎能够将其渲染成对应原生平台的 UI 控件。例如，在 iOS 和 Android 系统中，它表现为 Native View，而在 Web 环境中，则呈现为 HTML 元素，这其中包括了 custom_elements。从目前的演示应用中，我们同样能够观察到这一特性。
到了这里，您或许会心生疑问，这不就是react-native吗？其实存在一些差异：
实际上，Lynx官方并未对此保持沉默，他们坦诚地承认，Lynx项目借鉴了react-native和Flutter的部分优势功能。从这个角度来看，Lynx展现出了其真诚的一面。
React Native自不必说，例如JSI等概念在项目中均有体现，同时，Flutter中的buildroot和Runner等元素同样可在项目中发现，此外，还包括Flutter的消息循环等基于事件驱动的线程编程模式。
Lynx的虚拟线程理念与Lynx所管理的“执行线程”相对应，其作用在于确保任务的有序执行。值得注意的是，虚拟线程与物理线程之间可能并不存在一一对应的关系。这一点与Flutter中的任务运行器概念相似，它允许将任务提交执行，但并不关注线程的具体模型。
Lynx的显著特性之一便是其“双线程架构”，在执行JavaScript代码时，该代码会分别在“主线程”与“后台线程”上并行运行，而且这两个线程还分别采用了不同的JavaScript引擎来作为它们各自的运行环境。
此代码片段在组件渲染过程中，你可能会在控制台观察到“Hello”信息被输出两次，这是由于该代码在两个并行执行的线程中运行所致。
定义一个名为HelloComponent的组件，其构造函数为箭头函数形式。
console.log('Hello'); 该行信息将被输出两次。
return Hello;
};
在 JavaScript 运行期间，主线程采用了 Lynx 团队官方维护的 PrimJS 引擎，该引擎基于 QuickJS 构建，具有轻量级和高性能的特点，从而为主线程保证了优异的运行效率。
而 Lynx 的后台线程：
PrimJS 不仅具备高效能的FFI功能，能以较低成本将Lynx对象封装成JS对象供FFI调用者使用，其性能相较于传统FFI显著提升。然而，此类JS对象并非Object Model，Lynx引擎无法为其绑定setter和getter方法，仅能通过FFI将其作为参数传入，从而实现类似的功能。
此外，Lynx采用的布局引擎被称作starlight，该引擎独立运作，能够运用多种布局策略，诸如flex、linear、grid等，并且它还提供了自定义度量与布局的能力，从而使用户能够更灵活地拓展其功能。
在 Lynx 的内部架构中，LynxView 扮演的角色与系统自带的 WebView 相似，其主要功能是负责加载并渲染相应的 Bundle 文件。具体来说，LynxView 对应的是 Page，而 Page 则是 Lynx 应用程序的根元素。
用户可以为LynxView指定多种尺寸限制，这相当于为Page设定尺寸限制；随后，Lynx排版引擎将依据这些限制来推算Page节点及其所有子节点的尺寸与位置信息。
是页面的根节点，一个页面上只能有一个
。你也可以不在页面最外层显式写
，前端框架会默认生成根节点。
最终，在 Lynx 的具体实现方面，若要扩展至更多平台，操作并不繁杂；官方亦已明确指出，Lynx 并非适宜从头打造全新应用之选，建议将 Lynx（引擎）融入现有的原生移动或 Web 应用中，借助 Lynx 视图来引入 Lynx 应用，因此 Lynx 应被视为一个对混合开发持开放态度的框架。
那么，对于你来说，Lynx 会是你跨平台开发的选择之一吗？
本网站每日更新互联网创业教程，一年会员只需98，全站资源免费下载点击查看会员权益
