将您的代码转到另一侧
#javascript #编程 #react #refactorit

在今天的冒险中，我将带您进入代码开发的另一面。 作为一个，我们将探索代码重构的艺术，并查看它如何彻底改变您的代码库。听起来很棒！！！经历了这次冒险之后，您将学习如何将代码从 good 转换为 great 或伟大 下一个级别。您是开发人员，您有责任将您的申请提高到绩效，可伸缩性和可维护性的新高度。

Take Your Code to The Other Side

随着软件项目的增长，代码库变得复杂且难以管理是很常见的。在这一点上，代码重构从黑暗中浮现出来。这是通过以更有效的方式重组现有代码的过程。

重构不会为软件或产品添加任何新功能。它可以提高代码库的质量，可读性和可维护性。从长远来看，这使使用变得更加容易。

为什么要重构您的代码？

Why Refactor Your Code

改进的代码质量：

重构通过降低代码复杂性，消除重复和改进代码的整体设计来提高代码质量。这以易于阅读和理解的代码结束，降低了引入错误或错误的风险。

可维护性提高：

通过降低代码复杂性并改进代码的设计，重构使长期维护和更新代码变得更加容易。这可以为从事该项目的开发人员节省时间和精力，并降低进行更改时引入错误的风险。

更好的性能：

重构可以通过优化算法，删除不必要的代码和减少资源使用情况来帮助提高代码的性能。这可以导致更快的执行时间和提高效率。

更轻松的协作：

通过提高代码质量并降低复杂性，重构可以使开发人员更容易在项目上进行协作。这可以提高团队生产率，并降低处理共享代码时引入错误或错误的风险。

通过前进我们的冒险，是时候执行代码重构并突破另一侧了。

代码格式

在团队工作或维护代码库时考虑代码格式很重要。不同的开发人员可能对凹痕，线路断路和引号的偏好有所不同。以不一致的代码样式结束。不一致的代码样式可以使代码看起来混乱且挑战。因此，在整个项目中保持一致的代码样式至关重要。

使用Prettier等重构工具是有益的。如果您不熟悉漂亮，让我们打破它。. Prettier 是一种自动化代码格式的流行且用户友好的工具。一旦添加到项目中，它将按照预装样式设置进行格式化代码。另外，您可以通过创建一个带有以下配置的.prettierrc文件来自定义您的偏好格式规则：

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleAttributePerLine": false,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

反应中没有状态或生命周期方法的类组件

原始代码： 

import React, { Component } from "react";

class Adventure extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log("Migration happened");
  }

  render() {
    return (
      <div>
        <p>Break on Through To the Other Side</p>
        <button onClick={this.handleClick}>Migrate me</button>
      </div>
    );
  }
}

重构代码： 

import React from "react";

function Adventure() {
  const handleClick = () => {
    console.log("Migration happened");
  };

  return (
    <div>
      <p>Break on Through To the Other Side</p>
      <button onClick={handleClick}>Migrate me</button>
    </div>
  );
}

如果组件需要状态或lifecycle methods，则使用类组件，否则使用功能组件。

来自 react 16.8 ，通过添加Hooks，您可以使用状态，生命周期方法和其他功能，这些功能仅在函数组件中的类组件中可用。因此，始终建议使用函数组件，除非您需要尚不存在函数组件等效的React功能，例如错误边界。

避免额外的包装<div>在react 中

原始代码： 

import React from "react";

function Adventure() {
  return (
    <div>
      <p>Break on Through To the Other Side</p>
      <button>Migrate me</button>
    </div>
  );
}

重构代码： 

import React, { Fragment } from "react";

function Adventure() {
  return (
    <Fragment>{/* or use a shorter syntax <> </> */}
      <p>Break on Through To the Other Side</p>
      <button>Migrate me</button>
    </Fragment>
  );
}

这是一个常见的反应模式，用于组件返回多个元素。 Fragments让您将儿童列表分组，而无需向DOM添加额外的节点。

为什么片段比容器divs更好？

  • 片段要快一些，并且通过不创建额外的DOM节点来使用更少的内存。这只会在非常大而深的树上具有真正的好处。
  • 某些CSS机制（例如Flexbox和CSS网格）具有特殊的亲子关系，并在中间添加divs，因此很难保持所需的布局。

命名约定

命名是编写清洁和可维护的代码的重要组成部分，需要花时间为您的函数选择描述性和有意义的名称和变量。当命名功能和变量时，选择自我解释的名称并传达代码的目的和功能很重要。

对于React，组件名称应始终在诸如UserDashboard，Dashboard等的Pascal情况下。使用Pascal Case进行组件将其与默认的JSX元素标签区分开。

在组件内定义的方法/函数应在骆驼盒中，例如getUserData()，showUserData()等。

