Привет! Сегодня вы узнаете, как опытный React-разработчик проводит проверку кода. Я собираюсь поделиться с вами своим контрольным списком, и, пожалуйста, дайте мне знать в комментариях, если есть что-то еще, что я должен добавить.
Note: Some basic things like checking for better variable/functions names etc. are not added since this is supposed to a high level code review guide.
1. Новые пакеты
Первое, на что вы должны обратить внимание, это добавление новых пакетов. Убедитесь, что пакет, добавленный разработчиком, абсолютно необходим и нет простых альтернатив кода. Намерение каждого разработчика должно состоять в том, чтобы использовать простые сценарии вместо пакетов, потому что со временем размер пакета будет расти и создаст много проблем для вашего приложения.
2. Хитрое кодирование
Второй шаг — поиск хитрого кода. Теперь позвольте мне показать вам, что я имею в виду под хитрым кодом на примере.
const hasData = !!result.length;
!!
— это способ приведения значения к true
или false
. Предположим, что result.length
равно 0
, сначала 0
будет преобразовано в false
, затем первое !
преобразует его в true
, а затем второе !
снова преобразует его в false
. Короче говоря, !!result.length
вернет false
. Вместо того, чтобы проходить через такую сложность, мы могли бы просто использовать result.length
, который работал бы точно так же, учитывая, что логическое значение не ожидалось строго от hasData
где-то в коде. Поэтому обязательно ищите такой код, который излишне сложен.
3. Код взлома приложения
Рассмотрим этот фрагмент:
const profile = fetchProfile(); const username = profile.username;
Разработчики в основном настроены оптимистично и предполагают, что profile
всегда будет иметь допустимый объект, потому что приложение никогда не давало сбоев в их локальной среде. Теперь представьте, что по какой-то причине fetchProfile
терпит неудачу и возвращает значение null/undefined
. profile.username
вызовет сбой приложения, потому что JS выдаст исключение. Сейчас есть два решения этой проблемы:
- Использовать обработку исключений
- Используйте
lodash
Я не предпочитаю использовать первое решение везде, потому что это может запутать код, а использование lodash
имеет множество преимуществ, а также оно довольно надежное и простое.
import _ from 'lodash'; const profile = fetchProfile(); const username = _.get(profile, 'username'); const category = _.get(profile, 'category', 'social');
Первое преимущество использования lodash
заключается в том, что он не позволит вашему коду сломаться, если переменная не имеет нужного атрибута. В приведенном выше фрагменте в случае username
, если profile
имеет undefined/null
или любое другое значение или profile
имеет объект, но не содержит username
, он просто вернет null
. В случае category
он всегда будет возвращать значение по умолчанию, которое вы передали в качестве третьего параметра, если profile
не содержит атрибут category
. Значение по умолчанию — второе преимущество использования lodash
. Третье преимущество заключается в том, что код проще и не слишком сложен для чтения.
4. Разделение обработчиков
Рассмотрим следующие фрагменты:
onChange
определяется отдельно, а затем передается вInput
const onChange = () => { ... ... ... ... ... } <Input fieldHasError={hasError} value={selectedDay} onChange={onChange} />
2. Анонимная функция передана непосредственно onChange
в Input
<Input fieldHasError={hasError} value={selectedDay} onChange={() => { ... ... ... ... ... />
Второй подход приемлем, если ожидается, что код, передаваемый функцией, будет коротким (3–5 строк), но что, если onChange
состоит из 50+ строк? Второй подход приведет к запутанному коду и ухудшит читабельность. Вот почему я всегда предпочитаю правильное разделение кода и передачу отдельно определенных обработчиков компонентам, даже если обработчики содержат несколько строк кода.
5. Импорт
- Несортированный и беспорядочный импорт
import PropTypes from 'prop-types'; import DayPicker from 'react-day-picker'; import SVGIcon from '@ABC/components/SVGIcon'; import styled from 'styled-components'; import get from 'lodash/get'; import Input from '@ABC/components/Input'; import 'react-day-picker/lib/style.css'; import React, { useEffect, useRef, useState } from 'react'; import { dateTimeFromJSDate, isValidDate } from '../../utils/date';
2. Раздельный (и не перегруженный) импорт
import React, { useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; import DayPicker from 'react-day-picker'; import styled from 'styled-components'; import get from 'lodash/get'; import 'react-day-picker/lib/style.css'; import Input from '@ABC/components/Input'; import ClickOutside from '@ABC/utilities/click-outside'; import SVGIcon from '@ABC/components/SVGIcon'; import YearMonth from './YearMonth'; import { dateTimeFromJSDate, isValidDate } from '../../utils/date';
Теперь вы можете видеть, что второй фрагмент стал более читабельным и организованным. Обычная последовательность, которую я рекомендую, — это импорт сторонних приложений, импорт локальных приложений и затем локальный импорт. Если у вас несколько локальных приложений, не забудьте добавить пробел после импорта каждого приложения. Во втором фрагменте у нас есть сторонний импорт, затем некоторые импорты из (локального) ABC
приложения, а затем у нас есть некоторые локальные импорты.