Solid.js 最新官方文档翻译（4）—— 组件基础

前言

Solid.js，一个比 React 更 react 的框架。每一个使用 React 的同学，你可以不使用，但不应该不了解。

目前 Solid.js 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Solid.js，故有此系列。

我同时搭建了 Solid.js 最新的中文文档站点：solid.yayujs.com ，欢迎勘误。

虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。

欢迎围观朋友圈、加入低调务实优秀中国好青年前端社群，感受不一样的前端社群。

组件基础

组件是 Solid 应用程序的构建基础。组件可复用并能组合创建更复杂的应用程序。

组件是返回 JSX 元素的函数：

tsx 复制代码

function MyComponent() {
    return <div>Hello World</div>;
}

组件可以像单个元素一样简单，也可以像一个页面一样复杂。组件还可以相互嵌套创建更复杂的应用程序：

tsx 复制代码

function App() {
    return (
        <div>
            <MyComponent />
        </div>

    );
}

组件树

一个 Web 页面是通过渲染组件树来呈现的。组件树是指组件的层次结构。树的顶部是主应用程序组件，也是树的根。子组件嵌套在主组件内，这些组件也可以有自己的子组件。

一个简单的应用程序可能有一个如下所示的组件树：

json 复制代码

App // 主程序组件
└── MyComponent // 子组件

当应用程序增长时，组件树可能会变得更加复杂，例如一个复杂的应用程序可能有一个如下的组件树：

json 复制代码

App
├── Header
├── Sidebar
├── Content
│   ├── Post
│   │   ├── PostHeader
│   │   ├── PostContent
│   │   └── PostFooter
│   ├── Post
│   │   ├── PostHeader
│   │   ├── PostContent
│   │   └── PostFooter
│   └── Post
│       ├── ...
└── Footer

在嵌套组件中，您可以创建可在整个应用程序中复用的组件，这允许采用更加模块化的方式构建应用程序，因为组件可以在不同的上下文中复用。

组件生命周期

组件有一个生命周期，定义了组件如何创建、更新和销毁。Solid 组件的生命周期与其他框架不同，因为背后涉及到响应式。

框架可能在每次状态更改时重新运行组件，但 Solid 组件的生命周期与其初始化状态相关，也就是说 Solid 组件仅在首次渲染 DOM 中时运行一次，此后，即使应用程序发生变化，该组件也不会重新运行。

当 Solid 组件渲染时，它会设置一个响应式系统监控状态的变化。当状态发生变化，组件将更新相关的区域，而不会重新运行整个组件。与每次状态更改都重新运行函数的框架相比，Solid 的行为更加可预测。

由于不会连续访问组件的逻辑，因为使用 Solid 时正确设置启动非常重要。

初始化 & 配置

当组件第一次渲染到 DOM 中时，组件函数将会被执行。您可以在此处设置组件的状态和副作用。包括设置 signals、stores、effect 和其他响应式元素。由于组件函数的逻辑不是连续访问，因为从一开始就正确设置组件非常重要。

每个组件实例都独立于其他实例，这意味着每个组件都有自己的状态和副作用。通过建立适当的依赖关系，您可以确保组件正确设置，这允许组件在不同的上下文中重用，而不会相互影响。

tsx 复制代码

function MyComponent() {
    const [count, setCount] = createSignal(0);

    console.log(count());

    return (
        <div>
            <p>Count: {count()}</p>

            <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>

        </div>

    );
}

当组件被渲染到 DOM 中时，函数体就会执行。这包括创建 count信号并执行 console.log(count()) 语句，该语句会将 count 的当前值打印到控制台。此外，还会返回组件的 JSX，该 JSX 将被渲染到 DOM 中。

组件渲染后，即使组件的状态发生变化，console.log语句也不会再次执行。但是由于组件的 JSX 是响应式的，因此每次按下按钮都会使用 count 的新值更新 DOM。

从本质上说，Solid 解决了这些问题：

初始设置逻辑，在组件渲染时执行一次
响应式逻辑，当组件的状态发生变化时执行。

条件渲染

如果要根据状态或者其他条件显示不同的内容，您可以使用条件渲染。由于组件函数只执行一次，因为必须将条件语句放到 return 语句中。这种设计确保条件路径清晰并能被立刻理解。

tsx 复制代码

function MyComponent() {
    const [count, setCount] = createSignal(0);
    return (
        <div>
            {count() > 5 ? (
                <div>Count limit reached</div>

            ) : (
                <>
                    <p>Count: {count()}</p>

                    <button onClick={() => setCount((prev) => prev + 1)}>
                        Increment
                    </button>

                </>
            )}
        </div>

    );
}

这个例子使用了三元运算符，根据 count 的值渲染不同的内容。当 count 大于 5 时，组件将显示 "Count limit reached"，否则，它的计数会继续增加。

注意：

为了简化条件渲染，Solid 内置了控制流组件比如 Show，代码更具可读性。

tsx 复制代码

function MyComponent() {
  const [count, setCount] = createSignal(0)

  return (
    <div>
      <Show
        when={count() > 5}
        fallback={
          <>
            <p>Count: {count()}</p>
            <button onClick={() => setCount((prev) => prev+1)}>Increment</button>
          </>
        }
      >
        <div>Count limit reached</div>
      </Show>
    </div>
  )
}

导入和导出

为了使组件可复用，需要将它们从一个模块导出到另一个模块中，这使得可以在需要时共享和使用组件。

导出组件

定义后，可以导出组件以使其可在应用程序的其他部分中使用。导出组件有两种方法：命名导出和默认导出。

命名导出:

命名导出允许从单个文件导出多个组件，要导出组件，必须在函数定义之前使用 export 关键字或在大括号（{})中指定要导出的组件名称。

typescript 复制代码

export function MyComponent() {
    return <div>Hello World</div>

}

// 或

function MyComponent() {
    return <div>Hello World</div>

}

export { MyComponent }

默认导出:

默认导出指定要从文件导出的单个组件。这是通过使用 default 关键字来完成的。

typescript 复制代码

// MyComponent.ts
export default function MyComponent() {
    return <div>Hello World</div>
}

导入组件

要在另一个文件或组件中使用某个组件，必须将其导入。要导入组件，您必须指定包含该组件的文件的路径以及要导入的组件的名称。

命名导入

导入命名导出时，必须在大括号 ({}) 中指定要导入的组件的名称。

tsx 复制代码

// App.ts
import { MyComponent } from "./MyComponent";

function App() {
    return (
        <div>
            <MyComponent />
        </div>

    );
}

这是导入组件的首选方式，因为它可以提高代码的可读性和可维护性。此外，它还允许从同一文件导入多个组件。

tsx 复制代码

// App.ts
import { MyComponent, MyOtherComponent } from "./MyComponent";

function App() {
    return (
        <div>
            <MyComponent />
            <MyOtherComponent />
        </div>

    );
}

默认导入：

要导入默认导出，您必须指定要导入的组件的名称。

tsx 复制代码

// App.ts
import MyComponent from "./MyComponent";

function App() {
    return (
        <div>
            <MyComponent />
        </div>

    );
}

导入 Solid 和其工具库

要使用 Solid，您必须导入 Solid 库。比如响应式相关的工具函数都需要从 Solid 主模块中导出：

tsx 复制代码

import { createSignal } from "solid-js";

有些则是从内部模块中导出：

tsx 复制代码

import { createStore } from "solid-js/store";

查看 Solid 实用程序的完整列表，侧边栏中的"参考"选项卡提供了 API 文档。