React 最佳实践 - 2022 年编写更优质代码的方法

编写干净、可扩展且易于维护的代码是每个程序员的梦想，这种能力将优秀的程序员与伟大的程序员区分开来，最酷的部分是总有一些东西需要学习和改进，所以你必须警惕地调整 React 最佳实践。

文件夹结构

良好的文件夹结构取决于你的应用程序和团队的规模。因此，这个问题没有统一的答案。尤其因为这是一个高度主观的话题，而且也取决于个人喜好。

在规划或启动应用程序时拥有一个干净的文件夹结构从长远来看会产生巨大的影响。

在构建项目时应遵循两个要点：避免过多的嵌套，不要过度设计。

└── /src
  ├── /assets - Contains static assets such as  images, svgs, company logo etc.
  ├── /components - reusable components like navigation bar, buttons, forms
  ├── /store - redux store
  ├── /utils - utilities, helpers, constants.
  ├── /views/pages - majority of the app pages would be here
  ├── index.js
  └── App.js

代码结构

基本上没有定义的结构，但是您应该在整个代码库中遵循一种风格，例如：

维护结构化的导入顺序

确保所有导入语句都在新行上，因为这将使所有组件、第三方库等的导入清晰且易于理解。

双引号 (" ") 或单引号 (' ')

使用 React 时，很容易混淆应该使用双引号 (" ") 还是单引号 (' ')。简单的答案是：无论使用什么，都要保持一致性。

将整个应用程序分成小的组件

将整个应用程序分成小的组件，然后在单独的文件上进行处理是保持代码整洁的好做法。

遵循常见的命名约定

命名约定背后的含义是轻松识别您正在处理的元素类型，并在代码中包含社区中常见的内容。

将文件命名为与该文件内的 React 组件相同的名称，例如：

❌公告栏.jsx

✔️AnnouncementBar.jsx

对变量使用描述性良好的名称，以便第三方或新开发人员可以轻松理解您的代码。

❌

   const message = "Good afternoon, Mr. Jhon";
   const wm = "Good afternoon, Mr. Jhon";
   const m = "Good afternoon, Mr. Jhon";

✔️

   const welcomeMessage = "Good afternoon, Mr. Jhon";

避免重复代码

如果您发现自己正在编写重复的代码，请将其转换为可重复使用的组件。

使用对象解构来获取 Props

解构赋值语法是一种 JavaScript 表达式，它可以将数组中的值或对象的属性解包到不同的变量中。

❌

  const Button = (props) => {
    return <button disabled={props.isDisabled}>{props.text}</button>;
  };

✔️

  const Button = ({ text, isDisabled }) => {
    return <button disabled={isDisabled}>{text}</button>;
  };

使用 linter

基本上，linter 会观察您正在编写的 JavaScript 代码，并提醒您在执行代码时更有可能发现的错误。

当您使用 create-react-app 时，已经配置了 ESLint，但您也可以完全自行设置或扩展预配置规则集的规则。

将可重用逻辑提取到自定义钩子中

钩子允许我们重用状态逻辑，而无需改变我们的组件层次结构。

当你需要复用另一个函数式组件中已有的状态逻辑时，创建一个自定义钩子是个好时机。你可以将逻辑封装在其中，只需在组件内部以函数形式调用即可。

当不需要 div 时，写一个 fragment

React 组件只能在其根元素处渲染一个 HTML 标签。因此，如果你想渲染两个相邻的元素，则需要将它们包裹在另一个元素中。

例如，我们将<h1>和包装<p>在一个<div>元素中，这种方法的问题在于使用了不必要的<div>元素。

❌

return (
  <div>
    <h1>Hello!</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio
      odio, tempor non ipsum et, aliquam pharetra urna.
    </p>
  </div>
);

在 React 中包装元素的最佳方式是使用 React fragment<React.Fragment>或短语法<></>

✔️

return (
  <>
    <h1>Hello!</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio
      odio, tempor non ipsum et, aliquam pharetra urna.
    </p>
  </>
);