react-worker-render

move react component lifecycle to worker and render to DOM.

example

https://yiminghe.github.io/react-worker-render

API

types

interface WorkerRenderComponentSpec extends React.ComponentLifecycle<any, any>, React.StaticLifecycle<any, any> {
    getInitialState?: () => any;
    defaultProps?: any;
    render: (this: {
        nativeComponents: Record<string, React.ComponentClass>;
        props: any;
        state: any;
        getComponent: (name: string) => React.ComponentClass;
        getEventHandle: (name: string) => any;
    }) => React.ReactNode;
    [k: string]: any;
}
interface WorkerLike {
    postMessage(msg: string): void;
    onmessage: ((e: any) => void) | null;
}

ReactWorker

import { ReactWorker } from 'react-worker-render';

export declare function registerNativeComponent(cls: string, Cls: React.ComponentClass): void;
export declare function registerComponent(name: string, desc: WorkerRenderComponentSpec): void;
export declare function bootstrap(params: {
    worker: WorkerLike;
    entry: string;
}): void;

ReactRender

import { ReactRender } from 'react-worker-render';

export declare function registerNativeComponent(cls: string, Cls: React.ComponentClass): void;
export declare function registerComponent(name: string, desc: {render:WorkerRenderComponentSpec['render']}): void;
export declare function bootstrap(params: {
    worker: WorkerLike;
    entry: string;
    batchedUpdates: (fn: () => void) => void;
    render: (element: React.ReactChild) => void;
}): void;

development

yarn run bootstrap
yarn start

open: http://localhost:3000/

supported react versions

16-18

App can override react/react-reconciler version using yarn resolutions.