2020年你应该知道的React库

最新推荐文章于 2024-07-24 17:04:04 发布

这碗花里只有粥

最新推荐文章于 2024-07-24 17:04:04 发布

阅读量533

点赞数

本文链接：https://blog.csdn.net/qq_36381242/article/details/104411975

版权

React状态管理
- React内置的hooks来管理局部状态：useState, useReducer useContext
- Tips
  - 局部状态: React 的 useState, useReducer, useContext Hooks
  - 通过 Graph QL 的远程状态: Apollo Client
  - 通过 REST 的远程状态: React Hooks or Redux/MobX/Mobx State Tree
使用React路由
- 毕竟，React 可以帮助您实现在客户端处理路由的单页应用程序
- Tips
  - React Router
React中的样式库
- 初学者推荐使用内联样式和基本css
- 先研究一下CSS Modules 将其作为CSS-in-CSS解决方案之一受create-react-app的支持
  - 将css文件与React组件文件共存
- 其次 styled components 作为 CSS-in-JS 解决方案之一；一个名为 styled-components 的库提供的，它将样式与 JavaScript 共享到 React 组件的旁边:
- 第三 Tailwind CSS 作为一个函数式的 CSS 解决方案:
- Tips
  - CSS-in-CSS with CSS Modules
  - CSS-in-JS with Styled Components
  - Functional CSS with Tailwind CSS
React UI库
- 如果不想从头开始构建所有必要的 React UI 组件，您可以选择 React UI Library 来完成这项工作
- Tips:
  - Ant Design
  - Chakra UI
  - Tailwind UI
  - Semantic UI
  - Material UI
  - React Bootstrap 1. React Bootstrap
React 动画
- 任何 web 应用程序中的动画都是从 CSS 开始的。最终你会发现 CSS 动画并不能满足你的需求。通常开发人员会检查 React Transition Group，这样他们就可以使用 React 组件执行动画
- Tips:
  - react-motion
  - react-spring
  - Framer Motion
  - Animated (React Native)
  - 建议 React Transition Group
React 可视化和图表库
- 一个底层的可视化库，它为你提供了创建令人惊叹的图表所需的一切
- Tips:
  - nivo
  - Victory
  - react-vis
  - Recharts
  - Chart Parts
React 中的表单库
- 在 React 中最流行的表单库是 Formik。它提供了从验证到提交到形成状态管理所需的一切。另外一个选择是 React Hook Form。如果您开始使用更复杂的表单，这两种方法对于 React 应用程序都是有效的解决方案。
- Tips
  - Formik
  - React Hook Form
React 中的数据获取库
- Tips
  - 浏览器的本地 fetch API
  - axios
  - Apollo Client
React 类型检查
- Tips
  - 在较大的 React 应用程序中，TypeScript 为整个应用程序增加了类型安全性，而不是使用 React PropTypes。
  - TypeScript
React 代码风格
- Tips:
  - ESLint
  - Prettier 它是一个强制的代码格式化程序(最流行)
React 认证希望引入具有注册、登录和退出功能的身份验证
- 如果你根本不想关心后端，以下三种解决方案可能适合你:
  - Firebase
  - Auth0
  - AWS Cognito
- 如果您正在寻找身份验证 + 数据库的一体化解决方案，请坚持使用 Firebase 或 AWS。
  - 建议:
  - DIY: Custom Backend
  - Get it off the shelf: Firebase
React 主机
React 测试
- 测试 React 应用程序的主干是 Jest。它提供了测试运行程序、断言库和监视(spying)/模拟(mocking)/stubbing 功能，一个全面的测试框架中需要的所有东西。
- Tips
  - Unit/Integration/Snapshot Tests: Jest + React Testing Library
  - E2E Tests: Cypress 2e test: Cypress
用于 React 的工具库
- Tips
  - JavaScript Javascript 为处理数组、对象、数字、对象和字符串提供了大量内置功能
  - Lodash 您可能需要选择一个实用程序库来提供更详细的功能。您甚至可能希望在将这些实用函数链接起来时更加灵活，甚至可以将它们动态地组合在一起。这时，您将引入一个实用程序库: Lodash 或 Ramda
react 和不可变的数据机构
React 国际化
- Tips
  - react-i18next (更推荐)
  - react-intl
  - LinguiJS
  - FBT
React 富文本编辑器
- Tips
  - Draft.js
  - Slate
  - CodeMirror 自动补全插件
React 中的支付
- Tips:
  - PayPal
  - Stripe Elements 或 Stripe Checkout
React 中的时间
- Tips
  - moment.js （流行）
  - date-fns 和 Day.js （轻量）
Reac 桌面应用
- Tips
  - Electron (首选)
  - NW.js
  - Neutralino.js
React 的移动开发
- React Native
REACT VR/AR
- Tips
  - React 360
  - react-viro
  - react-native-arkit
为 React 设计原型
- 使用一个工具为新的 React 组件、布局或 UI/UX 概念进行快速原型设计
  - Tips
    - Sketch
    - Figma
    - Framer
为 React 书写文档
- 负责为你的软件、 UI 库或者其他东西编写文档，那么你可以使用一些简洁的 React 文档工具
- Tips:
  - Storybook
  - Styleguidist
  - docz
  - Docusaurus