В этой статье собраны 12 простых и хороших практик при работе в React, которых стоит придерживаться, имея дело с этой библиотекой в 2020 году.
\n\n\n\n\n\n\n\nЕсли вы фронтэнд разработчик, вовлеченный в создание интерактивных пользовательских интерфейсов, то скорее всего вы работаете с React. Имея дело с проектами на этой библиотеке нужно быть крайне осторожным в написании кода таким образом, чтобы следовать лучшим практикам React, которые помогут лучше организовать ваш код.
\n\n\n\nКак вы уже знаете, React это библиотека созданная в Facebook и она допускает интеграцию в множеством уже готовых и интересных компонентов. По факту, любой разработчик может создать свои собственные компоненты и сделать их доступными для сообщества.
\n\n\n\nНо сегодня мы заострим внимание на самых основных из лучших практик при работе в React:
\n\n\n\nКак мы уже все знаем, в React можно создавать большие компоненты, которые будут выполнять несколько задач. Но лучше всего создавать компоненты, оставляя их небольшими, таким образом, чтобы каждый компонент отвечал за конкретный функционал. В идеале компонент должен рендерить конкретную часть вашей страницы или отвечать за определенное поведение. Вот несколько преимуществ такого подхода:
\n\n\n\nТакие компоненты существуют сами по себе, что делает их тестирование и поддержку гораздо проще.
\n\n\n\nКаждый небольшой компонент может быть повторно использован на нескольких проектах.
\n\n\n\nКомпоненты выполняющие общие функции можно легко сделать доступными на любого сообщества.
\n\n\n\nВ небольших компонентах проще делать оптимизацию производительности.
\n\n\n\nТакие компоненты проще обновлять.
\n\n\n\nБольшие компоненты нагружены в плане производительности и их может быть довольно тяжело поддерживать.
\n\n\n\nБаланс между созданием одного сжатого компонента и созданием нескольких, отвечающих только за свой функционал компонентов, может варьироваться от компании к компании. Но все же, вы можете наделать столько компонентов, сколько хотите и комбинировать их таким способом, чтобы достигнуть желаемого результата.
\n\n\n\nПридерживаясь правила “одна функция = один компонент”, вы можете улучшить повторное использование компонентов. Это означает то, что вам стоит избегать попыток создания новых компонентов для функционала, который уже существует в виде другой, уже готовой функции.
\n\n\n\nПовторно используя компоненты по всему вашему проекту или по нескольким проектам, вы не только вы обретете связность и логичность в ваших проектах, но это также поможет и другим людям работающим с вашим кодом.
\n\n\n\nС другой стороны, если любой компонент становится большим, громоздким и сложным в поддержке, то лучше всего разбить его на столько маленьких компонентов, насколько это возможно.
\n\n\n\nДля примера, вы можете создать компонент Button, который может принимать только нужные ему иконки. И каждый раз, когда вам понадобится кнопка, у вас уже будет под рукой нужный компонент. Модульный подход позволит вам покрыть множество рабочих моментов, применяя один и тот же кусок кода. Вам нужно стремиться к золотой середине. Компоненты должны быть достаточно абстрактными, но не очень уж загруженными.
class IconButton extends React.Component {\n [...]\n render() {\n return (\n <button onClick={this.props.onClick()}>\n <i class={this.props.iconClass}></i>\n </button>\n );\n }\n}Общее правило для написания любого кода — это держать его сжатым и стараться не раздувать по мере возможности.
\n\n\n\nЭто собственно и есть одна из лучших практик React. Избегайте дубликатов кода — ну или Don’t Repeat Yourself (DRY).
\n\n\n\nЭтого можно достичь тщательно изучив код на паттерны и на повторения. Если таковые имеются, то возможно вы повторяете свой код и у вас явно есть место где нужно пресечь такое повторение. Скорее всего, немного переписав код, вы сделаете его более сжатым и оставите таким же понятным.
\n\n\n\nЭтот момент опирается на принцип повторного использования в React. Давайте представим, что вам нужно добавить несколько кнопок, которые содержат в себе иконки, а вместо добавления разметки для каждой кнопки, вы можете просто применить компонент IconButton, показанный ниже. Вы можете зайти ещё дальше, отобразив все нужные кнопки с помощью массива с уже заготовленными для них данными.
const buttons = ['facebook', 'twitter', 'youtube'];\n\nreturn (\n <div>\n {\n buttons.map( (button) => {\n return (\n <IconButton\n onClick={doStuff( button )}\n iconClass={button}\n />\n );\n } )\n }\n </div>\n);И ещё раз, добавляйте их только там, где это действительно нужно. Это касается не только React, таким образом вы убьете сразу двух зайцев:
\n\n\n\nВаш код визуально будет чист и приведен в порядок.
\n\n\n\nВы избежите потенциального конфликта между кодом и комментариями, если вам в будущем понадобится переписать код.
\n\n\n\nЭто вообще хорошая идея, называть компоненты в соответствии с тем, что они делают, так вам проще будет их распознать в структуре приложения.
\n\n\n\nЕщё один пример, в котором предпочтительнее назвать компонент Avatar, так как он может использоваться везде в приложении — для авторов, пользователей или в комментариях. А вот если мы назовем компонент AuthorAvatar, сугубо в контексте использования, то мы как бы сократим полезность этого компонента до применения только у авторов.
Ну и более того, именование компонентов в соответствии с их функционалом станет полезными моментом для работы с любой командой или сообществом, сделав этот компонент доступнее в плане поиска.
\n\n\n\nЕсли вы, как и большинство других, используете JSX, то имена компонентов, создаваемых вами должны начинаться с заглавной буквы. К примеру, вам нужно называть компоненты как SelectButton, а не selectbutton или Menu, а не menu. Это делается для того, чтобы JSX определял их отдельно от стандартных HTML тегов.
В ранних версиях React был список встроенных имён, чтобы различить их от кастомных названий. Но так как такому списку нужна была постоянная поддержка и обновления, этот подход был пересмотрен и заглавные буквы стали нормой.
\n\n\n\nЕсли же JSX не ваш выбор, то вы можете использовать буквы нижнего регистра. Но это может сократить возможность повторного использования компонентов по всему проекту.
\n\n\n\nКомпоненты бывают со стейтом и без. Первые могут хранить информацию о стейте компонента и передавать необходимый контекст. А вторые, в свою очередь, не имеют памяти и не могут передавать контекст другим частям пользовательского интерфейса. Они только получают пропсы от родительских компонентов и отдают вам JSX элементы. Они масштабируемы и готовы к повторному использованию, а так же схожи с чистыми функциями в JavaScript.
\n\n\n\nОдной из лучших практик в React является хранение состояния логики загрузки данных отдельно от рендеринга любой логики без стейта. Лучше всего иметь один компонент со стейтом, чтобы подгружать данные и ещё один компонент, но уже без стейта, чтобы эти данные выводить. Такой подход сократит запутанность среди компонентов.
\n\n\n\nПоследние версии React 16.8 имеют на борту новую фичу, а именно хуки. Которые могут в конечном итоге вообще помочь избавиться от компонентов, основанных на классах.
\n\n\n\nДля примера, ваше приложение подтягивает данные после монтирования. Тут вам нужно управлять данными с основном компоненте и передать комплексный таск на рендер подкомпоннету, но в виде пропса.
\n\n\n\nimport RenderTable from './RenderTable';\n\nclass Table extends Component {\n state = { loading: true };\n\n render() {\n const { loading, tableData } = this.state;\n return loading ? <Loading/> : <RenderTable data={tableData}/>;\n }\n\n componentDidMount() {\n fetchTableData().then( tableData => {\n this.setState( { loading: false, tableData } );\n } );\n }\n}Ну тут реально, уже не надо никаких объяснений. Ваш код должен вести себя так, как от него и ожидают, а также должен быть готовым к тестированию в любой момент. Хорошей практикой является именование тестовых файлов также, как и исходных файлов, но с суффиксом .test.
Вы можете использовать JEST для тестирования вашего кода в React.
\n\n\n\nДержите все файлы для одного компонента в одной папке, даже включая файлы стилей.
\n\n\n\nВ случае, если маленький компонент используется другим компонентом и только им, то есть смысл хранить такие компоненты вместе, в папке родительского компонента. Такую иерархию потом будет легче понять — большие компоненты имеют свои собственные директории, а все их мелкие части разделены на поддиректории. Таким образом вы можете легко извлечь нужный код в любой другой проект или улучшить его при малейшей надобности.
\n\n\n\nДля примера, для компонента Form, все составляющие части, такие как CSS файлы, иконки, изображения, тесты и любые прилегающие компоненты, относящиеся к Form, должны находиться в одной и той же папке. Если вы именуете файлы с умом и держите все относящиеся друг к другу файлы вместе, согласно логическому порядку, то у вас не будет проблем в их последующем поиске.
Одной из лучших практик работы в React, которая поможет вам организовать ваши компоненты, это использование таких инструментов как Bit.
\n\n\n\nПодобные сервисы помогают поддерживать и переиспользовать код. Более того, они помогают коду быть более доступным и способствуют коллективной разработке компонентов. Также, код может быть легко синхронизирован среди компонентов.
\n\n\n\nСниппеты кода помогут вам оставаться на одной волне с лучшим кодом и самым продвинутом синтаксисом. Также они помогают вам относительно избавиться от багов, что делает их одной из лучших практик в React, которые вам явно не стоит пропускать.
\n\n\n\nВообще, существует множество библиотек сниппетов, которые вы можете смело использовать, например ES7 React, Redux, JS Snippets и т.п.
\n\n\n\nЛинтинг это процесс в котором мы запускаем программу, анализирующую код на потенциальные ошибки.
\n\n\n\nВ основном мы используем его для работы с конкретными языками. Но также мы можем фиксить и другие проблемы полностью автоматически, особенно со стилем написания кода. Используя линтер в React, мы делаем наш код относительно свободным от ошибок и багов.
\n\n\n\nЯ надеюсь, что этот список лучших практик поможет вам правильно наладить работу с вашими проектами и избежать потенциальных проблем.
\n","type":"js","date":"2021-02-05T14:49:21.000Z","acf":{"seo_desc":"В этой статье собраны 12 простых и хороших практик при работе в React, которых стоит придерживаться, имея дело с этой библиотекой в 2020 году.","keywords":"практики в React, лучшие практики в React, лучшие подходы в React","pub_date":"2020-02-04","tags":"React, JavaScript, JavaScript советы"},"title":"12 лучших и простых практик в React, которых стоит придерживаться в 2020 году","id":"49bb3e2d-911e-5bc7-8c6e-cebf5ad58b0a","excerpt":"В этой статье собраны 12 простых и хороших практик при работе в React, которых стоит придерживаться, имея дело с этой библиотекой в 2020 году.
\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/reactpractice2020fjs.jpg"},"interesting":[{"title":"Рекурсивно определяем числа Фибоначчи с помощью мемоизации в JavaScript","slug":"recursivno-opredelyaem-chisla-fibonacci-s-pomoshiu-memoizacii-v-javascript","type":"js"},{"title":"15 методов работы с элементами про которые вы возможно не слышали","slug":"15-metodov-raboty-s-elementami-pro-kotorie-vy-ne-slyshaly-vozmozhno","type":"js"},{"title":"Методы JavaScript, которые улучшат ваши умения за несколько минут","slug":"metody-javascript-kotorie-uluchshat-vashi-umenia-za-neskolko-minut","type":"js"}]}},"staticQueryHashes":["3576131997","63159454"]}