React Awesome

tip
  • 专门功能选择专业组件 - 配合 UI 组件达到更为理想的结果
    • react-table
    • react-hook-form
  • 避免选择绑定了功能的组件
    • antd
  • 选择组件库的考虑维度
    • 前端/后端 - C 端/B 端
    • 信息密度
    • 支持平台 - Web/移动端

通用 UI 组件#

  • palantir/blueprint
    • CSS 样式定义 + React 封装组件
    • 很多组件都可以直接 HTML + CSS 类定义达到效果 - 非常清晰明了
    • npm 包含源码 - IDE 能直接看到组件源码
    • @blueprintjs/select
      • 多功能 select 组件
      • 不控制样式,以逻辑为主
  • rsuite/rsuite
    • 各方面神似 AntD - 但比 AntD 轻的多
  • ant-design/ant-design - 不建议产品使用
    • 丰富强大的组件库
    • 过于 高度封装
      • 做出来的东西都差不多,一眼能看出来是 AntD 组件
      • 难自定义
      • 想把什么都做掉做好 - 但结果并不理想
    • 大量依赖 外部组件
      • 43 个依赖 - npm dependencies
      • 大量 rc-xxx - 外部组件用于实现单一功能 - 功能非常复杂
      • 但单一功能却都又比不上 react-table、react-hook-form 之类的专门组件 - 食之无味,弃之可惜
      • 且导致版本变化可能组件直接不兼容 - 例如 3->4 Form 和 Table
      • 大多 rc-xxx 的类型定义缺失,对 TS 也不友好,难看得到有什么属性 - 需要的时候得翻 rc-xxx 源码,但质量堪忧
    • icon 组件现在不允许使用字符串,需要引入具体组件
      • 用开发便捷性换取 bundle size - 觉得不值得 - 因为 antd 一般用于后台系统,bundle size 次要
      • icon 难以直接配置使用
    • 版本变化样式各方面变化较大 - 即便是小版本变化
      • 导致基本不可能自定义 antd 内部组件样式 - 维护成本高
  • mui-org/material-ui - Material Design 风格
    • 如果选择 MD 风格则非常匹配
    • 完成程度和成熟度远远高于 antd
    • 组件非常多,支持高度样式自定义
  • 公司相关设计风格组件库
  • 其他风格

特殊 UI 组件#

编辑器#

路由#

  • ReactTraining/react-router
    • React 16.8 hook 之前已经存在
    • 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 发生变化
    • react-router-config
      • 提供了统一配置 route 的逻辑 - 很简单,可以作为参考
      • matchRoutes - 匹配嵌套路由 - 返回匹配的 tree 路由数组
      • renderRoutes - 渲染嵌套路由 - 递归 Switch, 遍历 Route
  • reach/router
    • React Router 作者在 hook 出现后进行的尝试
    • 目前 hook 能力已经合并回 react router v5
    • 不使用 Swith 和 Route 组件,而是直接在组件上添加 path 进行匹配
  • 参考

功能组件#

数据校验#

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

Form#

  • react-hook-form/react-hook-form
    • 基于 hook 的 form 语意实现
    • 轻量简单 - 没有复杂概念,直接 useForm 即可使用
    • 状态独立 - 性能好
    • 侵入性非常低
      • 不强制要求 Form 上下文
      • 可以通过 ref 注册
    • 注意
      • 默认 mode 为 submit - 在提交的时候才会校验
      • 基于 ref 注册可能会被 deregister
  • formium/formik
    • 基于组件构建表单
    • 默认 Formik 全量渲染
    • 组件 Field 封装
    • 编码量较多
    • formium
      • 商业的 headless form builder
  • final-form/react-final-form
    • 基于 Final Form 的 React 封装
    • 组件逻辑上类似 formik - 但要简单一点
    • 核心 final form 也支持 vue、web component 等
    • formnerd
      • 商业的 form 提交服务
    • data-driven-forms/form-builder
      • 开源的 form builder
      • 尚不成熟

样式#

  • styled-components
    • 包装现有组件,添加 className
  • emotion
    • 生成 className

状态管理#

图表#

开发工具#

工具#