算法|web前端 - 15个NPM 包解决16个React问题

算法|web前端 - 15个NPM 包解决16个React问题

01、全局状态管理
在 99% 的应用程序中 , 组件之间共享状态是强制性的 。 并且有一些很好的解决方案 - 本地和外部 。 受到推崇的如果你问我一个解决方案 , 我会说 Redux 。 不是因为它是最好的 , 而是因为它是最实用的 。 许多公司已经在使用它 , 您将不得不在某个时候使用它 。 redux 与 react-redux此外 , 生态系统也很棒 。 您几乎可以找到任何问题的解决方案 。 一些与 redux 一起使用的很棒的库是:

  • redux-thunk -> 用于处理异步操作 。
  • redux-persist -> 用于在本地存储数据(离线支持) 。
  • reselect -> 用于更快地存储查询 。
备择方案
  • context -> 内置于 React 。 适合简单使用 。 不利于性能 。 特别是如果您有大量变化的数据 。
  • recoil -> 旨在解决特定问题 。 不适用于所有用例 。 您可以先弄清楚它后 , 在考虑是否使用 。
  • mobx -> 遵循观察者模式 。 适合反应式编程 。 不应在任何新项目中使用 。
02、服务器状态管理如果您的应用程序严重依赖某些外部数据源 , 那么管理该数据(缓存、预取等)对于性能至关重要 。 受到推崇的我个人是 react-query 的超级粉丝 , 还有很多像我一样的人 。 它就像魔术一样工作 。
  • recat-query
它处理缓存陈旧数据 , 以及更多开箱即用的功能 。 它简单、强大且可配置!备选方案游戏中还有另一个名为 SWR 的玩家 。 这是一个类似于 React Query 的库 。
  • swr
【算法|web前端 - 15个NPM 包解决16个React问题】这个库的主要好处是它是由 Vercel 构建的 。 他们是创建 NextJS 的人 。 因此 , 在使用 NextJS 时 , 您可以期待更好的性能 。 03、Scaffolding从头开始创建 React 应用程序很复杂 。 设置 Webpack、Bable 等可能令人生畏!受到推崇的NextJS 是我从头开始创建 React 应用程序时的选择 。 它被称为全栈 React 框架 。
  • NextJS
在文档中 , 它说 , Next.js 为您提供生产所需的所有功能的最佳开发人员体验:混合静态和服务器渲染、TypeScript 支持、智能捆绑、路由预取等 。 无需配置 。 最重要的特点是它开箱即用的 SEO 支持 。 这很棒!你也可以在 React 中做 SEO 。 但它并不像 Next 那样简单 。 备选方案如果您开始使用 React 或构建一些基本项目 , 那么您还有其他选择 。
  • create-react-app -> 构建单页应用程序 。 适合初学者 。
  • gatsby -> 构建面向内容的静态网站 。 不适用于其他用例 。
04、表格处理90% 的 Web 应用程序都有处理表单的需求 , 而表单的输入是一个很大的痛苦 。 但我们有一些好消息!受到推崇的React hook 表单是用于表单处理的最新和最好的(据我说 :P )库 。 它非常高效且灵活 。
  • react-hook-form
它对一些外部设计库也有很好的支持 , 比如 material-ui 和 ant-design 。 备选方案这个领域有一些很好的选择 。
  • Formik -> Formik 带有久经考验的解决方案 , 用于输入验证、格式化、屏蔽、数组和错误处理 。
  • redux-form -> 不要使用它 。 它真的会损害性能 。
05、HTTP 调用在现代世界中 , 几乎所有网站都依赖于一些外部数据源 。 所以进行 HTTP 调用非常简单 。 受到推崇的Fetch 是进行 HTTP 调用的推荐方式 。