持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情

懒加载组件

大多数打包器在使用动态导入时会自动进行代码分割处理。solid的lazy方法允许包含组件的动态导入来实现延迟加载。然后输出一个可以在jsx模版中正常使用的组件，它会在第一次渲染时在内部动态加载底层导入的代码，此时会暂停渲染分支直到代码可用。原：

import Greeting from "./greeting";

如：

import { render } from "solid-js/web";
import { lazy } from "solid-js";

const Greeting = lazy(() => import("./greeting"));

function App() {
  return (
    <>
      <h1>Welcome</h1>
      <Greeting name="Jake" />
    </>
  );
}

render(() => <App />, document.getElementById("app"));

使用lazy工具函数包住需要异步加载的组件。

资源

resource是专门用于异步加载的特殊signal。可以做到异步不再阻塞执行。如： const [user] = createresource(userId,fetchuser) 它由userId响应式驱动，当数据发生变化时，会调用fetchuser方法。事实上，该方法可以是任意内容，只要保证是promise驱动的即可。生成的 Resource Signal，还包含响应式 loading 和 error 属性，可以根据当前状态轻松控制我们的视图。从createResource返回的第二个值包含一个mutate方法，用于直接更新内部signal，另外一个refetch方法，即使源没有改变，也可以用它来重新加载当前查询请求。

const [user, { mutate, refetch }] = createResource(userId, fetchUser);

lazy 在内部使用 createResource 来管理其动态导入。

transition

solidjs提供了一个usetransition()的hooks，返回一个挂起的信号指示器和一个开始过渡（transition）的方法，这两个返回值囊括了我们的状态更新。

const [pending, start] = useTransition(); const updateTab = (index) => () => start(() => setTab(index));

我们应该使用挂起状态的signal在ui中添加一个状态指示器。可以在选项卡容器div上添加一个表示挂起的class，如：

<div class="tab" classList={{ pending: pending() }}>

SolidJs之异步

懒加载组件

资源

transition