RedwoodJS 教程：深入理解 Cells 组件-优快云博客

RedwoodJS 教程：深入理解 Cells 组件

redwood The App Framework for Startups 项目地址: https://gitcode.com/gh_mirrors/re/redwood

什么是 Cells？

在 RedwoodJS 框架中，Cells 是一种特殊类型的组件，它简化了数据获取和状态管理的复杂性。Cells 提供了一种声明式的方法来处理常见的 UI 状态，如加载中、空数据、错误和成功状态，让开发者能够更专注于业务逻辑的实现。

为什么需要 Cells？

在传统 React 应用中，处理数据获取通常需要：

管理加载状态
处理错误情况
显示空数据提示
渲染成功获取的数据

这些逻辑在每个需要数据的组件中重复编写，增加了开发负担。RedwoodJS 的 Cells 将这些常见模式抽象出来，提供了一种标准化的处理方式。

Cells 的核心结构

一个典型的 Cell 组件包含以下几个导出部分：

1. QUERY

定义 GraphQL 查询语句，用于获取数据。

export const QUERY = gql`
  query ArticlesQuery {
    articles: posts {
      id
      title
      body
      createdAt
    }
  }
`

2. Loading

定义数据加载时显示的组件。

export const Loading = () => <div>Loading...</div>

3. Empty

定义当查询返回空数据时显示的组件。

export const Empty = () => <div>No posts yet!</div>

4. Failure

定义当查询出错时显示的组件。

export const Failure = ({ error }) => (
  <div>Error loading posts: {error.message}</div>
)

5. Success

定义当数据成功加载后显示的组件。

export const Success = ({ articles }) => {
  return articles.map((article) => (
    <article key={article.id}>
      <h2>{article.title}</h2>
      <div>{article.body}</div>
    </article>
  ))
}

Cells 的生命周期

RedwoodJS 会自动管理 Cells 的生命周期：

首先显示 Loading 组件
根据查询结果决定显示：
- 如果出错：显示 Failure 组件
- 如果数据为空：显示 Empty 组件
- 如果成功：显示 Success 组件

创建 Cells

RedwoodJS 提供了生成器来快速创建 Cells：

yarn rw g cell Articles

这会创建一个包含基本结构的 Cell 组件文件。生成器支持多种命名格式（snake_case、kebab-case、camelCase 或 PascalCase）。

实际应用示例

让我们创建一个博客文章列表的 Cell：

首先生成 Cell：

yarn rw g cell Articles

修改查询以获取需要的字段：

export const QUERY = gql`
  query ArticlesQuery {
    articles: posts {
      id
      title
      body
      createdAt
    }
  }
`

完善 Success 组件的渲染逻辑：

export const Success = ({ articles }) => {
  return (
    <>
      {articles.map((article) => (
        <article key={article.id}>
          <header>
            <h2>{article.title}</h2>
          </header>
          <p>{article.body}</p>
          <div>Posted at: {article.createdAt}</div>
        </article>
      ))}
    </>
  )
}

在页面中使用这个 Cell：

import ArticlesCell from 'src/components/ArticlesCell'

const HomePage = () => {
  return (
    <>
      <ArticlesCell />
    </>
  )
}

类型安全（TypeScript）

对于 TypeScript 项目，RedwoodJS 提供了类型支持：

import type { ArticlesQuery, ArticlesQueryVariables } from 'types/graphql'
import type { CellSuccessProps } from '@redwoodjs/web'

export const Success = ({
  articles,
}: CellSuccessProps<ArticlesQuery, ArticlesQueryVariables>) => {
  // 渲染逻辑
}

RedwoodJS 会自动生成与 GraphQL 查询对应的 TypeScript 类型。