2020 年你应该知道的 React 库

React 已经诞生很久了，自从它诞生开始，围绕组件驱动形成了一个非常全面的生态，但是来自其他编程语言或者框架的开发人员很难找到要构建一个 React 系统的所有组件。如果你是来自于像 Angular 这样的框架的开发者，你可能已经习惯了框架包含了所需要的所有功能，

下面的文章将向您提供一些自己总结的方法，以便从补充库中进行选择，从而构建一个全面的 React 应用程序。

如何开始 React

如果你已经熟悉 React，你可以选择它流行的入门工具包之一: Next.js 和 Gatsby.js。 这两个框架都建立在 React 之上，因此你应该已经熟悉 React 的基本原理。 Next.js 用于服务器端渲染(如动态 web 应用程序) ，Gatsby.js 用于静态站点生成(如博客、登陆页面)。

建议：

• create-react-app for React beginners/advanced
• Gatsby.js for static websites in React
• Next.js for server-side rendered React
• custom React project to understand the underlying tools

React 状态管理

React 带有内置的 hooks 来管理局部状态: useState、 useReducer 和 useContext。 所有这些都可以在 React 中用于复杂的本地状态管理。 它甚至可以模拟 Redux(Redux 是 React 的一个流行的状态管理库)。

推荐：

• 局部状态: React 的 useState, useReducer, useContext Hooks
• 通过 Graph QL 的远程状态: Apollo Client
• 通过 REST 的远程状态: React Hooks or Redux/MobX/Mobx State Tree

使用 React 路由

建议:

• React Router

React 中的样式库

虽然关于 React 样式处理有很多解决方法，但是作为一个 React 初学者，刚开始使用内联样式和基本 CSS 是很好的。

import './Headline.css';
const Headline = ({ title }) =>
<h1 className="headline" style={{ color: 'blue' }}>
  {title}
</h1>

虽然内联样式可以用 JavaScript 在 React 中动态地添加样式，但是一个外部的 CSS 文件可以拥有 React 应用程序的所有剩余样式。 一旦您的应用程序增长，还有许多其他样式方案选择。

首先，我建议您研究一下 CSS Modules，将其作为 CSS-in-CSS 解决方案之一。 CSS Modules 受到 create-react-app 的支持，并为您提供了将 CSS 封装到模块中的方法。 这样，它就不会意外地泄漏到其他人的样式中。 尽管应用程序的某些部分仍然可以共享样式，但其他部分不必访问它。 在 React 中，CSS Modules 通常将 CSS 文件与 React 组件文件共存。

import styles from './style.css';
const Headline = ({ title }) =>
  <h1 className={styles.headline}>
    {title}
  </h1>

import styled from 'styled-components';
const BlueHeadline = styled.h1`
  color: blue;
`;
const Headline = ({ title }) =>
  <BlueHeadline>
    {title}
  </BlueHeadline>

const Headline = ({ title }) =>
  <h1 className="text-blue-700">
    {title}
  </h1>

是否选择 CSS in CSS、 CSS in js 或函数式 CSS 取决于您。 所有的策略都适用于大型的 React 应用程序。

建议:

• CSS-in-CSS with CSS Modules
• CSS-in-JS with Styled Components
• Functional CSS with Tailwind CSS

React UI 库

如果您不想从头开始构建所有必要的 React UI 组件，您可以选择 React UI Library 来完成这项工作。 所有这些都有一些基本的组件，比如按钮，下拉菜单，对话框和列表。 有很多 UI 库可供 React 选择:

React 动画

• (React Native)

建议:

• React Transition Group

React 可视化和图表库

React 中的表单库

建议:

• Formik
• React Hook Form

React 中的数据获取库

很快，您就必须向远程 API 发出请求，以便在 React 中获取数据。 现代浏览器带有本地获取 API 来执行异步数据请求:

function App() {
  React.useEffect(() => {
    const result = fetch(my/api/domain)
      .then(response => response.json())
      .then(result => {
        // do success handling
        // e.g. store in local state
      });
    setData(result.data);
  });
  return (
    ...
  );
}

