React 最佳实践在 2022 年提升您的游戏水平

已发表: 2022-12-09

在构建 Web 应用程序时，React 仍然是用于创建用户界面的最受欢迎的库之一。 它被许多公司广泛使用，并拥有一个活跃的社区。

作为一名 React 开发人员，了解库的工作原理并不是构建用户友好、易于扩展和维护的项目所需的唯一内容。

还需要了解某些约定，这将使您能够编写干净的 React 代码。 这不仅可以帮助您更好地为用户服务，还可以让您和从事该项目的其他开发人员更轻松地维护代码库。 正在处理你的下一个 React 项目？ 学习编写干净的 React 代码是改变游戏规则的力量从这里开始 ️ 点击推文

在本教程中，我们将首先讨论 React 开发人员面临的一些常见挑战，然后深入探讨一些您可以遵循的最佳实践，以帮助您以更高效的方式编写 React 代码。

让我们开始吧！

React 开发者面临的挑战

在本节中，我们将讨论 React 开发人员在构建 Web 应用程序期间和之后将面临的一些主要挑战。

您将在本节中看到的所有挑战都可以通过遵循最佳实践来避免，我们将在稍后详细讨论。

我们将从影响初学者的最基本问题开始。

反应的先决条件

React 开发人员面临的主要挑战之一是了解该库的工作原理以及使用它的先决条件。

在学习 React 之前，您需要了解几件事。 由于 React 使用 JSX，因此必须了解 HTML 和 JavaScript。 当然，您还应该了解 CSS 或用于设计 Web 应用程序的现代 CSS 框架。

特别是，在深入研究 React 之前，您应该了解一些核心 JavaScript 概念和功能。 其中一些主要属于 ES6，包括：

  • 箭头函数
  • 休息操作员
  • 传播算子
  • 模块
  • 解构
  • 数组方法
  • 模板文字
  • 承诺
  • let和const变量

上面列出的 JavaScript 主题将帮助您作为初学者了解 React 的工作原理。

您还将了解 React 中的新概念，例如：

  • 成分
  • 建兴兴业
  • 状态管理
  • 道具
  • 渲染元素
  • 事件处理
  • 条件渲染
  • 列表和键
  • 表单和表单验证
  • 挂钩
  • 造型

深入了解 React 概念和使用该库的先决条件将帮助您有效地利用其功能。

但是不要让这压倒你。 通过不断的实践和学习，你可以快速掌握如何使用 React 构建出色的项目。 这类似于学习一门新的编程语言——只是需要一些时间和练习来理解。

状态管理

在 React 中更新变量的状态/值与使用 vanilla JavaScript 的方式不同。

在 JavaScript 中，更新变量就像使用等于运算符 ( = ) 为其分配新值一样简单。 这是一个例子：

 var x = 300; function updateX(){ x = 100; } updateX(); console.log(x); // 100

在上面的代码中，我们创建了一个名为x的变量，其初始值为300 。

使用等于运算符，我们为其分配了一个新值100 。 这是在updateX函数中编写的。

在 React 中，更新变量的状态/值的方式不同。 就是这样：

 import { useState } from 'react'; function App() { const [x, setX] = useState(300) let updateX =()=>{ setX(100); } return ( <div className="App"> <h1>{x}</h1> <button onClick={updateX}>Update X</button> </div> ); } export default App;

在 React 中更新变量的状态时，您可以使用useState Hook。 使用这个Hook需要注意三点：

  • 变量名
  • 更新变量的函数
  • 变量的初始值/状态

在我们的示例中， x是变量的名称， setX是更新x值的函数，而x的初始值（ 300 ）作为参数传递给useState函数：

 const [x, setX] = useState(300)

为了更新x的状态，我们使用了setX函数：

 import { useState } from 'react'; let updateX =()=>{ setX(100); }

因此updateX函数调用setX函数，然后将x的值设置为100 。

