Независимо от того, как развивался React, эти практики никогда не устареют.
Вы фронтенд-разработчик, который каждый день использует React для создания потрясающих пользовательских интерфейсов?
Вы хотите, чтобы ваш код всегда был в хорошей форме, независимо от того, как растет ваш проект?
Тогда вам следует следовать 8 лучшим практикам React, приведенным ниже.
1. Освойте важные концепции JavaScript.
Вы можете сразу перейти к React, если у вас есть базовые знания JavaScript. Но чтобы работать на свободном уровне, вам необходимо понимать некоторые важные концепции JavaScript.
Какие понятия? Посмотрите историю ниже:
2. Комментируйте только при необходимости
Что вы думаете о приведенном ниже коде:
console.log(error); // Handle error
Я не вижу ничего, кроме смехотворно бессмысленного комментария. Правило - не пишите такие ненужные комментарии.
Вы думаете, что оставляя комментарии повсюду в коде, вы покажете, что вам небезразлично то, что делаете, и это поможет другим легко понять вашу логику. Это не так. Это не только делает ваш код беспорядочным, но и увеличивает вероятность конфликтов.
Так что комментируйте, только если это действительно необходимо.
3. Делайте компоненты небольшими и точными.
Как и функция, вы можете написать большой компонент, который выполняет множество функций. Однако это приносит больше вреда, чем пользы. Когда возникает проблема, вы потратите много времени на отладку. По мере роста вашего приложения все, вероятно, выходит из-под контроля.
Хороший компонент должен быть небольшим и выполнять одну или несколько задач, которые он должен выполнить. Если вы сможете это сделать, ваш проект будет легче поддерживать и расширять по мере его роста (так оно и будет).
Лучшее преимущество, которое я вижу от создания небольших компонентов, - это возможность многократного использования. Вы же не хотите писать один и тот же код снова и снова, верно? Если вы склонны создавать большие компоненты, скорее всего, вы напишете компоненты, которые уже существуют.
Не позволяйте компонентам разрастаться большими, разбивайте их на мелкие.
4. Компоненты с отслеживанием состояния и без сохранения состояния
Не используйте компоненты с отслеживанием состояния и без него бессознательно. Тот факт, что вы хотите использовать компонент с отслеживанием состояния для компонента Пользователь, не означает, что вам следует это делать. Вы должны понять причины этого, чтобы извлечь из этого максимальную пользу.
Проще говоря, компоненты с отслеживанием состояния имеют состояние, а другие - нет. Это означает, что компоненты с отслеживанием состояния хранят всю информацию о состоянии компонента, а компоненты без состояния не имеют памяти, они просто распечатывают данные, которые вы им передаете.
Взгляните на пример ниже:
// Stateful component
class User extends React.Component {
constructor() {
super()
this.state = {
users: []
};
}
render() {
return (
<UserList users={this.state.users} />
);
}
}
// Stateless component
const UserList = ({users}) => {
render() {
return (
<ul>
{users.map(user => {
return <li>user</li>;
})}
</ul>
);
}
}
Итак, когда вам следует использовать компонент с сохранением состояния или компонент без состояния?
Если вы просто хотите отображать простые данные, используйте компоненты без сохранения состояния. Конечно, вы также можете использовать для этой задачи компоненты с отслеживанием состояния. Однако это того не стоит.
Компоненты с отслеживанием состояния предназначены для более сложных применений, таких как обработка состояния компонента, логики и преобразования данных (для использования компонентов без состояния).
На этом этапе вы должны понимать, когда какой компонент использовать.
5. Дайте конкретное имя компоненту
Что бы вы выбрали с точки зрения наименования между User и VipUser?
Пользователь удобно использовать где угодно, любому пользователю. Это удобно. Однако в долгосрочной перспективе это также сбивает вас с толку.
Для VipUser вы ограничиваете контекст использования. Это более управляемо. Вы можете использовать его только для VIP-пользователей.
Я выберу VipUser, потому что хочу точно знать, для чего используется компонент, по его имени. Кроме того, это дает остальным в вашей команде четкое представление о том, для чего им следует использовать компонент.
6. Используйте заглавные буквы в названиях компонентов.
Когда дело доходит до наименования компонентов (и любого другого наименования), вы должны следовать согласованному соглашению.
Предпочтительнее VipUser, а не vipuser, vip_user или vipUser. Почему? В наши дни это самая распространенная конвенция. Поэтому не изобретайте велосипед, основываясь на своем хобби.
7. Пишите тестируемый код и всегда выполняйте его.
Теперь это следующий уровень кодирования. Вы не только заставляете свой код работать, но и делаете его тестируемым. И это должно быть вашим практическим правилом.
На данный момент я знаю один из лучших фреймворков для модульного тестирования - Jest. Проверьте это и убедитесь, что ваш код покрыт.
Для компонентного тестирования я использую React Testing Library. React - это компонентный подход. Каждый компонент должен быть протестирован эффективно.
Не пишите код без тестирования.
8. Храните связанные файлы в одной папке.
Под связанными я имею в виду не расширения файлов, а файлы, которые служат определенной цели. Например, все файлы, относящиеся к компоненту, должны находиться в одном месте, включая файлы стилей.
Это полезно, потому что, когда вам нужно проверить вещи, относящиеся к текущему файлу, вам не нужно прыгать по иерархии. Иногда вы, вероятно, теряете счет, если занимаетесь крупным проектом.
Разместите файлы правильно для облегчения навигации в дальнейшем.
Заключение
В наши дни появляется все больше и больше новых интерфейсных фреймворков. Тем не менее, React по-прежнему занимает уважаемую позицию. И я думаю, что в долгосрочной перспективе он будет расти. Так что помните об этих передовых методах.
Надеюсь, вам понравилась эта история, и я хотел бы быть признателен, если вы поделитесь дополнительной информацией в комментарии ниже.
