ReactLynx 是什么？#

ReactLynx 是 Lynx 的官方 React 框架。它允许你用 React 的心智模型开发 Lynx 原生应用。

和在 Web 上使用 React 一样，使用 ReactLynx 时，你可以使用 JSX 和 React 组件来构建你的 UI。ReactLynx 会将你的 React 代码转换为对 Lynx Engine 命令式 API 的调用，从而实现原生 UI 的渲染。

主要功能#

ReactLynx 本身是“地道”的 React，但也开创性地引入了类似“双线程 React”、“JSX 常量折叠”等优化，

• “地道”React：ReactLynx 是 React 的一个实现，本质上基于 Preact，因此和 React 有基本一致的 API 和行为，此一致性使得很多生态建设可以复用。
• 双线程编程思想：ReactLynx 遵循 React 的编程模型，但通过利用 Lynx 提供的双线程运行时，结合自身的编程范式（或规则）来实现更好的性能和用户体验。
  • Off-main-thread Reconciliation：ReactLynx 通过将部分 Reconciliation 逻辑放到后台线程，以减少主线程的计算量，提升性能。
  • 双线程架构下的生命周期：由于 Lynx 的双线程架构特点，ReactLynx 的生命周期与传统 React 在调用时机上存在一些差异。
• JSX 常量折叠：ReactLynx 会在编译时折叠 JSX 常量，以减少运行时的计算。

如果你是 React Web 开发者#

需修改包名#

由于和 react 有基本一致的 API，你可以直接将 react 替换为 @lynx-js/react，然后继续使用你熟悉的 React API。

- import { useState } from 'react';
+ import { useState } from '@lynx-js/react';

有关 ReactLynx 实现的 API 的完整列表，请参阅 @lynx-js/react API 文档。

不同的元件集合#

不同于 Web 上的 div、span 等元素，Lynx 提供了一套元素标签集合，例如 view、text、image 等（完整列表）。 在 ReactLynx 中，你可以组合使用这些元素标签来构建你的原生应用。

- <div className="..." />
+ <view className="..." />

虽然元件的命名类似于 React Native，但是 ReactLynx 有一些不同之处：

- import {View, Text, Image} from 'react-native';
- <View style={{...}} />
+ <view style={{...}} />

不同的事件命名#

基于 Lynx，ReactLynx 使用了一套不同于 Web 的事件命名（前往事件了解更多）。

- <button onTouchStart={...} />
+ <view bindtouchstart={...} catchtouchstart={...}/>

没有 document 和 window#

Lynx 尚未提供 document 和 window 对象，因此 ReactLynx 也不支持这两个对象。

这意味着你无法使用任何依赖于 document 或 window 的库。

一般来说，你可以通过以下两种方式来解决这个差异：

• 大多数情况下，Lynx 以不同的 API 提供某个功能，例如你可以使用 lynx 对象下的 API，以 lynx.reload 替代 window.location.reload()。
• 偶尔 Lynx 并未提供某个功能，你可以使用 Lynx 的 NativeModules 和自定义元件来扩展 Lynx 的能力。

下一步#

进一步学习 ReactLynx#

学习 Lynx 基础#

磨刀不误砍柴工。