虽然这似乎非常适合更新变量的状态，但它会增加非常大的项目中代码的复杂性。 大量的 State Hooks 使得代码很难维护和理解，尤其是当你的项目规模扩大时。

使用 State Hook 的另一个问题是创建的这些变量不会在组成您的应用程序的不同组件之间共享。 您仍然必须使用 Props 将数据从一个变量传递到另一个变量。

对我们来说幸运的是，有一些库可以在 React 中有效地处理状态管理。 它们甚至允许你创建一个变量一次，然后在你的 React 应用程序中的任何地方使用它。 其中一些库包括 Redux、Recoil 和 Zustand。

选择第三方库进行状态管理的问题在于，您将被迫学习与您在 React 中已经学过的内容不同的新概念。 例如，Redux 以拥有大量样板代码而著称，这让初学者难以掌握（尽管 Redux Toolkit 已解决此问题，与 Redux 相比，它可以让您编写更少的代码）。

可维护性和可扩展性

随着产品的用户需求不断变化，总是需要对构成产品的代码进行更改。

当团队不容易维护代码时，通常很难扩展代码。 在编写代码时遵循不良做法会导致此类困难。 它们一开始似乎工作得很好，给了你想要的结果，但任何“暂时”有效的东西对你项目的未来和发展来说都是低效的。

在下一节中，我们将介绍一些有助于改进 React 代码编写方式的约定。这也将帮助您在与专业团队合作时更好地协作。

反应最佳实践

在本节中，我们将讨论编写 React 代码时要遵循的一些最佳实践。 让我们开始吧。

1.保持清晰的文件夹结构

文件夹结构可帮助您和其他开发人员了解项目中使用的文件和资产的排列方式。

凭借良好的文件夹结构，可以轻松地四处导航，节省时间并有助于避免混淆。 文件夹结构因每个团队的偏好而异，但这里有一些 React 中常用的文件夹结构。

按功能或路线对文件夹进行分组

根据路径和功能对文件夹中的文件进行分组有助于将有关特定功能的所有内容都集中在一个空间中。 例如，如果您有一个用户仪表板，您可以将与仪表板相关的 JavaScript、CSS 和测试文件放在一个文件夹中。

这是一个例子来证明这一点：

 dashboard/ index.js dashboard.css dashboard.test.js home/ index.js Home.css HomeAPI.js Home.test.js blog/ index.js Blog.css Blog.test.js

如上所示，应用程序的每个核心功能都将其所有文件和资产存储在同一个文件夹中。

分组相似文件

或者，您可以将相似的文件分组在同一文件夹中。 您还可以为 Hooks、组件等创建单独的文件夹。 看看这个例子：

 hooks/ useFetchData.js usePostData.js components/ Dashboard.js Dashboard.css Home.js Home.css Blog.js Blog.css

编码时不必严格遵循这些文件夹结构。 如果您有特定的方式来订购您的文件，那就去做吧。 只要您和其他开发人员清楚地了解文件结构，您就可以开始了！

2.制定结构化进口订单

随着您的 React 应用程序不断增长，您必然会进行额外的导入。 导入的结构在帮助您了解组件的构成方面大有帮助。

作为惯例，将类似的实用程序组合在一起似乎效果很好。 例如，您可以将外部或第三方进口与本地进口分开分组。

看看下面的例子：

 import { Routes, Route } from "react-router-dom"; import { createSlice } from "@reduxjs/toolkit"; import { Menu } from "@headlessui/react"; import Home from "./Home"; import logo from "./logo.svg"; import "./App.css";

在上面的代码中，我们首先将第三方库组合在一起（这些是我们必须事先安装的库）。

然后我们导入我们在本地创建的文件，如样式表、图像和组件。

为了简单易懂，我们的示例没有描述非常大的代码库，但请记住，与这种导入格式保持一致将有助于您和其他开发人员更好地理解您的 React 应用程序。

