Skip to main content

React Awesome

tip
  • 专门功能选择专业组件 - Headless 配合 UI 组件达到更为理想的结果
    • react-table
    • react-hook-form
    • react-popper
  • 选择样式与组件独立的 UI 库
    • bluprintjs
  • 避免选择绑定了功能的组件
    • antd
  • 选择组件库的考虑维度
    • 前端/后端 - C 端/B 端
    • 信息密度
    • 支持平台 - Web/移动端
  • 使用支持 ESM 的库
常用依赖
# 状态管理 - jotai
npm add zustand immer use-immer
# UI
npm add classnames
npm add react-icons
npx tailwindcss init -p # tailwindcss
# API
npm add react-query # generic
npm add urql        # gql

# 组件
# blueprintjs - v4 发布后不需要 x2 包
npm add @blueprintjs/core @blueprintjs/select @blueprintjs/datetime @blueprintjs/popover2
# 如果需要展示大量数据
npm add @blueprintjs/table

# 移动端样式组件
npm add tailwind-mobile

# 交互
npm add react-virtual     # 虚拟滚动
npm add @headlessui/react # 纯功能组件

# 路由
npm add react-router-dom

# 数据
npm add react-hook-form
npm add react-table

# 工具
npm add date-fns lodash-es react-fast-compare

通用 UI 组件​

移动端 UI 组件​

特殊 UI 组件​

编辑器​

路由​

  • ReactTraining/react-router
    • React 16.8 hook 之前已经存在
    • v6 基于 hook 重写，替代 reach-router
    • v5 添加 hook 支持，Swith 和 Route 组件可选
    • 支持 MemoryRouter，支持 React Native
    • 核心组件
      • Router - 提供 history 管理和上下文 - history 实现在 history 包
        • BrowserRouter 基于当前 URL
        • HashRouter 基于 URL 但使用 #/url 模式
        • StaticRouter - 静态地址，用于 SSR
        • NativeRouter - 支持 react-native
        • 核心状态 location - 从 history 监听变化
        • 提供 history 上下文 - useHistory
        • 提供 Route 上下文 - useLocation、useParams
      • Route - 匹配后渲染
      • Switch - 只会渲染一个匹配的 Route
      • Link, NavLink, Redirect - 导航，修改 url
      • Prompt - 用于阻塞 history 发生变化
    • useRoutes/react-router-config
      • 提供了统一配置 route 的逻辑 - 很简单，可以作为参考
      • matchRoutes - 匹配嵌套路由 - 返回匹配的 tree 路由数组
      • renderRoutes - 渲染嵌套路由 - 递归 Switch, 遍历 Route
  • @tanstack/react-router
    • 参考/基于 React Router v6
    • 内置 async import - 异步加载 element
    • 内置 async load - 异步加载 data/状态 - useMatch 返回
    • query 参数匹配、状态管理
    • declarative API
  • molefrog/wouter
    • 轻量实现 - 很实用 - 可以直接拷贝到项目修改使用
    • 可以不需要 context
    • 外部提供 location
    • minimalist-friendly ~2.1KB routing for React and Preact
  • reach/router
    • React Router v6 后 reach router 不再需要
    • React Router 作者在 hook 出现后进行的尝试
    • 目前 hook 能力已经合并回 react router v5
    • 不使用 Swith 和 Route 组件，而是直接在组件上添加 path 进行匹配
  • 参考

功能组件​

大多为 Headless

虚拟滚动​

数据校验​

  • 一般都不是 react 相关
  • 常用 yup, joi, props-type, json-schema
  • json-schema
    • 序列化好
    • 工具支持
    • 功能少 / 弱
  • yup
    • js 书写方便
    • 但不方便序列化
  • props-type
    • React 组件属性校验

Form​

样式​

Hooks​

状态管理​

In React State vs Outside State
  • Inside - 例如 useState, jotai, recoil
    • 面向 React - 组件、上下文、Tree
  • Outside - 例如 zustand, voltio/mobx
    • 面向 数据/状态 - 函数、全局、跨组件
    • 优势
      • 框架无关
      • 可在任意地方调用
    • 劣势
      • 可能有全局副作用
      • SSR 不一定好处理 - #182
Proxy vs Selector
  • 基于 代理 订阅 - 可以基于 路径 判断变化
    • 优势
      • 使用更简单
      • 不需要写 selector
      • 不需要关心 compare
    • 劣势
      • 传递时要小心 - 比如读取对象，返回的是代理对象
        • 尽量确保只有 基础数据类型 时使用
      • 代理特殊对象要小心
        • 例如: Map, Set, ReactElement, HTMLElement 之类的
        • 需要考虑哪些能被代理，哪些不能
    • 区分 读 代理 和 写 代理
      • selector 模式也可以用 写 代理
      • 基于 代理 订阅主要指 读 代理
      • 写 代理 修改操作可生成 operation - 可用于同步
  • 基于 selector 订阅 - 基于 值 判断变化
    • 优势
      • 都是 原始 值 或 frozen 值
      • 传递安全 - 不会有预期外结果，符合正常思路
    • 劣势
      • selector 写起来繁琐
      • selector 可能还需要 useCallback 来 memo
      • 需要考虑 compare 逻辑
      • 每次添加用到数据 要嘛加 selector ，要嘛修改 现有 selector
    • react-tracked 把基于 selector 变成基于 proxy
    • 可以修改时使用 proxy 减少变化对比
      • 例如 immer

图表​

开发工具/生态​

  • storybookjs/storybook 将 UI 开发从主应用分离
    • 不清楚如何选择，那就选择 Storybook
    • 非常重
    • 可能和项目内其他组件冲突 - React 17, PostCSS
    • 支持多框架和平台 - React, Vue, WebComponent, React Native, Ember, Svelte, Preact, Marionette.js, Mithril, Marko, Riot, Rax, Flutter
  • styleguidist/react-styleguidist
    • 类似于 storybook，提供独立环境
    • 实时编辑器
  • doczjs/docz
    • 组件 Doc 和 开发
    • 基于 MDX
    • 开发不活跃
  • react-cosmos/react-cosmos Sandbox for developing and testing UI components in isolation
  • Preact
  • aidenybai/million

工具​

动画​

功能​

参考​

Rendering/Native​

有趣​

Internal​