Перенесите свой код на другую сторону

В сегодняшнем приключении я перенесу вас на другую сторону разработки кода. Как ОДИН, мы познакомимся с искусством рефакторинга кода и посмотрим, как оно может революционизировать вашу кодовую базу. Замечательно звучит!!! Пройдя через это приключение, вы узнаете, как преобразовать свой код из хорошего в отличный или отличный в следующий уровень. сильный>. Вы разработчик, и вы обязаны вывести свое приложение на новый уровень производительности, масштабируемости и удобства обслуживания.

По мере роста программных проектов кодовая база становится сложной и сложной в управлении. В этот момент рефакторинг кода выходит на свет из тьмы. Это процесс улучшения существующего кода путем его реструктуризации более эффективным и действенным способом без изменения его поведения.

Рефакторинг не добавляет к программному обеспечению или продукту никаких новых функций или возможностей. Это может улучшить качество, удобочитаемость и ремонтопригодность вашей кодовой базы. Что облегчает работу в долгосрочной перспективе.

Зачем рефакторить код?

Улучшенное качество кода:

Рефакторинг повышает качество кода за счет снижения его сложности, устранения дублирования и улучшения общего дизайна кода. В результате получается код, который легче читать и понимать, что снижает риск появления ошибок или ошибок.

Повышенная ремонтопригодность:

Снижая сложность кода и улучшая структуру кода, рефакторинг упрощает обслуживание и обновление кода в долгосрочной перспективе. Это может сэкономить время и усилия разработчиков, работающих над проектом, и снизить риск появления ошибок при внесении изменений.

Лучшая производительность:

Рефакторинг может помочь повысить производительность вашего кода за счет оптимизации алгоритмов, удаления ненужного кода и сокращения использования ресурсов. Это может сократить время выполнения и повысить эффективность.

Легче сотрудничать:

Повышая качество кода и снижая сложность, рефакторинг может упростить совместную работу разработчиков над проектом. Это может повысить производительность команды и снизить риск возникновения ошибок или багов при работе с общим кодом.

Продолжая наше приключение, пришло время выполнить рефакторинг кода и прорваться на другую сторону.

Форматирование кода

Важно учитывать форматирование кода при работе в команде или поддержке кодовой базы. У разных разработчиков могут быть разные предпочтения в отношении отступов, разрывов строк и кавычек. Это заканчивается непоследовательным стилем кода. Непоследовательный стиль кода может сделать код загроможденным и трудным для чтения. Поэтому очень важно поддерживать единый стиль кода во всем проекте.

Полезно использовать инструменты рефакторинга, такие как Prettier. Если вы не знакомы с 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
}

Компонент класса без методов состояния или жизненного цикла в React

Исходный код:

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>
  );
}

Если компоненту требуется состояние или методы жизненного цикла, используйте компонент класса, в противном случае используйте компонент функции.

Начиная с React 16.8 с добавлением хуков, вы можете использовать состояние, методы жизненного цикла и другие функции, которые были доступны только в компоненте класса, прямо в компоненте функции. Таким образом, всегда рекомендуется использовать функциональные компоненты, если только вам не нужна функциональность 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>
  );
}

Это распространенный шаблон в React, который используется компонентом для возврата нескольких элементов. Фрагменты позволяют группировать список дочерних элементов без добавления дополнительных узлов в DOM.

Почему фрагменты лучше, чем контейнер divs?

Фрагменты работают немного быстрее и используют меньше памяти, поскольку не создают дополнительный узел DOM. Это имеет реальное преимущество только на очень больших и глубоких деревьях.
Некоторые механизмы CSS, такие как Flexbox и CSS Grid, имеют особые отношения родитель-потомок, и добавление divs в середине затрудняет сохранение желаемого макета.

Соглашения об именах

Именование — важная часть написания чистого и поддерживаемого кода, поэтому необходимо уделить время выбору описательных и значимых имен для ваших функций и переменных. При именовании функций и переменных важно выбирать имена, которые говорят сами за себя и передают цель и функцию кода.

Для React имя компонента всегда должно быть в регистре Pascal, например UserDashboard, Dashboard и т. д.. Использование регистра Pascal для компонентов отличает его от тегов элементов JSX по умолчанию.

Методы/функции, определенные внутри компонентов, должны быть в регистре Camel, например 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, отладчик, неиспользуемый закомментированный код.

Разрушение реквизита в 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";

Организация импорта является обязательной частью написания чистого и поддерживаемого кода React.

Импорт заказов:

Импорт реакции
Импорт библиотеки (в алфавитном порядке)
Абсолютный импорт из проекта (в алфавитном порядке)
Относительный импорт (в алфавитном порядке)
Импортировать * как
Импорт './.

