Есть множество способов и оптимизаций, которые вы можете выполнить, чтобы сделать ваш реагирующий код намного лучше, чище и удобнее в сопровождении.
Чтобы ваше приложение работало лучше, вы должны написать код, который не просто работает, но работает лучше, чтобы мы могли уменьшить медлительность веб-сайта и повысить производительность нашего приложения.
Вот несколько полезных советов, которые я узнал в своем продолжающемся путешествии по React.
Используйте необязательный оператор цепочки (?)
Необязательный оператор цепочки (?.) позволяет считывать значение свойства, расположенного глубоко в цепочке связанных объектов, без проверки правильности каждой ссылки в цепочке.
Фрагменты
В React вы не можете вернуть несколько дочерних элементов из одного компонента, если вы попытаетесь получить ошибку: «Смежные выражения JSX должны иметь один родительский элемент».
Поэтому очень распространенным, но не рекомендуемым решением является обернуть ваш дочерний компонент в div, как показано ниже:
Не используйте div, если они вам не нужны, вместо этого используйте реагирующие фрагменты.
Почему фрагменты, а не div?
Если вам не нужен элемент div, фрагмент всегда будет лучшим выбором, потому что фрагменты не создают никаких элементов в DOM, а это означает, что дочерние компоненты фрагмента будут отображаться без переноса DOMузел.
Распространяйте, если слишком много реквизита
Если вам нужно передать много реквизита дочернему компоненту, как показано ниже:
Используйте оператор распространения, чтобы сделать ваш код четким и лаконичным, как показано ниже:
Примечание: разброс пропсов делает код менее понятным, поэтому используйте его, только если у вас много пропсов, которые нужно передать.
Устранение встроенных функций в JSX
Вы можете улучшить читабельность и ясность своего кода, просто разделив как можно больше кода JavaScript и кода HTML.
Вместо этого создайте отдельную функцию и вызовите ее из JSX, как показано ниже:
Используйте уникальную ключевую опору для элементов списка
React использует реквизит key для создания отношения между компонентом и элементом DOM.
Ключи помогают React определить, какие элементы были изменены (добавлены или удалены).
Например, если вы визуализируете данные со свойством id, вы можете использовать его в качестве ключа, если свойство id уникально.
Избегайте использования индексов в качестве ключей
Не используйте индекс массива в качестве ключевой опоры, если вы знаете, что массив не будет статичным.
Если вы измените порядок элемента в массиве, React запутается и повторно отобразит неправильный элемент.
Фигурные скобки не нужны для струнных реквизитов
Вы можете использовать кавычки для указания строковых литералов в качестве атрибутов:
Надеюсь, это будет полезно для вас Спасибо!
