2020说说关于React的那些事_坚果的个人博客-Nut

坚果的个人站

2020说说关于React的那些事 / Bug

3月前 阅读 / 241 来源 / 转载 文 / 坚果

React 已经诞生很久了,自从它诞生开始,围绕组件驱动形成了一个非常全面的生态,但是来自其他编程语言或者框架的开发人员很难找到要构建一个 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 的替代方案是 urqlRelay

如果远程数据不是来自 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 选择:


React 动画

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

建议:

  • React Transition Group


React 可视化和图表库

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


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 或 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 富文本编辑器

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


React 中的支付

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


React 中的时间

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


Reac 桌面应用

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


React 的移动开发

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


REACT VR/AR

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


为 React 设计原型

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


为 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 应用程序设置。


5

评论列表
共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~