2025 年 11 月 10 日

#Lynx 3.5: 主线程脚本，React 编译器，HarmonyOS 能力对齐

刘继龙

性能主管 @ Lynx

黄玄

架构师 @ Lynx

Lynx 团队

lynxjs.org

Lynx 3.5 已经正式发布!

延续稳定的双月发布节奏，Lynx 3.5 带来了多项重要更新：React 编译器的实验性支持；主线程脚本支持了 stopPropagation 事件冒泡拦截、首帧即可交互、跨线程通信等一系列增强；进一步对齐了 HarmonyOS 平台能力，并新增了 <pointer-events> CSS 属性等功能。

让我们一起来看看有哪些新特性！

#React 编译器 Experimental

React Compiler 可以在编译期对组件进行优化，从而无需手动使用 useMemo、useCallback 和 memo。你现在可以在 ReactLynx 中使用 React Compiler 来优化你的应用性能。

查看如何在 ReactLynx 中开启 React Compiler。

#主线程脚本

#支持用 stopPropagation 阻止事件冒泡 Web 友好

当一个事件被触发后，它会沿着响应链进行传播。此前，虽然 Lynx 已经支持使用 catch 类型的事件处理器属性静态拦截事件冒泡，但这种方式仍缺乏 Web 一样的表达力。得益于主线程编程能力，Lynx 3.5 在主线程脚本中支持了和 Web 一致的 event.stopPropagation()，实现运行时的事件冒泡拦截。

function handleInnerTap(e: MainThread.TouchEvent) {
  'main thread';
  e.stopPropagation(); // ✋ stop event bubbling
  flash('inner');
}

eventsrc/event_stop_propagation/index.tsx

预览

#首帧即可进行主线程交互

此前，主线程事件需要等待后台线程完成“激活”（Hydration）后才能响应，导致页面在首帧可见后，仍存在一段不可交互的延迟，类似服务端渲染中的常见的恐怖谷效应。

为了消除这段延迟，我们优化了激活流程，使得主线程事件可以在首帧渲染后立刻响应，并在后台线程激活后正确接管主线程中的状态并重放 runOnBackground，在保证线程间的正确同步的同时，实现首帧可见即可交互。

function App() {
  const gotoUser = () => {
    'main thread';
    // go to second page
  };
  return (
    <view main-thread:bindtap={gotoUser}>
      <text>goto user</text>
    </view>
  );
}

#跨线程函数调用支持返回数据

Lynx 提供了 runOnMainThread 和 runOnBackground 两个 API 用于跨线程函数调用。在 Lynx 3.5 中，这两个 API 现在支持异步返回值，让跨线程通信更加灵活和直观。

import { runOnMainThread, useMainThreadRef } from '@lynx-js/react';

function App() {
  const countRef = useMainThreadRef(0);

  const addCount = (value) => {
    'main thread';
    countRef.current += value;
    return countRef.current;
  };

  const increaseMainThreadCount = async () => {
    // await for return value from main thread
    const result = await runOnMainThread(addCount)(1);
    console.log(result);
  };
}

#<list> 元件内置更新动画

为了提供更生动、自然的列表交互体验，<list> 元件现已内置默认的更新动画。当列表项被插入、删除或更新时，将自动触发平滑的过渡效果，无需开发者编写额外代码。

<list update-animation="default"></list>

#CSS 属性 pointer-events Web 友好

Lynx 3.5 版本新增 CSS 属性 pointer-events 来指定元件是否能够响应触摸事件。

pointer-events: auto;  // 默认值，此时，节点可以响应触摸事件。
pointer-events: none;  // 节点不能响应触摸事件

css-apisrc/pointer-events/App.tsx

预览

#HarmonyOS 功能补齐

#Fetch API

Lynx 提供了与 Web 标准兼容的 Fetch API，用法与 Web 平台保持一致。Lynx 3.5 将 Fetch API 的支持扩展到了 HarmonyOS 平台，让跨平台开发更加便捷。

#accessibilityAnnounce

Lynx 3.5 在 HarmonyOS 平台补齐了 accessibilityAnnounce() 方法，与 Android 和 iOS 平台保持一致。该方法可调用屏幕阅读器朗读指定文本，帮助视觉障碍用户感知界面状态变化或操作结果。

lynx.accessibilityAnnounce(
  {
    content: 'hello lynx',
  },
  (res) => {
    console.log('result: ' + JSON.stringify(res));
  },
);

#requestResourcePrefetch

requestResourcePrefetch API 现已支持 HarmonyOS 平台，与 Android 和 iOS 保持一致。该 API 允许开发者主动预加载 CDN 资源（目前支持 image、video 和 audio），以提升资源加载性能。

lynx.requestResourcePrefetch?.(
  {
    data: [
      {
        uri: 'https://demo.org/test.jpg',
        type: 'image',
        params: { priority: 'high', cacheTarget: 'disk' },
      },
    ],
  },
  (res) => {
    console.log(
      'prefetch status of each resource:',
      JSON.stringify(res.details),
    );
  },
);

#升级指南

参照官网接入 Lynx 到现有应用更新 Lynx 依赖版本，完成 Lynx 3.5 版本升级。

#桌面端支持预告

我们原本计划在 Lynx 3.5 版本正式引入桌面端支持，最初只是打算开放自渲染管线和底层集成 API。经过讨论，我们决定更进一步，开源整套桌面端技术体系。因此发布时间将顺延至 2026 年初，敬请期待。

如果你想抢先了解 Lynx 桌面端的整体设计思路，以及我们与 Electron 和 Qt 等主流方案有哪些异同，欢迎观看我们多平台负责人 王之轩 在 Ubuntu Summit 2025 的主题演讲 《Bringing Lynx to Desktop and Beyond》：