2023年提升您React项目的五个库

https://github.com/TanStack/query,图3,简而言之，React Query 可以使在 React 中获取数据体验更好。其是一个处理异步服务器状态的状态管理库，通过提供了一个异步函数来获取数据。此外，useQuery hook提供了一堆有用的实用程序来处理异步函数：,这些特性对大型项目具有较大价值。一般情况下，项目中需要在全局共享获取结果、在数据更改时刷新这些结果、触发获取数据等等。使用 React Query 时，很多情况都不需要自己再进行处理。缓存意味着您可以在应用程序的任何位置调用useQuery hook，并且数据在所有出现的位置之间共享。,https://github.com/pmndrs/zustand,图片1,在React开发的程序中肯定会涉及到组件间状态共享，我们可以通过props来实现，但是这并不利于代码的维护，后来React提供了Context Providers来进行组件间状态共享，但是对于复杂的全局存储，Context可能会变的很繁琐，有可能导致性能问题。为了更好的使用Context，可以使用Zustand，其提供了一个极其简单的API来创建一个store，可以从应用程序的任何位置访问该store并读取和写入值。,https://github.com/framer/motion,图5,动画是赋予React应用程序现代和精致感的最佳方式之一。但这并不容易。使用CSS动画很棘手，可能会导致大量的代码。相比之下，Framer Motion提供了一个强大但简单的API来创建自定义动画。它与React生态系统原生集成，配有一组hooks和组件。例如，将圆形平滑的变换为正方形：,数组中的每个值代表相应属性的一个关键帧。然后动画会循环播放。当然，您可以做的不仅仅是使用 Framer Motion 定义关键帧。还可以动画化布局的更改、处理手势或根据滚动进行动画。,https://github.com/joe-bell/cva,图片2,以声明方式描述每个参数值的按钮样式，利用CVA 会找出正确的样式组合。我们甚至可以指定默认变量使某些属性成为可选的。,https://github.com/radix-ui/primitives,图片,如果您喜欢构建完全自定义样式的界面，但不想处理从头开始开发可访问 UI 组件的复杂问题，那么 Radix UI 适合您。该库附带了各种常用的 UI 组件。例如对话框、复选框和下拉菜单。,虽然组件包含所有逻辑和交互，但它们没有任何样式。这意味着完全可以自己控制组件的样式。这使能够构建一个与其它网站不同的真正定制的UI系统。在拥有完全控制样式的同时，Radix为您完成所有其他工作。所有组件都是完全可访问的，可以通过键盘导航等方式进行操作。,如果您喜欢Radix的灵活性，但不想从头开始设计所有样式，那么shadcn/ui就是您应该查看的内容。它是一个完全模块化的组件库，构建在Radix和Tailwind之上。可以将代码直接复制到项目中并按照自己的喜好进行修改，而不是安装NPM包。,参考文章：https://livecycle.io/blogs/react-libraries/