基本上，你不需要添加任何其他库来完成这项工作。 但是，有时候不仅需要提供复杂的异步请求，还需要它们具有更强大的功能，而且只是一个轻量级的库。 我推荐的这些库之一称为 axios。 当您的应用程序增大时，可以使用它来代替本地获取 API。

如果您有足够的时间来处理 GraphQL API，我建议您使用 Apollo Client。 可供选择的 GraphQL 客户端将是 urql 或 Relay。

建议:

• 浏览器的本地 fetch API
• axios
• Apollo Client

React 类型检查

幸运的是 React 有自己的类型检查能力。 使用 PropTypes，你可以为你的 React 组件定义传入的 props。 无论何时向组件传递了错误的类型，在运行应用程序时都会收到错误消息。 但是这种形式的类型检查只应该用于较小的应用程序。

import PropTypes from 'prop-types';
const List = ({ list }) =>
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>
List.propTypes = {
  list: PropTypes.array.isRequired,
};

在较大的 React 应用程序中，TypeScript 为整个应用程序增加了类型安全性，而不是使用 React PropTypes。 当使用这样的类型检查器时，您可以在开发期间获得错误。 您不必启动应用程序就可以找到本可以通过这种类型检查防止的 bug。 这样一来，类型检查器就可以提高您的开发人员体验，避免首先引入 bug。

建议:

• TypeScript

React 代码风格

对于代码风格，基本上有三个选项可以用的。

第二种方法是使用 linter，比如 ESLint。 虽然样式指南只给出建议，但是 linter 在应用程序中强制执行这个建议。 例如，你可以要求遵循流行的 Airbnb 样式指南，你的 IED/编辑器会告诉你每一个错误。

第三种也是最流行的方法是使用 Prettier。 它是一个强制的代码格式化程序。 您可以将其集成到编辑器或 IDE 中，使其在每次保存文件时格式化您的代码。 也许它并不总是符合您的口味，但至少您不必再担心自己或团队代码库中的代码格式。 虽然 Prettier 不能取代 ESLint，但是它与 ESLint 的集成非常好。

建议:

• ESLint
• Prettier

React 认证

在较大的 React 应用程序中，您可能希望引入具有注册、登录和退出功能的身份验证。 此外，密码重置和密码更改功能往往是需要的。 这些特性远远超出了 React，因为后端应用程序为您管理这些事情。

如果你根本不想关心后端，以下三种解决方案可能适合你:

如果您正在寻找身份验证 + 数据库的一体化解决方案，请坚持使用 Firebase 或 AWS。

建议:

• DIY: Custom Backend
• Get it off the shelf: Firebase

React 主机

React 测试

最终，您会发现自己在使用 Enzyme 或 React Testing Library (这两个都在 Jest 测试环境中使用)来进行更详细的测试功能集。 这两个库使得在 HTML 元素上呈现组件和模拟事件成为可能。 然后，Jest 用于 DOM 节点上的断言。

如果您正在为 React-to-end (E2E)测试寻找测试工具，Cypress 是最受欢迎的选择。

建议:

• Unit/Integration/Snapshot Tests: Jest + React Testing Library
• E2E Tests: Cypress 2e test: Cypress

用于 React 的工具库

Javascript 为处理数组、对象、数字、对象和字符串提供了大量内置功能。 React 中最常用的 JavaScript 内置功能之一是内置 map() 数组。 为什么？ 因为您总是必须呈现组件中的列表。 由于 JSX 是 HTML 和 JavaScript 的混合物，所以您可以使用 JavaScript 在数组上进行映射并返回 JSX。 使用 React 创建列表组件变得简单:

const List = ({ list }) =>
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>

但是，您可能需要选择一个实用程序库来提供更详细的功能。 您甚至可能希望在将这些实用函数链接起来时更加灵活，甚至可以将它们动态地组合在一起。 这时，您将引入一个实用程序库: Lodash 或 Ramda。 对于每一个 JavaScript 开发者来说，Lodash 是一个更加实际的库，而 Ramda 在函数式编程中有一个强大的核心。 请记住，现代 JavaScript 提供了很多开箱即用的特性，现在使用实用程序库的必要性已经降低了。

