7 рекомендаций по React, которым должен следовать каждый веб-разработчик

Опубликовано: 17 Июня, 2021

React… самая популярная библиотека Javascript для создания пользовательских интерфейсов. Для разработчиков эта библиотека - одна из любимых библиотек для создания любых красивых приложений. Возможно, вам будет легко изучить React. Вы начинаете использовать React и начинаете разрабатывать приложение. Вы создаете один компонент для создания некоторых функций, а затем другой для какой-то другой функции. Когда ваше приложение начинает расти, вы либо добавляете несколько строк в существующий компонент, либо просто создаете еще один компонент. Это продолжается, и если вы не обращаете внимания на эти компоненты или коды, которые вы написали, вы можете получить много беспорядочного кода в своем приложении. Вы обнаружите, что некоторый код является избыточным, некоторые компоненты нельзя использовать повторно, некоторые компоненты содержат слишком много строк кода и много проблем. В дальнейшем будет сложно поддерживать проект.

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

1. Организация файлов

Большинство новичков ошибаются при правильной организации файла в приложении React. Правильная структура папок и файлов важна не только в приложении React, но и в других приложениях. Это помогает понять ход проекта и добавить другие функции в приложение. Файловая структура приложения create-react-app - это один из возможных способов организации файлов, но когда приложения быстро растут, это становится немного сложной задачей.

Создайте папку ресурсов, чтобы хранить файлы CSS верхнего уровня, изображения и шрифты. Вы можете создать вспомогательную папку для размещения других файлов для любого типа файла для функций. Поддерживайте одну папку, чтобы хранить все компоненты вашего проекта React. Кроме того, сохраняйте подпапку для второстепенных компонентов, используемых любым большим компонентом. Будет легче понять иерархию файлов, если вы сохраните большие компоненты в их собственной папке, а маленькие компоненты, которые используются компонентами, во вложенной папке.

В React index.js является основной точкой входа, используемой разработчиками, но становится трудно ориентироваться, когда у вас есть несколько файлов, все с именами index.js . В этой ситуации вы можете добавить файл package.json в каждую из ваших папок компонентов и установить основную точку входа для этой соответствующей папки. Не рекомендуется добавлять файл pacjkage.json в каждую папку, но с файлами будет легко работать.

Пример: компонент Tags.js может быть объявлен как точка входа, как показано в приведенном ниже коде…

 {
"main": 'Tags.js'
}

2. Сохраняйте небольшие размеры компонентов

React работает по принципу повторного использования компонентов. Старайтесь поддерживать и писать более мелкие компоненты вместо того, чтобы складывать все в один массивный компонент. Компоненты небольшого размера легко читать, легко обновлять, легко отлаживать, поддерживать и повторно использовать. Теперь вопрос в том, насколько большим должен быть компонент? Взгляните на свой метод рендеринга. Если у него более 10 строк, ваш компонент, вероятно, слишком велик. Попробуйте провести рефакторинг кода и разбить компоненты на более мелкие. В React компонент должен отвечать только за одну функциональность (принцип единой ответственности). Следуя этому принципу, вы можете создавать меньшие по размеру и повторно используемые компоненты. Таким образом, каждый сможет легко работать с вашим приложением.

3. Используйте функциональные компоненты

Многие новички не понимают, следует ли им создавать компонент класса или функциональный компонент. Если вы не используете метод жизненного цикла или состояние компонента, тогда эффективно писать функциональные компоненты. Функциональные компоненты намного легче читать и тестировать, потому что они представляют собой простые функции JavaScript без перехватчиков состояния или жизненного цикла. Вот некоторые из преимуществ:

  • Меньше строк кода и лучшая производительность
  • Легче читать, легко понимать и легко тестировать.
  • Нет необходимости использовать эту привязку.
  • Легче извлекать более мелкие компоненты.

Компонент класса

javascript




import React, { Component } from 'react' ;
class Button extends Component {
render() {
const { children, color, onClick } = this .props;
return (
<button onClick={onClick} className={`Btn ${color}`}>
{children}
</button>
);
}
}
Button; export default