如果适合您，您可以根据文件类型进一步对本地文件进行分组——也就是说，将组件、图像、样式表、挂钩等分别分组在本地导入下。

这是一个例子：

 import Home from "./Home"; import About from "./About" import Contact from "./Contact" import logo from "./logo.svg"; import closeBtn from "./close-btn.svg" import "./App.css"; import "Home.css"

3.遵守命名约定

命名约定有助于提高代码的可读性。 这不仅适用于组件名称，甚至适用于您的变量名称，一直到您的 Hooks。

React 文档没有提供任何正式的组件命名模式。 最常用的命名约定是 camelCase 和 PascalCase。

PascalCase 主要用于组件名称：

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

上面的组件被命名为StudentList ，它比Studentlist或studentlist更具可读性。

另一方面，camelCase 命名约定主要用于命名变量、Hooks、函数、数组等：

 & const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {} const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {}

4.使用短绒

linter 工具有助于提高代码质量。 ESlint 是 JavaScript 和 React 最流行的 linter 工具之一。 但这对提高代码质量有何帮助呢？

linter 工具有助于保持代码库的一致性。 当使用像 ESLint 这样的工具时，您可以设置希望从事该项目的每个开发人员遵循的规则。 这些规则可能包括使用双引号而不是单引号的要求、箭头函数周围的大括号、特定的命名约定等等。

该工具会观察您的代码，然后在违反规则时通知您。 违反规则的关键字或行通常会用红色下划线标出。

由于每个开发人员都有自己的编码风格，因此 linter 工具可以帮助实现代码统一性。

Linter 工具还可以帮助我们轻松修复 bug。 我们可以看到拼写错误、已声明但未使用的变量以及其他此类功能。 其中一些错误可以在您编写代码时自动修复。

大多数代码编辑器都内置了像 ESLint 这样的工具，因此您可以随时随地获得 linter 功能。 您还可以对其进行配置以满足您的编码要求。

5. 使用片段库

在活跃的社区中使用框架的好处在于可以使用正在创建的工具来简化开发。

片段库可以通过提供开发人员经常使用的预构建代码来加快开发速度。

一个很好的例子是 ES7+ React/Redux/React-Native snippets 扩展，它有很多有用的命令来生成预构建代码。 例如，如果您想在不输入所有代码的情况下创建一个 React 函数式组件，那么使用该扩展您只需输入rfce并按Enter即可。

上面的命令将继续生成一个名称与文件名相对应的功能组件。 我们使用 ES7+ React/Redux/React-Native 片段扩展生成了以下代码：

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

另一个有用的片段工具是 Tailwind CSS IntelliSense 扩展，它简化了使用 Tailwind CSS 设置网页样式的过程。 该扩展可以通过建议实用程序类、语法突出显示和 linting 功能来帮助您自动完成。 您甚至可以在编码时看到颜色的样子。

6.结合CSS和JavaScript

在处理大型项目时，为每个组件使用不同的样式表文件会使您的文件结构庞大且难以导航。

这个问题的一个解决方案是结合你的 CSS 和 JSX 代码。 您可以为此使用 Tailwind CSS 和 Emotion 等框架/库。

以下是使用 Tailwind CSS 的样式：

 <p className="font-bold mr-8">resource edge</p>

上面的代码为段落元素提供了粗体字体，并在右侧添加了一些边距。 我们可以使用框架的实用程序类来做到这一点。

以下是使用 Emotion 设置元素样式的方法：

 <h1 css={css` color: black; font-size: 30px; `} > Hello World! </h1>

7.限制组件创建

React 的核心特性之一是代码的可重用性。 您可以创建一个组件并尽可能多次地重用其逻辑，而无需重写该逻辑。

为停机和 WordPress 问题苦苦挣扎？ Kinsta 是旨在节省您时间的托管解决方案！ 查看我们的功能

