Привет! Сегодня вы узнаете, как опытный 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 выдаст исключение. Сейчас есть два решения этой проблемы:

  1. Использовать обработку исключений
  2. Используйте 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. Разделение обработчиков

Рассмотрим следующие фрагменты:

  1. 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. Импорт

  1. Несортированный и беспорядочный импорт
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 приложения, а затем у нас есть некоторые локальные импорты.