加速 React 开发的 10 种方法

虽然我很喜欢写 React 应用，但我还是不想写。我宁愿早点写完，这样我就可以把时间花在电脑前的沙滩上，或者在电脑里玩电子游戏。本着懒惰的心态，这里有十个加速 React 开发的方法。

1. 使用框架

框架剥夺了开发者的自由度。你的决策更少，因为成千上万的优秀开源开发者已经为你做出了决策。他们的决策十有八九比你做的更好，除非你是 Dan Abramov（如果你是 Dan Abramov，请注意我，前辈）。遵循框架设定的路线图，可以节省时间，编写更一致、更健壮的代码。

我最喜欢的 React 框架是Next.js。它支持 SSR、内置路由、自动代码拆分、CSS-in-JS 支持等等。你甚至可以编写 lambda 表达式，与客户端代码共享业务逻辑（例如类型和验证）。如果你在Vercel上托管 Next.js 应用，只需推送到 GitHub 即可部署一个免费的、可无限扩展的应用程序。

其他优秀的框架包括Gatsby.js和Remix。

即使您决定不使用框架，您至少也应该使用样板生成器，例如create-react-app。

2. 使用 ESLint

我希望你已经在使用ESLint了。没有理由不使用高度可配置的代码，它会在你犯错时提醒你。有两个 ESLint 插件对 React 特别有用（我认为它们是必不可少的）：

3. 使用 Prettier

与 ESLint 类似，你应该使用Prettier，这是一款专业的代码格式化程序。Prettier 可以与大多数编辑器集成，在保存时自动格式化代码，确保代码风格一致。我完全赞成机器人霸主剥夺我们在琐事上发挥创造力的自由。

4. 使用人工智能驱动的自动完成功能

我希望前三个建议并不令人意外。如果你是 2020 年的 JavaScript 开发者，使用框架、ESLint 和 Prettier 都是理所当然的。下一个建议可能还不太引人注目。它是我最喜欢的开发者工具，我会把它推荐给朋友们，以证明我仍然可以与 JS 潮人交往。

完全臣服于前面提到的机器人霸主，使用人工智能驱动的自动完成功能。目前为止，我最喜欢的是TabNine。你可能对这些科技流行语翻白眼，但试试看，然后回复我。你一定会印象深刻的。

5. 增强你的 CLI

超越仅仅增强 JavaScript 能力，深入探索 CLI 工具的奇妙世界。我特别推荐以下几种：

Oh My Zsh：使用数千个有用的函数、助手、插件、主题等扩充您的 Zsh 配置。
Scaffolder：轻松生成样板代码。
ZSH-z：快速跳转到您最近访问过的目录。

6. 使用 React 组件库

除非你所在的大公司已经拥有内部组件库，否则你几乎肯定会想使用一个预先构建好的组件库。我实在受不了自己写一大堆代码，div而p不是无休止地配置Box代码Text。欣赏一下 Chakra UI 的直观优雅（摘自他们的网站）：

import * as React from "react";
import { Box, Image, Flex, Badge, Text } from "@chakra-ui/core";
import { MdStar } from "react-icons/md";

export default function Example() {
  return (
    <Box p="5" maxW="320px" borderWidth="1px">
      <Image borderRadius="md" src="https://bit.ly/2k1H1t6" />
      <Flex align="baseline" mt={2}>
        <Badge colorScheme="pink">Plus</Badge>
        <Text
          ml={2}
          textTransform="uppercase"
          fontSize="sm"
          fontWeight="bold"
          color="pink.800"
        >
          Verified &bull; Cape Town
        </Text>
      </Flex>
      <Text mt={2} fontSize="xl" fontWeight="semibold" lineHeight="short">
        Modern, Chic Penthouse with Mountain, City & Sea Views
      </Text>
      <Text mt={2}>$119/night</Text>
      <Flex mt={2} align="center">
        <Box as={MdStar} color="orange.400" />
        <Text ml={1} fontSize="sm">
          <b>4.84</b> (190)
        </Text>
      </Flex>
    </Box>
  );
}

Chakra UI 是我最喜欢的组件库，而且越来越受欢迎。其他的组件库包括Rebass和Base Web。

7. 使用 CSS-in-JS 库

即使使用组件库，也可能需要编写 CSS。它就像 JavaScript 几乎无法摆脱的兄弟。最好的选择是用 JavaScript 编写 CSS，这样可以将样式范围更紧密地限定在组件内，实现显式依赖，减少级联，并带来其他好处。许多新人已经开始使用Linaria。Linaria 不像其他 CSS-in-JS 库那样需要性能开销，因为它会在构建时提取 CSS 文件，从而实现零运行时。

其他开发人员喜欢Emotion、Styled Components和JSS。

8.使用 Storybook

Storybook允许你快速构建 React 组件原型，并与应用的业务逻辑隔离。你可以模拟不同的 props 配置，以确定组件的渲染方式。Storybook 的一个被低估的优势是它强制执行清晰的架构。我通常会在 Storybook 中构建尽可能多的应用程序，模拟日益复杂的组件甚至页面。当我开始处理业务逻辑时，包装器组件将只负责向我的展示组件提供 props。我的智能组件与我的非智能组件完全分离。如果你还没有读过这篇关于智能组件与非智能组件的经典文章，请阅读它。

9. 不要自己写表单

学习用原生 React 编写表单非常重要。它迫使开发人员识别受控组件和非受控组件之间的区别、主状态管理等等。然而，在编写生产代码时，你几乎肯定会想要使用库。一个好的表单库不仅可以节省你的时间，还可以减少 bug 的发生。

你可能会想：“啊哈，但我想异步验证用户输入”，或者“如果一个输入依赖于另一个输入怎么办？” 不，对于这些以及 99% 的其他用例，都有一个表单库。我推荐Formik，但React Final Form和React Hook Form也是不错的选择。

10. 不要重新发明轮子

React 对懒惰的程序员来说简直是天赐之物。所有最复杂的通用组件都已经写好了！如果你正在编写表格、自动完成组件、动画工具，或者导入 SVG 图标，那就别再写了const Table =，赶紧去找个库吧。以下是我最喜欢的几个库：

Framer Motion：用于动画；
React Table：用于表格；
React Icons：用于图标；
React Draggable：使元素可拖动；
React Autosuggest：用于自动完成；
React Datepicker：用于日期选择。

关于我们

Carrots正在打造一个专为软件工程师打造的招聘平台。您可以连接 GitHub、Stack Overflow 等平台，让您的简历更加丰富。我们的算法会显示您在世界一流人才中的排名，并将您的个人资料推荐给顶尖公司。欢迎访问我们的Telegram频道，获取开发者职位的实时动态。

文章来源：https://dev.to/sewinter/10-ways-to-speed-up-react-development-3111