Функциональный компонент

javascript




import React from 'react' ;
function export default Button({ children, color, onClick }) {
return (
<button onClick={onClick} className={`Btn ${color}`}>
{children}
</button>
);
}

Есть одна проблема с функциональным компонентом, то есть разработчики не могут контролировать процесс повторного рендеринга. Когда что-то изменится, React повторно отобразит функциональный компонент, даже если компонент изменится сам. В прежней версии решением был компонент Pure. PureComponent допускает поверхностное сравнение свойств и состояний, что означает, что React «проверяет», изменилось ли содержимое компонента, свойств или самого компонента. Компонент будет повторно отображаться при изменении свойств или содержимого компонента или самого компонента. В противном случае он пропустит повторный рендеринг и вместо этого повторно использует последний результат рендеринга.

Вышеупомянутая проблема была решена, когда в выпуске React v16.6.0 была представлена новая функция-памятка. Memo выполняет поверхностное сравнение реквизита с функциональным компонентом. Он проверяет, изменилось ли содержимое компонента, свойств или самого компонента. На основе сравнения реакция будет либо повторно использовать последний результат рендеринга, либо повторно рендерить. Memo позволил разработчикам создавать «чистые» функциональные компоненты и исключил использование компонентов с отслеживанием состояния или чистых компонентов.

4. Не используйте индексы в качестве ключевого аргумента

Многие разработчики используют индекс как значение ключевой опоры. Добавление ключевой опоры к элементу требуется при создании массива элементов JSX. Обычно это делается, когда вы используете map () или какой-либо другой итератор или цикл. Это еще одна плохая практика в React. React использует свойство key для отслеживания каждого элемента в массиве и из-за сворачивающегося характера массива. Это может легко привести к тому, что неверная информация будет отображена в неправильном месте. Это особенно очевидно при просмотре компонентов класса с состоянием.
Ключевые реквизиты используются для идентификации, и они определяют, что следует визуализировать или повторно визуализировать. React не тратит время на рендеринг дубликатов. Поэтому, когда у вас есть два элемента с одинаковыми ключами, React видит их как одинаковые, и это может привести к удалению некоторых элементов.

5. Не используйте реквизиты в исходном состоянии

Использование props в исходном состоянии - еще одна плохая практика в React. Почему? потому что конструктор вызывается только один раз, во время создания компонента. В следующий раз, если вы внесете какие-либо изменения в свойства, состояние компонента останется таким же, как и предыдущее значение, и не будет обновлено. Эту проблему можно решить, используя метод componentDidUpdate жизненного цикла реакции. Этот метод позволяет обновлять компонент при изменении свойств. Имейте в виду, что этот метод не будет вызываться при первоначальном рендеринге, поэтому убедитесь, что вы инициализировали состояние компонента с необходимыми значениями, которые, вероятно, были получены из свойств. После этого используйте этот метод для обновления этих значений и компонента по мере необходимости.

6. Инициализировать состояние компонента без конструктора классов

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

Инициализация состояния в конструкторе

javascript




// Import React library
import React from 'react'
// Create React component
class MyComponent extends React.Component {
constructor(props) {
super (props)
// Initialize component State
this .state = {
count: 0
}
}
...
}

Инициализация состояния с помощью поля класса

javascript




// Import React library
import React from 'react'
// Create React component
class MyComponent extends React.Component {
// Initialize component State
state = {
count: 0
}
...
}

7. Уменьшите использование компонентов с отслеживанием состояния.

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

С выпуском React 16.8.0 была представлена новая функция React Hooks. Эта функция помогает в написании функциональных компонентов с отслеживанием состояния и исключает использование компонентов класса. Эта новая функция действительно полезна, когда проект растет. Раньше у нас была только одна возможность в React использовать метод состояния и жизненного цикла, то есть писать компоненты с отслеживанием состояния. Хуки изменили это, и теперь разработчики больше не привязаны к компонентам с отслеживанием состояния, потому что им нужно использовать состояние.