建议:

• JavaScript
• Lodash

react 和不可变的数据机构

原生 JavaScript 提供了大量内置工具来处理数据结构，就像它们是不可变的一样。 但是，如果您和您的团队认为有必要实施不可变的数据结构，最流行的选择之一是 Immer。 就我个人而言，我不使用它，但是任何时候有人问到 JS 中的不变性(immutability)，大家都会指出 Immer，并且这可以加上 redux 或 React hooks。

React 国际化

建议:

• react-i18next

React 富文本编辑器

当涉及到在 React 中的富文本编辑器时，我只能想到以下内容，因为我没有在 React 中使用任何其他内容:

React 中的支付

和其他网络应用一样，最常见的支付提供商是 Stripe 和 PayPal。 两者都可以整齐地集成到 React 中。

• 或

React 中的时间

Reac 桌面应用

Electron 是跨平台桌面应用程序的首选框架。 不过，也有其他选择，例如:

React 的移动开发

REACT VR/AR

实话说，我们很有可能用 React 深入虚拟现实或者增强现实中，我没有使用过这些库中的任何一个，但是它们是我在谈到 React AR/VR 时从大脑闪过的就是：

为 React 设计原型

为 React 书写文档

如果你负责为你的软件、 UI 库或者其他东西编写文档，那么你可以使用一些简洁的 React 文档工具。 我已经广泛地使用了 Storybook，我可以说他非常好用，但是我也听说了其他解决方案的好处:

总结

所以最终，React 生态系统可以看作是一个 React 的框架，但它保持灵活性。 它是一个灵活的框架，您可以自己决定选择哪些库。 您可以从小型开始，只添加库来解决特定的问题。 当应用程序增长时，您可以沿途扩展构建块。 否则你可以通过使用普通的 React 来保持轻量级。 因此，这里再次列出了可以补充 React 作为应用程序关于不同项目大小的核心的库。 请记住，这个列表是我的个人看法，我也渴望得到你的反馈。

小型应用程式

• 样板: create-react-app
• 样式库: basic CSS and inline style
• 异步请求: fetch or axios
• 代码风格: 无
• 类型检查: 无
• 状态管理: React Hooks
• 路由: 无 or React Router
• 身份验证: Firebase
• 数据库: Firebase
• UI 库: none
• 表单库: 无
• 测试库: Jest
• 实用程序库: JavaScript
• 国际化: react-i18next
• React 桌面: Electron

中型应用

• 样板文件: Next.js or Gatsby.js
• 样式库: CSS Modules or Styled Components
• 异步请求: fetch or axios
• 代码风格: Prettier，ESLint
• 类型检查: 无 或 TypeScript
• 状态管理: React Hooks and/or Apollo
• 路由: React Router
• 身份验证: Firebase
• 数据库: Firebase
• Ui 库: none 或 UI 组件库
• 表单库: none 或 Formik 或 React Hook Form
• 测试库: Jest with React Testing Library
• 实用程序库: JavaScript
• 国际化: react-i18next
• React 桌面: Electron

大型应用程序

• 样板文件: Next.js, Gatsby.js, custom setup
• 样式库: CSS Modules or Styled Components
• 异步请求: axios 或 Apollo Client
• 代码风格: Prettier，ESLint
• 类型检查: TypeScript
• 状态管理: React Hooks and/或者 Apollo/Redux/MobX
• 路由: React Router
• 认证: Node.js 服务 + Passport.js
• 数据库: 自己用SQL/NoSQL DB 提供 Node.js 服务
• Ui 库: UI 组件库或者您自己的 UI 组件
• 表单库:none 或者 Formik 或者 React Hook Form
• 测试库: Jest with React Testing Library and Cypress
• 实用程序库: JavaScript 的 api，Lodash
• 国际化: react-i18next
• React 桌面: Electron

以前的建议是个人的。 您可以为理想的 React 应用程序选择自己的灵活框架。 每一个“理想”的 React 设置都是主观的，取决于开发人员和项目的需求。 毕竟，没有理想的 React 应用程序设置。

欢迎关注个人公众号「前端桃园」，每天推送精品前端文章