对于应用程序中全球使用的常数字段，请尝试仅使用大写字母。作为一个例子，

const PI = 3.14;

从代码中删除不必要的评论

原始代码： 

import React, { Fragment } from "react";

function Adventure() {
  console.log("test");

  return (
    <Fragment>
      {/* <h1>Adventure</h1> */}
      <p>Break on Through To the Other Side</p>
      <button>Migrate me</button>
    </Fragment>
  );
}

重构代码： 

import React from "react";

function Adventure() {
  return (
    <>
      <p>Break on Through To the Other Side</p>
      <button>Migrate me</button>
    </>
  );
}

仅在需要的地方添加注释，以便您在以后更改代码时不会感到困惑。

也不要忘记删除诸如console.log，debugger，未使用的注释代码等语句。

破坏反应中的道具

Destructuring Props in React

原始代码： 

function Adventure(props) {
  return (
    <>
      <h1>Hello, {props.username}</h1>
      <button>Migrate me</button>
    </>
  );
}

重构代码： 

function Adventure({ username }) {
  return (
    <>
      <h1>Hello, {username}</h1>
      <button>Migrate me</button>
    </>
  );
}

破坏性是在ES6中引入的。 JavaScript功能中的此类型功能使您可以轻松提取表单数据并从对象或数组中分配变量。另外，破坏道具使代码更清洁，更容易阅读。

尊重进口顺序

原始代码： 

import { formatCurrency, toNumber } from "@/utils";
import { useDrag } from "react-dnd";

import "./styleB.css";
import { useFormik } from "formik";
import React, { useEffect, useState } from "react";
import Button from "@/components/Button";
import TextField from "@/components/TextField";
import PropTypes from 'prop-types';

重构代码： 

import React, { useEffect, useState } from "react";
import PropTypes from 'prop-types';

import { useDrag } from "react-dnd";
import { useFormik } from "formik";

import { formatCurrency, toNumber } from "@/utils";

import Button from "@/components/Button";
import TextField from "@/components/TextField";

import "./styleB.css";

组织进口是编写清洁可维护的反应代码的必需部分。

导入订单：

  1. 反应导入
  2. 库导入（字母顺序）
  3. 绝对从项目进口（字母顺序）
  4. 相对进口（字母顺序）
  5. 导入 *为
  6. 导入./.

每种类型的都应通过空线分开。这使您对所有组件，第三方库等的进口易于理解。

将代码分为多个较小的功能。每个人都有一个责任。

编写清洁和可维护的代码的关键原则之一是使功能和组件保持较小而专注。这意味着将您的代码分为多个较小的功能，每个功能都具有一个责任。

当功能或组件的职责太多时，读取，理解和维护变得更加困难。通过将其分解为较小，更集中的功能，您可以提高代码的可读性和可维护性。

向您展示我的意思：
Split your code into multiple smaller functions

不要重复自己

不要重复自己（干燥）是软件开发的基本原则。这鼓励开发人员避免在整个代码库中重复代码或逻辑。干燥原理是编写可维护和可扩展代码的必需方面，它适用于编码标准和代码重构。

在编码标准方面，干燥原则表明您应该避免在代码库中复制代码或逻辑。这意味着您应该努力编写可重复使用的代码，该代码可在您的应用程序中的多个位置使用。作为一个例子，您可以编写可重复使用的函数来执行验证并在每个输入字段中使用它。

，而不是编写相同的验证逻辑。

强烈建议避免箭头功能

提高组件性能的一种方法是避免在Render（）方法中使用箭头功能。

以下实例有什么问题？
每次渲染组件时，都会创建该函数的新实例。实际上，如果组件被渲染一两次，这没什么大不了的。但是在其他情况下，它会影响性能。 Render（）方法中的箭头函数可能会导致组件的不必要呈现。

原始代码： 

function Adventure() {
  const [message, setMessage] = useState("Migration not started");

  return (
    <>
      <h1>Mesage: {message}</h1>
      <button onClick={() => setMessage("Migration happened")}>
        Migrate me
      </button>
    </>
  );
}

因此，如果您关心性能，请在以下实例中使用渲染之前声明该功能：

重构代码： 

function Adventure() {
  const [message, setMessage] = useState("Migration not started");

  const onMessage = () => {
    setMessage("Migration happened");
  };

  return (
    <>
      <h1>Mesage: {message}</h1>
      <button onClick={onMessage}>Migrate me</button>
    </>
  );
}

您可以将方法声明为render()方法之外的实例方法，而不是在render()方法中使用箭头函数。这样可以确保该方法仅创建一次，并且不会在每个渲染上重新创建。

降低了反应捆绑包

