技能介绍

你在 React 里常踩的坑

用 { data, loading, error } 三个布尔量拼异步 UI，状态组合一多就容易漏分支；null / undefined 混用也让「值还没来」和「真的没有」说不清。表单只报第一个错误、API 失败散落在各处 try/catch，测试时还要硬 mock fetch。若项目已选 fp-ts，缺的是和 React 生命周期、重渲染对齐的写法，而不是再背一套抽象名词。

技能在讲什么

本技能按场景给可粘贴的模式，核心类型与用途如下：

| 场景 | 类型 |
|------|------|
| 值可能不存在 | Option |
| 同步可能失败（校验） | Either（Left 错误 / Right 合法） |
| 异步可能失败 | TaskEither |
| loading / error / success UI | RemoteData 状态机 |
| 链式变换 | pipe |

状态与表单：用 Option 表达可选用户/配置；用 Either 做单字段或多字段校验，可 累积全部错误 做字段级 UX。

数据获取：TaskEither 封装 API；配合 RemoteData 的 Hook 替代布尔 flag；支持链式与并行请求。

React 特有问题：O.some(1) 等每次 render 是新引用——文档给出 useMemo 与 fp-ts-react-stable-hooks；用 Context + ReaderTaskEither 做依赖注入与可测组件。

React 19：use() 消费 Promise、useActionState 表单、useOptimistic 乐观更新。速查表还覆盖 Option/Either 渲染、安全数组渲染、条件 props。

相关生态：fp-ts、@devexperts/remote-data-ts、io-ts / zod 与 fp-ts 配合。

适用边界

面向已接受函数式类型（或愿意写 pipe）的团队；RemoteData 等需引入对应库。未覆盖完整 fp-ts 教程，而是 React/Next 14/15 上的 实用模式；黑话刻意少，但读者需熟悉 Hook 与基本 TS。

截图预览

使用场景

在 Next.js 14/15 页面里用 TaskEither 封装接口请求，并用 RemoteData 驱动 loading、error、success 三种 UI，替代多套布尔 flag。
多字段表单提交前要一次性展示全部校验失败项，用 Either 做 applicative 式错误累积，而不是只提示第一个字段。
登录态或用户资料尚未返回时，用 Option 表达「尚无数据」，避免把 undefined 当成「未登录」误隐藏或误展示内容。
组件 render 里每次 `O.some(...)` 导致子树无意义重渲染时，按文档选用 useMemo 或 fp-ts-react-stable-hooks 稳定引用。