12 лучших методов React, которые следует принять во внимание в 2020 году

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

Как известно, React – это библиотека, созданная Facebook, которая позволяет интегрировать различные полезные компоненты. Фактически, любой разработчик может создавать свои собственные компоненты и делать их доступными для общества.

Далее представлены фундаментальные лучшие практики React:

1. Держите компоненты маленькими и специализированными

Как известно, React позволяет создавать огромные компоненты, которые выполняют ряд задач. Но лучший способ – конструировать небольшие компоненты. Лучше всего стараться делать так, чтобы один компонент соответствовал одной функции. В идеале, один компонент должен визуализировать определенный кусочек страницы или изменять конкретное поведение. Этот метод имеет ряд преимуществ:

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

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

2. Возможность многократного использования важна, поэтому новые компоненты лучше создавать маленькими

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

Повторное использование компонентов позволит добиться согласованности, а также внести свой вклад в общество.

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

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

class IconButton extends React.Component {
  [...]
  render() {
    return (
      <button onClick={this.props.onClick()}>
        <i class={this.props.iconClass}></i>
      </button>
    );
  }
}

3. Избавляйтесь от дублирования кода - не повторяйтесь

Общее правило для всего кода – сохранять его как можно более кратким и лаконичным.

Здесь тоже ничего не меняется, так как лучшие практики React предполагают краткость и точность кода. Один из способов сделать это – избегать дублирования – не повторяться.

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

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

const buttons = ['facebook', 'twitter', 'youtube'];

return (
  <div>
    {
      buttons.map( (button) => {
        return (
          <IconButton
            onClick={doStuff( button )}
            iconClass={button}
          />
        );
      } )
    }
  </div>
);

4. Комментируйте только там, где это необходимо

Комментарии следует прикреплять к коду только там, где это необходимо. Это не просто соответствует рекомендациям React, но и служит двум целям одновременно:

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

5. Присваивайте названия компонентам в соответствии с функциями

Рекомендуется давать названия компонентов в соответствии с выполняемой функцией.

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

Другой пример: компонент Avatar желательно называть так, чтобы его можно было использовать где угодно – для авторов, пользователей или в комментариях. Вместо этого, если назвать component AuthorAvatar в контексте его использования, его функциональность ограничивается.

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

6. Используйте заглавные буквы для названий компонентов

Если, как и большинство людей, вы используете JSX (расширение JavaScript), имена компонентов, которые вы создаёте, должны начинаться с заглавных букв. Например, лучше давать названия Select вместо кнопки select или Menu вместо menu. Это позволит JSX идентифицировать, как теги HTML по умолчанию.

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

Если разработчик выбрал не JSX, можно использовать строчные буквы. Однако это снизит возможность повторного использования компонентов за пределами вашего проекта.

7. Отделите состояния от рендеринга

Компоненты в React могут быть с состоянием или без состояния. Компоненты с сохранением состояния хранят информацию о компоненте и обеспечивают необходимый контекст. Напротив, компоненты без состояния не имеют памяти и не могут предоставлять контекст другим частям пользовательского интерфейса. Они получают реквизиты (входные данные) только от родительского компонента и возвращают элементы JSX. Их можно масштабировать и использовать повторно. В чём-то они похожи на чистые функции в JavaScript.

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

В более поздних версиях React v16.8 появилась новая функция – React Hooks, которая записывает компоненты, связанные с состоянием. Это может в конечном итоге устранить необходимость в компонентах на основе классов.

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

import RenderTable from './RenderTable';

class Table extends Component {
  state = { loading: true };

  render() {
    const { loading, tableData } = this.state;
    return loading ? <Loading/> : <RenderTable data={tableData}/>;
  }

  componentDidMount() {
    fetchTableData().then( tableData => {
      this.setState( { loading: false, tableData } );
    } );
  }
}

8. Код должен выполняться так как ожидается и быть тестируемым

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

Для проверки кода React лучше использовать JEST.

9. Все файлы, относящиеся к одному компоненту, должны находиться в одной папке

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

Если есть какой-либо небольшой компонент, используемый только определенным компонентом, имеет смысл хранить эти маленькие компоненты все вместе в одной папке. В этом случае иерархия будет проста для понимания – у больших компонентов есть собственная папка, а все их меньшие составляющие разбиты на подпапки. Таким образом, разработчик сможет извлечь код при работе с любым проектом или даже изменить его в любое время.

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

10. Используйте инструменты, такие как Bit

Одной из лучших практик React, которая помогает организовать все компоненты, является использование таких инструментов, как Bit.

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

11. Используйте библиотеки сниппетов

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

Существует множество библиотек фрагментов, таких как ES7 React, Redux, JS Snippets и т. д.

12. Следуйте правилам линтинга и разбивайте длинные строки

Linting – это процесс, в котором мы запускаем программу, которая анализирует код на наличие возможных ошибок.

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