Каждый вид должен быть разделен пустой строкой. Это делает ваш импорт чистым и понятным для всех компонентов, сторонних библиотек и т. д.

Разделите свой код на несколько более мелких функций. Каждый с одной ответственностью.

Один из ключевых принципов написания чистого и удобного в сопровождении кода заключается в том, чтобы функции и компоненты были небольшими и сфокусированными. Это означает разделение вашего кода на несколько более мелких функций, каждая из которых несет одну ответственность.

Когда функция или компонент имеют слишком много обязанностей, их становится сложнее читать, понимать и поддерживать. Разбив его на более мелкие, более целенаправленные функции, вы можете улучшить читабельность и удобство сопровождения вашего кода.

Чтобы показать вам, что я имею в виду:

Не повторяйтесь

Не повторяйтесь (DRY) — это фундаментальный принцип разработки программного обеспечения. Это побуждает разработчиков избегать дублирования кода или логики в своей кодовой базе. Принцип DRY является обязательным аспектом написания поддерживаемого и масштабируемого кода и применяется как к стандартам кодирования, так и к рефакторингу кода.

Что касается стандартов кодирования, принцип DRY предполагает, что вам следует избегать дублирования кода или логики в вашей кодовой базе. Это означает, что вы должны стремиться писать повторно используемый код, который можно использовать в нескольких местах вашего приложения. Например, вместо того, чтобы писать одну и ту же логику проверки для каждого поля ввода в вашем приложении, вы можете написать повторно используемую функцию, которая выполняет проверку и использует ее в каждом поле ввода.

Настоятельно рекомендуется избегать стрелочных функций в рендеринге

Один из способов повысить производительность ваших компонентов — избегать использования стрелочных функций в методе 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

Когда вы используете сторонние библиотеки в своем приложении React, очень важно, чтобы размер пакета был как можно меньше. Большой размер пакета может негативно сказаться на производительности вашего приложения, особенно при медленном интернет-соединении.

Один из способов уменьшить размер пакета — загружать только те части библиотеки, которые вам действительно нужны. Вместо того, чтобы импортировать всю библиотеку, вы можете импортировать только определенный метод, который вам нужен, используя технику, называемую дрожание дерева. Это может значительно уменьшить размер вашего пакета.

Допустим, вы используете популярную библиотеку 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 в React для кэширования дорогостоящих вычислений. useMemo — это встроенный в React хук, который запоминает результат функции, поэтому он пересчитывается только при изменении его зависимостей.

Допустим, у вас есть компонент, который генерирует список элементов на основе некоторых данных, полученных из 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

Операторы if-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";
  }
}

Как видите, оператор switch более лаконичен и удобен для чтения, чем оператор 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. Это также позволяет нам более гибко определять пары ключ-значение.

Конец приключения

Рефакторинг кода — это преодоление ограничений вашего текущего кода и продвижение к лучшей, более эффективной и действенной версии. Это может быть сложной задачей, но с правильным мышлением, инструментами и лучшими практиками вы можете перенести свой код на другую сторону.

Рефакторинг кода — это не только улучшение качества вашего кода, но и улучшение общего пользовательского опыта вашего приложения. Приложив усилия к рефакторингу кода, вы сможете создать более отзывчивое, интуитивно понятное и привлекательное приложение, которое понравится пользователям.

Так что не бойтесь прорваться на другую сторону. Примите участие в процессе рефакторинга кода и наблюдайте, как ваше приложение поднимается на новые высоты.

Мотивация

🍀Поддержка

Пожалуйста, следите за нами и поддержите нас, подписавшись на наш канал. Ваша поддержка очень ценна и поможет нам продолжать создавать контент для вас. Спасибо заранее за вашу поддержку!

Ютуб
Гитхаб
Твиттер

Перенесите свой код на другую сторону

Зачем рефакторить код?

Форматирование кода

Компонент класса без методов состояния или жизненного цикла в React

Избегайте дополнительной упаковки <div> в React

Соглашения об именах

Удалить ненужные комментарии из кода

Разрушение реквизита в React

Соблюдение порядка импорта

Разделите свой код на несколько более мелких функций. Каждый с одной ответственностью.

Не повторяйтесь

Настоятельно рекомендуется избегать стрелочных функций в рендеринге

Уменьшить размер пакета React

Используйте useMemo для кэширования дорогостоящих вычислений

Удалить слишком много условий if-else

Конец приключения

Мотивация

🍀Поддержка

Вопросы по теме

Избегайте дополнительной упаковки `<div>` в React