@lynx-js/react
Welcome to the API reference for @lynx-js/react, the package that provides the ReactLynx framework. For an introduction to ReactLynx, please visit the ReactLynx Guides.
React APIs
ReactLynx is based on the React 17 API. You can expect the React APIs provided by @lynx-js/react to be fully compatible with React 17 or Preact.
Here is an overview of the APIs provided by ReactLynx. These APIs will behave consistently with those described in the official React reference unless otherwise specified. We will also highlight any special considerations for using them on the Lynx platform.
Why is it based on compatibility with React 17?
React officially entered the "concurrent" era starting with React 18. Concurrent React features, represented by APIs such as useTransition and useDeferredValue, have very strict requirements for the scheduling method and concurrency model of the execution environment—including dependencies on or overwriting of browser Web APIs, dependencies on the new architecture of React Native, and more. Lynx has its own characteristics and considerations in architectural evolution, so we chose React 17 as the foundation for ReactLynx, evolving into the Lynx system while retaining the React programming model.
At the same time, we will continue to pay attention to subsequent React advancements, such as React 19 and React Compiler, and attempt to integrate the parts that do not depend on the concurrent architecture into the ReactLynx system.
Documents
| Document | Description |
|---|---|
| built-in-macros | - |
| directives | - |
Classes
| Class | Description |
|---|---|
| Component | - |
| MainThreadRef | A MainThreadRef is a ref that can only be accessed on the main thread. It is used to preserve states between main thread function calls. The data saved in current property of the MainThreadRef can be read and written in multiple main thread functions. |
| PureComponent | - |
Interfaces
| Interface | Description |
|---|---|
| DataProcessorDefinition | Definition of DataProcessor(s) |
| InitData | The interface you can extends so that the defaultDataProcessor returning value can be customized |
| InitDataRaw | The interface you can extends so that the defaultDataProcessor parameter can be customized |
| Lynx | APIs under lynx global variable that added by ReactLynx. |
| Root | The default root exported by @lynx-js/react for you to render a JSX |
Variables
| Variable | Description |
|---|---|
| root | The default and only root of ReactLynx for you to render JSX |
Functions
| Function | Description |
|---|---|
| createContext | Lets you create a Context that components can provide or read. |
| createElement | - |
| createRef | - |
| createRoot | The default and only root of ReactLynx for you to render JSX |
| forwardRef | Lets your component expose an element node to a parent component using a ref. |
| Fragment | Lets you group elements without a wrapper node. |
| isValidElement | - |
| lazy | Lets you defer loading a component’s code until it is rendered for the first time. |
| memo | Lets you skip re-rendering a component when its props are unchanged. |
| runOnBackground | runOnBackground allows triggering js functions on the js context asynchronously. |
| runOnMainThread | runOnMainThread allows triggering main thread functions on the main thread asynchronously. |
| Suspense | Lets you display a fallback until its children have finished loading. |
| useCallback | useCallback will return a memoized version of the callback that only changes if one of the inputs has changed. |
| useContext | Accepts a context object (the value returned from React.createContext) and returns the current context value, as given by the nearest context provider for the given context. |
| useDebugValue | useDebugValue can be used to display a label for custom hooks in React DevTools. |
| useEffect | Accepts a function that contains imperative, possibly effectful code. |
| useImperativeHandle | useImperativeHandle customizes the instance value that is exposed to parent components when using ref. As always, imperative code using refs should be avoided in most cases. |
| useInitData | A React Hooks for you to get initData. If initData is changed, a re-render will be triggered automatically. |
| useInitDataChanged | A React Hooks for you to get notified when initData changed. |
useLayoutEffect is now an alias of useEffect. Use useEffect instead. | |
| useLynxGlobalEventListener | useLynxGlobalEventListener help you addListener as early as possible. |
| useMemo | useMemo will only recompute the memoized value when one of the deps has changed. |
| useReducer | An alternative to useState. |
| useRef | useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component. |
| useState | Returns a stateful value, and a function to update it. |
| useSyncExternalStore | - |
| withInitDataInState | Higher-Order Component (HOC) that injects initData into the state of the given class component. |
Components
| Function | Description |
|---|---|
| InitDataConsumer | The Consumer Component that provide initData. This should be used with InitDataProvider |
| InitDataProvider | The Provider Component that provide initData, you must wrap your JSX inside it |
Directives
| Document | Description |
|---|---|
| directives | - |
Globals
| Document | Description |
|---|---|
| built-in-macros | - |