首页手记 2020 年你应该知道的 React 库

2020 年你应该知道的 React 库

标签：

React

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

然而对于 React 来说，它的核心并不是完善所有的可选库。这是优势还是劣势取决于你自己。当我从 Angular 切换到 React，我绝对经历了它作为 React 的优势。

只有通过 React，您才能使用函数组件和 props 构建组件驱动的用户界面。它带有一些内置的解决方案，例如，用于本地状态和副作用的 React Hooks。

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

如何开始 React

如果你是一个完全不熟悉 React 的初学者想创建一个 React 项目，加入 React 的世界。有许多工具包项目可以选择，每个项目都试图满足不同的需求。React 社区的现状是通过 Facebook 的 create-react-app(CRA)。它提供了一个零配置的设置，并给你一个开箱即用并且简单的启动和运行的 React 应用程序。所有的工具都对您隐藏起来了，但是最终要由您来更改这些工具。

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

如果您只是想了解这些初学者工具包是如何工作的，那么可以尝试从头开始设置 React 项目。你将从一个基本的 HTML 和 JavaScript 项目开始，然后自己添加 React 和它的支持工具。

如果你想选择一个自定义样板项目，试着缩小你的要求。样板文件应该是最小的，不要试图解决所有问题。它应该针对你的问题。例如，gatsby-Firebase-authentication 样板文件只在 Gatsby.js 中为您提供了完整的 Firebase 身份验证机制，但是其他所有内容都被省略了。

建议：

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 的内置 hooks 都非常适合本地状态管理。当涉及到远程数据的状态管理时，如果远程数据带有 GraphQL 端点，我建议使用 Apollo Client。Apollo Client 的替代方案是 urql 和 Relay。

如果远程数据不是来自 GraphQL 端点，请尝试使用 React 的 Hooks 来管理它。如果不行，像 Redux 或者 MobX/Mobx State tree 这样的解决方案可能会有所帮助。

如果你想了解更多细节，请访问我的综合状态管理反应教程。

推荐：

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

使用 React 路由

路由在 React 中起着重要作用。毕竟，React 可以帮助您实现在客户端处理路由的单页应用程序。当介绍一个复杂的路由的时候，有好几个路由解决方案。最值得推荐的解决方案是 React Router。

在您引入路由以前，您可以先尝试 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>

其次，我想推荐的是被称作为 styled components，作为 React 的 CSS-in-JS 解决方案之一。这个方法是由一个名为 styled-components 的库提供的，它将样式与 JavaScript 共享到 React 组件的旁边:

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

第三，我想推荐 Tailwind CSS 作为一个函数式的 CSS 解决方案:

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 选择:

Ant Design
Chakra UI
Tailwind UI
Semantic UI
Material UI
React Bootstrap 1. React Bootstrap

React 动画

任何 web 应用程序中的动画都是从 CSS 开始的。最终你会发现 CSS 动画并不能满足你的需求。通常开发人员会检查 React Transition Group，这样他们就可以使用 React 组件执行动画。其他著名的 React 动画库有:

react-motion
react-spring
Framer Motion
Animated (React Native)

建议:

React Transition Group

React 可视化和图表库

如果你真的想自己从头开始构建图表，你没办法不去学习 D3 。这是一个底层的可视化库，它为你提供了创建令人惊叹的图表所需的一切。然而，学习 D3 是一个完全不同的冒险，因此许多开发人员只是想选择一个 React 图表库，它可以为他们做任何事情，以换取灵活性。以下是一些流行的解决方案:

nivo
Victory
react-vis
Recharts
Chart Parts

React 中的表单库

在 React 中最流行的表单库是 Formik。它提供了从验证到提交到形成状态管理所需的一切。另外一个选择是 React Hook Form。如果您开始使用更复杂的表单，这两种方法对于 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 代码风格

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

第一种方法是遵循一个被社区所接受的风格指南。一个流行的 Airbnb 开源的React style guide 。即使你没有刻意遵循这些样式指南，但是读一读它们，在 React 中获得常见代码样式的要点是有意义的。

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

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

建议:

ESLint
Prettier

React 认证

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

通常的方法是使用自定义身份验证实现自己的自定义后端应用程序。如果您不想启动自己的身份验证，可以考虑类似 Passport.js 的东西。

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

Firebase
Auth0
AWS Cognito

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

建议:

DIY: Custom Backend
Get it off the shelf: Firebase

React 主机

您可以像其他 web 应用程序一样部署和托管 React 应用程序。如果你想拥有完全的控制权，选择像Digital Ocean这样的。如果你希望有人来处理所有的事情，如果你已经在使用第三方的身份验证/数据库，Netlify 是一个很受欢迎的解决方案，比如 Firebase，你可以检查他们是否也提供主机服务(比如 Firebase Hosting)。您还可以使用 S3 的静态站点与 Cloudfront 一起托管。

React 测试

如果您想深入了解 React 中的测试，请阅读以下内容: How to test components in React。要点如下: 测试 React 应用程序的主干是 Jest。它提供了测试运行程序、断言库和监视(spying)/模拟(mocking)/stubbing 功能，一个全面的测试框架中需要的所有东西。

至少，您可以使用 React-test-renderer 在 Jest 测试中渲染 React 组件。这已经足以用 jest 来执行所谓的快照测试了。快照测试的工作方式如下: 运行测试之后，将创建 React 组件中渲染的 DOM 元素的快照。当您在某个时间点再次运行测试时，将创建另一个快照，用作前一个快照的差异。如果 diff 不完全相同，则 Jest 将报错，您要么必须接受快照，要么必须更改组件的实现。

最终，您会发现自己在使用 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 应用程序的国际化时，您不仅需要考虑翻译，还需要考虑多元化、日期和货币的格式化，以及其他一些事项。以下是最受欢迎的处理该问题的库:

react-i18next
react-intl
LinguiJS
FBT

建议:

react-i18next

React 富文本编辑器

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

Draft.js
Slate

React 中的支付

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

PayPal
Stripe Elements 或 Stripe Checkout

React 中的时间

如果你的 React 应用程序正在处理大量的日期和时区，你应该引入一个库来为你管理这些事情。最受欢迎的库是 moment.js。更轻量级的替代品是 date-fns 和 Day.js。

Reac 桌面应用

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

NW.js
Neutralino.js

React 的移动开发

我想把 React 从网络带到移动设备的首选解决方案仍然是 React Native。如果您是 React Native 开发人员，想要创建一个 Web 应用程序，您应该查看 React Native Web。

REACT VR/AR

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

React 360
react-viro
react-native-arkit

为 React 设计原型

如果您来自 UI/UX 背景，那么您可能希望使用一个工具为新的 React 组件、布局或 UI/UX 概念进行快速原型设计。我以前用过 Sketch，但最近转到了 Figma。尽管我两者都喜欢，但我现在并不后悔使用 Figma。另一个流行的工具是 Framer。

为 React 书写文档

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

Styleguidist
docz
Docusaurus

总结

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