В течение последних восьми месяцев мы как команда разработчиков SEF создавали платформу наставничества, которая называется ScholarX. Техническим стеком для проекта был React с машинописным текстом для внешнего интерфейса и Spring boot для внутреннего интерфейса. Большую часть времени я работаю над интерфейсом. После нескольких месяцев работы мы полностью готовы к запуску. В последнем стендапе команды разработчиков мы обсуждали улучшение производительности и кодовой базы проекта. поэтому мне поручили исследовать это, и я подумал, что будет здорово, если я напишу статью, чтобы другие тоже могли чему-то научиться.
Это будет характерно для нашего проекта, но будет полезно и для вас. Давайте займемся этим.
Создавайте повторно используемые компоненты
Для React важна возможность повторного использования. Повторно используя компоненты в своем проекте, вы можете добиться согласованности и не дать вам создавать огромные компоненты, которые будет сложно поддерживать. Чтобы улучшить возможность повторного использования компонентов, вы можете использовать правило «одна функция = один компонент».
Использовать фрагменты
return
( <div>
<Component1 />
<Component2 />
</div> )
return
( <>
<Component1 />
<Component2 />
</> )
Всегда используйте фрагмент над Div. Это сохраняет код чистым, а также способствует повышению производительности, поскольку в виртуальной модели DOM создается на один узел меньше.
Заказ на импорт
Сортировка импорта в файле JS имеет много преимуществ. Во-первых, это упрощает просмотр того, что вы импортировали из определенных пакетов, а также, если вы сгруппируете их, вы можете легко отличить, какой импорт из сторонних пакетов или локальный импорт.
Правило большого пальца - соблюдайте следующий порядок импорта:
1. Встроенный
2. Внешний
3. Внутренний
import React from 'react';
import { PropTypes } from 'prop-types';
import MentorCard from 'components/MentorCard';
import pladeholderImage from '../../assets/images/placholder.png';
import colors from '../../styles/colors';Не используйте фигурные скобки со строками
Обычно, когда мы передаем строковые реквизиты, мы используем это так:
name={“takumi”}
но вместо этого мы можем использовать name=“takumi” вот так.
Разрушение реквизита
Использование реструктуризации делает ваш код чистым.
Вместо этого,
console.log(props.user.name)Мы можем использовать это так,
const { user } = props
console.log(user.name)Создать макеты
Когда вы создаете разные представления, всегда лучше использовать макет в качестве основы, иначе вам придется тратить время на написание CSS на основе каждого представления, чтобы макет был согласованным.
TypeScript не использует никаких типов
Я знаю, что это не связано с реакцией, но в большинстве случаев эти два аспекта идут рука об руку. Не используйте any тип с чем-либо, если вы используете any, нет смысла использовать TypeScript.
Интерфейсы TypeScript и типы
Этот тоже не имеет отношения к React. Что касается интерфейсов и шрифтов, вы можете подумать, что это то же самое. да, это похоже, но ключевое различие в том, что тип нельзя повторно открыть для добавления новых свойств, а не интерфейс, который всегда можно расширить.
например это можно сделать,
interface Window {
title: string
}
interface Window {
ts: TypeScriptAPI
}
но это не может,
type Window = {
title: string
}
type Window = {
ts: TypeScriptAPI
}
Теперь вы можете выбирать между ними в зависимости от ваших требований.
Вот некоторые из вещей, которые помогут улучшить нашу кодовую базу. Есть много лучших практик. В SEF мы следим за большинством из них. Если вы заинтересованы в присоединении к SEF, вы можете отправить PR в любой из наших проектов, а также присоединиться к нашей группе дискурса.
На этом мы подошли к концу статьи. Не забудьте почитать и другие мои статьи. Увидимся, ребята, на следующем. А пока оставайтесь в безопасности! ✌️
