Move React Component Lifecycle To Worker And Render To DOM
react-worker-render
move react component lifecycle to worker and render to dom
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;
}
declare function registerComponent(name: string, desc: WorkerRenderComponentSpec): void;
export 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 registerComponent(name: string, desc: {render:WorkerRenderComponentSpec['render']}): void;
export declare function registerNativeComponent(cls: string, Cls: React.ComponentClass): void;
export declare function bootstrap(params: {
worker: WorkerLike;
entry: string;
render: (element: React.ReactChild) => void;
}): void;
example
yarn
yarn start
open: http://localhost:3000/
supported react versions
16-18
App can override react/react-dom/react-reconciler version using yarn resolutions.