考虑到这一点，您应该始终限制创建的组件数量。 不这样做会使文件结构膨胀，其中包含本来不应存在的不必要文件。

我们将使用一个非常简单的示例来演示这一点：

 function UserInfo() { return ( <div> <h1>My name is Ihechikara.</h1> </div> ); } export default UserInfo

上面的组件显示了用户的名称。 如果我们要为每个用户创建一个不同的文件，我们最终会得到不合理数量的文件。 （当然，我们使用用户信息是为了简单起见。在现实生活中，您可能会处理不同类型的逻辑。）

为了使我们的组件可重用，我们可以使用 Props。 就是这样：

 function UserInfo({userName}) { return ( <div> <h1>My name is {userName}.</h1> </div> ); } export default UserInfo

之后，我们可以导入这个组件并根据需要多次使用它：

 import UserInfo from "./UserInfo"; function App() { return ( <div className="App"> <UserInfo userName={"Ihechikara"} /> <UserInfo userName={"John"} /> <UserInfo userName={"Jane"} /> </div> ); } export default App;

现在我们有UserInfo组件的三个不同实例，它们来自在一个文件中创建的逻辑，而不是为每个用户创建三个单独的文件。

8.实施延迟加载

随着 React 应用程序的增长，延迟加载非常有用。 当您拥有庞大的代码库时，网页的加载时间会变慢。 这是因为每次都必须为每个用户加载整个应用程序。

“延迟加载”是用于各种实现的术语。 在这里，我们将其与 JavaScript 和 React 联系起来，但您也可以实现图像和视频的延迟加载。

默认情况下，React 会捆绑并部署整个应用程序。 但是我们可以使用延迟加载（也称为代码拆分）来更改此行为。

基本上，您可以限制在特定点加载应用程序的哪个部分。 这是通过拆分捆绑包并仅加载与用户要求相关的捆绑包来实现的。 例如，您可以首先仅加载用户登录所需的逻辑，然后仅在用户成功登录后才加载用户仪表板的逻辑。

9. 使用可重复使用的钩子

React 中的钩子让您可以利用 React 的一些附加功能，例如与组件的状态交互以及运行与组件中某些状态更改相关的后效。 我们可以在不编写类组件的情况下完成这一切。

我们还可以使 Hooks 可重用，这样我们就不必在使用它们的每个文件中重新输入逻辑。 我们通过创建可以在应用程序中的任何位置导入的自定义 Hooks 来实现这一点。

在下面的示例中，我们将创建一个 Hook 用于从外部 API 获取数据：

 import { useState, useEffect } from "react"; function useFetchData(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setData(data)) .catch((err) => console.log(`Error: ${err}`)); }, [url]); return { data }; } export default useFetchData;

我们已经创建了一个 Hook 用于从上面的 API 中获取数据。 现在它可以导入到任何组件中。 这节省了我们在必须获取外部数据的每个组件中键入所有逻辑的压力。

我们可以在 React 中创建的自定义 Hooks 的类型是无限的，所以如何使用它们取决于你。 请记住，如果它是一个必须在不同组件之间重复的功能，那么您绝对应该使其可重用。

10.记录和管理错误

在 React 中有多种处理错误的方法，例如使用错误边界、try 和 catch 块或使用外部库（如react-error-boundary 。

React 16 中引入的内置错误边界是类组件的功能，因此我们不会讨论它，因为建议您使用功能组件而不是类组件。

另一方面，使用try和catch块只适用于命令式代码，而不适用于声明式代码。 这意味着在使用 JSX 时它不是一个好的选择。

我们最好的建议是使用像 react-error-boundary 这样的库。 这个库提供了可以包裹在你的组件周围的功能，这将帮助你在你的 React 应用程序被渲染时检测错误。

11.监控和测试你的代码

在开发期间测试您的代码有助于您编写可维护的代码。 不幸的是，这是许多开发人员忽略的事情。

