React lib FAQ
约 2 分钟阅读
标签：FAQ
react-router vs react-location
- react-router
- 更成熟，功能更稳定，开发更活跃，文档更完善
- 支持 SSR，Native
- 接口功能完善
- v6 暂无 prompt
- useSearchParams
- 需要自行序列化
- 不能基于之前状态更新
- 支持 useRoutes - 使用比较方便
- children 绝对路径需要包含 parent 前缀
- react-location
- 用户更少， edge case 可能有问题
- 只支持 CSR - 不支持 SSR，Native
- 部分 react-router 内置功能通过 plugin 提供
- 支持 search 处理
- 序列化
- 更新
- 内置 loader 处理 - element 异步、预先 load 数据、pending 逻辑
- Route 有 Generic 类型 - 使用起来更方便
- children 绝对路径基于 parent
- 参考
- react-location vs. React Router
Redux vs MobX
- 避免使用 MobX
- Redux 是一种 Pattern - 不一定需要使用 Redux
- 大多场景使用 useState, useImmer, zustand 即可
react-virtual vs react-window vs react-virtualized
💡 如何选择
- 使用 react-virtual
- 实在不能满足 尝试 react-window 或 react-virtualized
- tannerlinsley/react-virtualGitHubtannerlinsley/react-virtualtannerlinsley/react-virtual · 基于 Hook · Table with pinned header and column · https://codesandbox.io/s/react-virtual-grid-sticky-first-row-forked-b64ss?file=/src/index.js笔记：react-virtual
- 基于 hook
- 开发活跃
- react-window - min 24k
- 重写 react-virtualized
- 更加轻量
- 通过额外包提供缺少的功能
- 7k react-virtualized-auto-sizer
- 3.5k react-window-infinite-loader
- 只有 4 个核心组件 - 简单易用
- 不支持动态行高
- bvaughn/react-window#6GitHub Issuebvaughn/react-window#6bvaughn/react-window · FixedSizeList · VariableSizeList · FixedSizeGrid · VariableSizeGrid · 辅助功能 · bvaughn/react-virtualized-auto-sizer笔记：react-window Support just-in-time measured content
- 自行实现参考 dynamic-size-of-react-window-list-items
- react-virtualized - min 118k
- 功能更完善
- 开发更活跃
- 使用的人更多
- 5 个核心组件 + 8 个工具组件
- 支持 2 维 非 Grid 渲染
- 支持动态行高 CellMeasurer - 自己也可以实现
- How is react-window different from react-virtualized?GitHubbvaughn/react-windowbvaughn/react-window · FixedSizeList · VariableSizeList · FixedSizeGrid · VariableSizeGrid · 辅助功能 · bvaughn/react-virtualized-auto-sizer笔记：react-window
- Windowing wars: React-virtualized vs. react-window
关联信息
反向链接、本文链接的其他页面和外部资料。
参考资料
GitHub3 条
- bvaughn/react-windowgithub.com/bvaughn/react-window
- bvaughn/react-window#6github.com/bvaughn/react-window/issues/6
- tannerlinsley/react-virtualgithub.com/tannerlinsley/react-virtual
其他外链7 条
- badgen.net/bundlephobia/min/react-virtualizedbadgen.net/bundlephobia/min/react-virtualized
- badgen.net/bundlephobia/min/react-windowbadgen.net/bundlephobia/min/react-window
- blog.logrocket.com/windowing-wars-react-virtualized-vs-react-windowblog.logrocket.com/windowing-wars-react-virtualized-vs-react-window
- codesandbox.io/s/dynamic-size-of-react-window-list-items-64o9p?file=/src/ChatMessage.jscodesandbox.io/s/dynamic-size-of-react-window-list-items-64o9p?file=%2Fsrc%2FChatMessage.js
- medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
- react-location.tanstack.com/comparisonreact-location.tanstack.com/comparison
- www.reddit.com/r/reactjs/comments/885bxa/redux_vs_mobxwww.reddit.com/r/reactjs/comments/885bxa/redux_vs_mobx