当您在React应用中使用第三方库时，保持捆绑尺寸尽可能小非常重要。大型捆绑尺寸会对您的应用程序的性能产生负面影响，尤其是在较慢的Internet连接上。

减少捆绑包大小的一种方法是仅加载您实际需要的库部分。您可以仅使用称为树摇动的技术导入所需的特定方法，而不是导入整个库。这可以大大减少捆绑包的大小。

假设您使用的是流行的库Lodash，只需要pick()方法即可从对象中选择某些属性。您不必导入整个lodash库，而是只能导入pick()方法如下：

import pick from 'lodash/pick';

const pickedUserProps = pick(userProps, ['name', 'email']);

而不是

import lodash form 'lodash';

const pickedUserProps = lodash.pick(userProps, ['name', 'email']);

使用useMemo来缓存昂贵的计算

构建React应用程序时，通常会执行计算或生成可能在计算上昂贵的数据。这可能会对您的应用程序的性能产生负面影响，尤其是如果这些计算经常执行或大量执行。

为了杀死应用程序的性能问题，您可以使用useMemo钩子对缓存昂贵的计算进行反应。 useMemo是一个内置的React Hook，可以记忆函数的结果，因此仅在其依赖性更改时才会重新计算。

假设您有一个基于从API获取的数据生成项目列表的组件。该列表是使用执行一些昂贵计算的函数生成的：

function generateList(data) {
  // Perform some expensive calculations here
  // ...
  return list;
}

function Adventure() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from API
    // ...
    setData(data);
  }, []);

  const list = generateList(data);

  return (
    <ul>
      {list.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

使用上述实例，即使数据没有更改，每次组件重新租赁时，generateList函数也会调用。这可能会导致不必要的计算并减慢应用程序的性能。

要优化此功能，您可以使用useMemo挂钩来缓存generateList的结果：

function Adventure() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from API
    // ...
    setData(data);
  }, []);

  const list = useMemo(() => generateList(data), [data]);

  // ...
}

删除太多的IF-ELSE条件

如果else语句是大多数编程语言中的常见功能，并且通常用于根据某些条件来控制代码执行的流动。但是，太多的If-Else语句可能会使您的代码难以阅读，维护和调试。

删除太多IF-ELSE条件的一种方法是使用“ Switch”语句。 Switch语句类似于IF-ELSE语句，但旨在以更简洁，更有效的方式处理多种情况。让我们看看一个实例：

function checkGrade(grade) {
  if (grade >= 90) {
    return "A";
  } else if (grade >= 80) {
    return "B";
  } else if (grade >= 70) {
    return "C";
  } else if (grade >= 60) {
    return "D";
  } else {
    return "F";
  }
}

在上面的实例中，我们正在使用IF-ELSE语句检查学生的成绩并返回字母等级。可以使用Switch语句重构此代码：

function checkGrade(grade) {
  switch (true) {
    case (grade >= 90):
      return "A";
    case (grade >= 80):
      return "B";
    case (grade >= 70):
      return "C";
    case (grade >= 60):
      return "D";
    default:
      return "F";
  }
}

您可以看到，与if-else语句相比，开关语句更简洁，更易于阅读。它还使我们能够以更有效的方式处理多种情况。

删除太多IF-ELSE条件的另一种方法是使用对象文字。对象文字是在JavaScript中定义键和值对的一种方式。

向您展示我的意思： 

function getAnimalSound(animal) {
  if (animal === "dog") {
    return "woof";
  } else if (animal === "cat") {
    return "meow";
  } else if (animal === "cow") {
    return "moo";
  } else {
    return "unknown";
  }
}

在上面的实例中，我们正在使用IF-ELSE语句来返回动物的声音。该代码可以使用对象文字进行重构：

function getAnimalSound(animal) {
  const animalSounds = {
    dog: "woof",
    cat: "meow",
    cow: "moo"
  }
  return animalSounds[animal] || "unknown";
}

您可以看到，对象文字方法比if-else和switch语句更简洁，更易于阅读。它还允许我们以更灵活的方式定义键和价值对。

冒险的结束

代码重构是关于突破当前代码的局限性，并推向更好，更有效的版本。这可能是一项艰巨的任务，但是有了正确的心态，工具和最佳实践，您可以将代码带到另一侧。

代码重构不仅在于提高代码的质量，还涉及改善应用程序的整体用户体验。通过努力重构代码，您可以创建一个更响应，直观和引人入胜的应用程序，用户会喜欢的应用程序。

所以，不要害怕突破对方。拥抱代码重构的过程，并随着您的应用程序上升到新的高度。

动机

Motivation

ð支持

请考虑以下并通过订阅我们的渠道来支持我们。非常感谢您的支持，并将帮助我们继续创建内容供您享受。预先感谢您的支持！

YouTube
GitHub
Twitter

Thank you in advance for your support