2020年你应该知道的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 }) => 
  
  
  
 
  
  
  
  {title} 
  
  
  

 
 
 

虽然内联样式可以用 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 }) => 
  
  
  
   
  
  
  
    {title} 
  
  
  
  
 
 
 

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

 
 
 

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

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

 
 
 

  
  
  
const Headline = ({ title }) => 
  
  
  
   
  
  
  
    {title} 
  
  
  
  
 
 
 

是否选择 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 }) => 
  
  
  
  
 
  
  
  
    {list.map(item => {item.title}