React-Async 项目指南：视图与逻辑的优雅分离-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00632/article/details/148891098

React-Async 项目指南：视图与逻辑的优雅分离

react-async 🍾 Flexible promise-based React data loader 项目地址: https://gitcode.com/gh_mirrors/re/react-async

前言

在现代前端开发中，组件化开发已经成为主流范式。随着应用复杂度的提升，如何优雅地组织代码结构变得尤为重要。本文将深入探讨如何在 react-async 项目中实现视图与逻辑的清晰分离，这种分离不仅能提高代码的可维护性，还能增强组件的复用性。

为什么需要分离视图与逻辑

在传统的 React 组件开发中，我们常常会将数据获取逻辑与渲染逻辑混合在一起，这会导致以下几个问题：

可测试性差：混合了视图和逻辑的组件难以进行单元测试
复用性低：相同的业务逻辑难以在不同的视图组件中复用
维护困难：随着业务增长，组件变得越来越臃肿

react-async 提供了一套优雅的解决方案，帮助我们实现关注点分离（Separation of Concerns）。

基础实现：渲染属性模式

react-async 的核心思想是将异步状态管理与视图渲染分离。让我们看一个基本示例：

import React from "react"
import { useAsync } from "react-async"

// 定义数据获取逻辑
const fetchPerson = async ({ id }, { signal }) => {
  const response = await fetch(`https://swapi.co/api/people/${id}/`, { signal })
  if (!response.ok) throw new Error(response.statusText)
  return response.json()
}

// 纯逻辑组件 - 不包含任何视图
const Person = ({ id, children }) => {
  const state = useAsync({ promiseFn: fetchPerson, id })
  return children(state)
}

// 视图组件 - 只负责渲染
const App = () => {
  return (
    <Person id={1}>
      {({ isPending, data, error }) => {
        if (isPending) return "Loading..."
        if (error) return <ErrorMessage {...error} />
        if (data) return <Greeting {...data} />
        return null
      }}
    </Person>
  )
}

在这个例子中，我们清晰地看到：

fetchPerson 函数只负责数据获取
Person 组件只管理异步状态
App 组件只负责根据状态渲染不同视图

这种分离使得每个部分都可以独立开发、测试和复用。

进阶优化：使用状态助手组件

虽然渲染属性模式非常强大，但当状态判断逻辑复杂时，JSX 可能会变得难以阅读。react-async 提供了一系列状态助手组件来简化代码：

import React from "react"
import Async from "react-async"

const App = () => {
  return (
    <Async promiseFn={fetchPerson} id={1}>
      <Async.Pending>Loading...</Async.Pending>
      <Async.Rejected>{error => <ErrorMessage {...error} />}</Async.Rejected>
      <Async.Fulfilled>{data => <Greeting {...data} />}</Async.Fulfilled>
    </Async>
  )
}

这种声明式的写法有几个显著优势：

可读性更强：一眼就能看出不同状态对应的UI
结构更清晰：消除了复杂的条件判断嵌套
灵活性更高：状态组件不必是直接子组件

状态助手的灵活运用

react-async 的状态助手组件非常灵活，它们可以：

任意嵌套：可以放在组件树的任何位置，只要在 Async 组件内部
重复使用：同一状态可以有多个助手组件
独立使用：也可以单独使用，通过手动传入 state 属性

<Async promiseFn={fetchPerson} id={1}>
  <div>
    <h1>Person Details</h1>
    <Async.Pending>Loading person data...</Async.Pending>
    <Async.Rejected>
      {error => (
        <div className="alert">
          <ErrorMessage {...error} />
          <RetryButton />
        </div>
      )}
    </Async.Rejected>
    <Async.Fulfilled>
      {data => (
        <>
          <Greeting {...data} />
          <Profile {...data} />
        </>
      )}
    </Async.Fulfilled>
  </div>
</Async>