Wener Notes

React Awesome

约 16 分钟阅读
标签：资源精选
  • 专门功能选择专业组件 - Headless 配合 UI 组件达到更为理想的结果
    • react-table
    • react-hook-form
    • floatingui
  • 选择样式与组件独立的 UI 库
    • tailwindcss+daisyui
    • rewindui/rewindui
  • 避免选择绑定了功能的组件
    • 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
Packageszustandnpm PackagezustandNPMimmernpm PackageimmerNPMuse-immernpm Packageuse-immerNPMclassnamesnpm PackageclassnamesNPMreact-iconsnpm Packagereact-iconsNPMreact-querynpm Packagereact-queryNPMurqlnpm PackageurqlNPM@blueprintjs/corenpm Package@blueprintjs/coreNPM@blueprintjs/selectnpm Package@blueprintjs/selectNPM@blueprintjs/datetimenpm Package@blueprintjs/datetimeNPM@blueprintjs/popover2npm Package@blueprintjs/popover2NPM@blueprintjs/tablenpm Package@blueprintjs/tableNPM

通用 UI 组件

Headless UI 组件

移动端 UI 组件

专用 UI 组件

编辑器

路由

  • ReactTraining/react-routerGitHubReactTraining/react-router
    • React 16.8 hook 之前已经存在
    • v6 基于 hook 重写，替代 reach-router
    • v5 添加 hook 支持，Swith 和 Route 组件可选
    • 支持 MemoryRouter，支持 React Native
    • 核心组件
      • Router - 提供 history 管理和上下文 - history 实现在 historyGitHubReactTraining/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笔记@tanstack/react-routerFile Based router 优先 · 对代码构建不友好 · 全局强类型 - 构建路由很吃力 · tanstack/router · @tanstack/history · @tanstack/react-store -> use-sync-external-store, @tanstack/store打开：/notes/web/react/tanstack-router
    • 参考/基于 React Router v6
    • 内置 async import - 异步加载 element
    • 内置 async load - 异步加载 data/状态 - useMatch 返回
    • query 参数匹配、状态管理
    • declarative API
  • molefrog/wouterGitHubmolefrog/wouter
    • 轻量实现 - 很实用 - 可以直接拷贝到项目修改使用
    • 可以不需要 context
    • 外部提供 location
    • minimalist-friendly ~2.1KB routing for React and Preact
  • reach/routerGitHubreach/router
    • React Router v6 后 reach router 不再需要
    • React Router 作者在 hook 出现后进行的尝试
    • 目前 hook 能力已经合并回 react router v5
    • 不使用 Swith 和 Route 组件，而是直接在组件上添加 path 进行匹配
  • 参考

功能组件

大多为 Headless/unstyled

虚拟滚动

数据校验

  • 一般都不是 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
    • 面向 数据/状态 - 函数、全局、跨组件
    • 优势
      • 框架无关
      • 可在任意地方调用
    • 劣势

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

图表

开发工具/生态

工具

动画

功能

参考

Rendering/Native

有趣

Internal

Reference Snippets

  • codepen: Calculator
  • Bit.dev
  • PrimeReact
  • react-fast-compare - Fast deep equal comparison for React
  • react-hotkeys-hook - React hook for hotkeys
  • hotkeys-js - A simple micro-library for defining and dispatching keyboard shortcuts

Design & UI

Keyboard Shortcuts UX

Reference Implementations:

Symbols:

  • ⌘ Command
  • ⌃ Control
  • ⌥ Option (Alt)
  • ⇧ Shift
  • ⇪ Caps Lock
  • ↩︎ Return/Enter

关联信息

反向链接、本文链接的其他页面和外部资料。

站内链接

  • @tanstack/react-router
    笔记 · @tanstack/react-router

    File Based router 优先 · 对代码构建不友好 · 全局强类型 - 构建路由很吃力 · tanstack/router · @tanstack/history · @tanstack/react-store -> use-sync-external-store, @tanstack/store

  • Ant Design
    笔记 · ant-design/ant-design

    ant-design/ant-design · 丰富强大的组件库 · 不建议产品使用 - 除非是后台管理系统 · 参考 · 推荐使用 react-component，antd 的基础库 · 非常适用于 快速 出原型和结果 · 非常适用于 内部系统 / 后台管理系统

  • daisy
    笔记 · daisyui

    saadeghi/daisyui · MIT, CSS · 基于 TailwindCSS 的一套 UI · 主题 · {primary,secondary,accent,neutral}-{,focus,content} · base-{100,200,300,content}

  • Jotai
    笔记 · jotai

    pmndrs/jotai 是什么？ · 7.1kB/2.7kB · 大状态拆分小(原子/atom)状态 - 原子状态更利于复用和减小变化影响范围 · 核心接口 atom, Provider, useAtom, Store · jotai/utils 包含其他工具 atom

  • million
    笔记 · aidenybai/million

    aidenybai/million · MIT · <4kb · The Virtual DOM Replacement for React · https://million.dev/blog/virtual-dom · Diff the data, not the DOM.

  • React Query
    笔记 · react-query

    TanStack/query · 默认 · 开启 refetchOnMount, refetchOnWindowFocus, refetchOnReconnect · cacheTime 5 分钟 - 不再使用的的数据保留 5 分钟 · retry=3, retryDelay exponential

  • react-component
    笔记 · rc-select · rc select

    https://github.com/react-component · 参考 · https://react-component.github.io/badgeboard/ · react-component/tree · npm:rc-tree

  • react-table
    笔记 · react-table

    tannerlinsley/react-table · 基于 Hook 功能强大的 Table 组件 · v8+ 框架无关,不再使用插件模式 · 针对同一个状态，不要 initialState 和 state 都设置 · 不支持 sticky 行列

  • remax
    笔记 · remax

    remaxjs/remax · 使用真正的 React 构建小程序 · 真正 - 基于 react-reconciler · VNode · 支持 less, css module · 参考 · remaxjs/awesome-remax

  • Taro
    笔记 · taro

    CSS · 不要使用 ID 选择器 (#od)、属性选择器、标签选择器 · 组件和引用组件的页面不能使用 id 选择器（#a）、属性选择器（[a]）和标签名选择器，请改用 class 选择器。 · 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。

  • valtio
    笔记 · valtio

    pmndrs/valtio · 7kB/2.5kB - use-sync-external-store+proxy-compare · 基于 proxy 的状态管理 · 类似 mobx, vue · 默认状态变化是异步触发监听 · 可以使用 Class 作为 被代理对象

  • zustand
    笔记 · zustand

    pmndrs/zustand 是什么？ · out of tree 状态管理 · 可外部查询、修改、订阅 · 可多个渲染树使用 · 支持 react concurrency · Context 可选 · 默认全局 store 单例 · 可在其它框架使用 - 不依赖 react

References

GitHub286 条
Packages2 条
其他外链45 条
最近更新commit 4b6e1d9Edit

Radix

Previous Page

React Buddy

Next Page

On this page

React Awesome通用 UI 组件Headless UI 组件移动端 UI 组件专用 UI 组件编辑器路由功能组件虚拟滚动数据校验Form样式Hooks状态管理图表开发工具/生态工具动画功能参考Rendering/Native有趣InternalReference SnippetsDesign & UIKeyboard Shortcuts UX