尽管许多人可能会争辩说，在构建 Web 应用程序时测试并不是什么大问题，但它具有无数的优势。 这里仅仅是少数：

  • 测试可帮助您检测错误和缺陷。
  • 检测错误可以提高代码质量。
  • 可以记录单元测试以供数据收集和将来参考。
  • 早期错误检测可以节省您支付给开发人员的费用，以消除错误如果不加以检查可能导致的火灾。
  • 无错误的应用程序和网站赢得了受众的信任和忠诚度，从而带来更大的增长。

您可以使用 Jest 或 React 测试库等工具来测试您的代码。 您可以选择多种测试工具——最终选择最适合您的工具。

您还可以在构建 React 应用程序时通过在浏览器中运行应用程序来测试它们。 您通常会在屏幕上显示任何检测到的错误。 这类似于使用 DevKinsta 开发 WordPress 站点——一种允许您在本地计算机上设计、开发和部署 WordPress 站点的工具。

12.使用功能组件

在 React 中使用函数式组件有很多好处：你写的代码更少，更容易阅读，React 官方文档的测试版正在使用函数式组件（Hooks）重写，所以你一定要习惯使用它们.

使用功能组件，您不必担心使用this或使用类。 借助 Hooks，您还可以通过编写更少的代码轻松管理组件的状态。

您在 React 上找到的大多数更新资源都使用功能组件，当您遇到问题时，可以轻松理解和遵循社区创建的有用指南和资源。

13. 及时了解 React 版本的变化

随着时间的推移，将引入新功能，并修改一些旧功能。 跟踪这一点的最好方法是查看官方文档。

您还可以加入社交媒体上的 React 社区，以在更改发生时获取有关更改的信息。

保持最新版本的 React 将帮助您确定何时优化或更改代码库以获得最佳性能。

还有一些围绕 React 构建的外部库，你也应该及时了解它们——比如 React Router，它用于 React 中的路由。 了解这些库所做的更改可以帮助您对您的应用程序进行相关的重要更改，并使从事该项目的每个人都更轻松。

此外，一些功能可能会被弃用，并且在发布新版本时可以更改某些关键字。 为了安全起见，在进行此类更改时，您应该始终阅读文档和指南。

14. 使用快速、安全的托管服务提供商

如果你想让你的网络应用程序在构建后可供所有人访问，你必须托管它。 使用快速安全的托管服务提供商很重要。

托管您的网站可让您访问不同的工具，从而轻松扩展和管理您的网站。 托管网站的服务器可以将本地计算机上的文件安全地存储在服务器上。 托管您的网站的总体好处是其他人可以看到您创建的精彩内容。

有多种平台为开发人员提供免费托管服务，如 Firebase、Vercel、Netlify、GitHub Pages，或付费服务，如 Azure、AWS、GoDaddy、Bluehost 等。

您还可以使用 Kinsta 的应用程序托管平台。 您需要做的就是连接一个 GitHub 存储库，从 Kinsta 的 25 个全球定位的数据中心中进行选择，然后开始。 您将获得快速设置、24/7 支持、顶级安全性、自定义域、高级报告和监控工具等的访问权。

概括

学习如何使用 React 并不是创建出色的 Web 应用程序所需要的全部。 与 Angular、Vue 等任何其他框架一样，您应该遵循一些最佳实践来帮助您构建高效的产品。

遵循这些 React 约定不仅对您的应用有帮助，而且对您作为前端开发人员也有好处——您将学习如何编写高效、可扩展和可维护的代码，并在您的领域中脱颖而出。 想要加强您的 React 编码游戏吗？ 您需要知道的一切都在本指南中点击鸣叫

因此，在使用 React 构建您的下一个 Web 应用程序时，请牢记这些最佳实践，以使您的用户和开发人员都能轻松使用和管理该产品。

您还知道还有哪些本文未提及的 React 最佳实践？ 在下面的评论中分享它们。 编码愉快！