@acoustic-content-sdk/react-utils 中文文档教程
Documentation
Code Splitting
支持对于 ReactModule 用于实现透明延迟加载的 React 组件，例如使用 ES6 代码拆分。
使用 createLazyComponent 方法将异步组件创建函数（例如通过延迟加载）转换为同步创建函数。 由同步函数创建的组件将立即可用，但它只会在实际呈现时从异步回调中加载组件。
例如，这种方法可以用于提供延迟加载的组件模块，模块的使用者看不到延迟加载与急切加载之间的区别。 因此，使用延迟加载/代码拆分的决定取决于模块提供者的范围，而不是模块消费者。
Example
component.ts：
React 组件的构造函数：
export const createMyComponent([store]: [ReduxStore], [logSvc?]: [LoggerService]): ReactComponent<SomeState> => ...
lazy.component .ts：
具有相同接口但通过代码拆分延迟加载的组件的创建函数可以像这样创建：
export const createMyLazyComponent = createLazyComponent(
defer(() => import('./component')).pipe(pluck('createMyComponent'))
);
注意 createMyComponent 和 createMyLazyComponent 共享相同的接口，都可以用于为同一组件定义 ReactModule。 这让应用程序决定在适用时使用延迟加载，而无需为组件的提供者和消费者更改任何代码。
Documentation
Code Splitting
Support for ReactModules for React components that implement transparent lazy loading, e.g. using ES6 code splitting.
Use the createLazyComponent method to convert an asynchronous component creation function (e.g. via lazy loading) into a synchronous creation function. The component created by the synchronous function will be available immediately but it will only load the one from the asynchronous callback when actually being rendered.
This approach can e.g. be used to provide a lazy loaded component module in a way that the consumer of the module does not see a difference between lazy loading vs eager loading. The decision to use lazy loading/code splitting lies therefore in the scope of the module provider not the module consumer.
Example
component.ts:
Constructor function for a React component:
export const createMyComponent([store]: [ReduxStore], [logSvc?]: [LoggerService]): ReactComponent<SomeState> => ...
lazy.component.ts:
A creation function of a component with the identical interface but lazy loaded via code splitting can be created like so:
export const createMyLazyComponent = createLazyComponent(
defer(() => import('./component')).pipe(pluck('createMyComponent'))
);
Note that both createMyComponent and createMyLazyComponent share the identical interface, the can both be used to define a ReactModule for same component. This lets the application decide to use lazy loading when applicable, without any code changes for either the provider not the consumer of the component.
