Хотя React является одним из самых популярных и наиболее часто используемых интерфейсных фреймворков в мире, многие разработчики все еще испытывают затруднения, когда дело доходит до рефакторинга кода для улучшения повторного использования. Если вы когда-либо повторяли один и тот же фрагмент кода во всем приложении React, вы пришли к нужной статье.
В этом руководстве вы познакомитесь с тремя наиболее распространенными индикаторами того, что пришло время создать повторно используемый компонент React. Затем мы рассмотрим несколько практических демонстраций, создав многоразовый макет и два интересных хука React.
К тому времени, когда вы закончите читать, вы сможете сами понять, когда уместно создавать повторно используемые компоненты React и как это делать.
В этой статье предполагается наличие базовых знаний о React и хуках React. Если вы хотите освежить в памяти эти темы, я рекомендую вам ознакомиться с руководством «Начало работы с React «и «Intorduction to React Hooks «.
Три основных показателя повторно используемого компонента React
Сначала давайте рассмотрим некоторые признаки того, когда вы можете захотеть это сделать.
Повторяющееся создание оберток с одним и тем же стилем CSS
Мой любимый признак того, что я знаю, когда создавать повторно используемый компонент, — это многократное использование одного и того же стиля CSS. Теперь вы можете подумать: «Подождите минутку: почему бы мне просто не присвоить одно и то же имя класса элементам, использующим один и тот же стиль CSS?» Вы совершенно правы. Не рекомендуется создавать повторно используемые компоненты каждый раз, когда некоторые элементы в разных компонентах используют один и тот же стиль. На самом деле, это может привести к ненужной сложности. Итак, вы должны задать себе еще один вопрос: являются ли эти обычно стилизованные элементы обертками?
Например, рассмотрим следующие страницы входа и регистрации:
// Login.js
import '. /common.css’;
function Login () {
return (
{... }
) ;
}
// SignUp.js
import '. /common.css’;
function Signup () {
return (
{... }
) ;
}
Те же стили применяются к контейнеру (
элементу) и нижнему колонтитулу каждого компонента. Таким образом, в этом случае вы можете создать два повторно используемых компонента — и
