Как разделить проблемы между логикой и пользовательским интерфейсом при создании приложения React.
В этой статье я покажу вам, как разделить проблемы между логикой и пользовательским интерфейсом при создании приложения React. Давайте начнем.
Взгляните на приведенный ниже пример кода:
Это простое приложение-счетчик React, которое отлично работает. На этом этапе у вашего компонента не будет проблем с наличием внутри него двух методов. Но представьте, по мере роста вашего компонента методы внутри него будут увеличиваться, и ваш компонент будет сложнее отлаживать, и в одном файле будет столько строк. Именно здесь пригодится пользовательский хук, чтобы разделить вашу логику и ваш реальный пользовательский интерфейс.
Теперь давайте создадим еще один файл с именем useCounter, так как наш основной компонент называется counter или как вам угодно, но перед именем функции настоятельно рекомендуется использовать слово use, как указано в React docs .
В этом файле мы перемещаем все наши методы и состояния внутри нашего основного компонента сюда. Это будет выглядеть как код ниже:
Мы переместили сюда все наши методы, и обратите внимание, что в итоге мы возвращаем все значения и методы, которые понадобятся нашему основному компоненту. Теперь вернитесь к нашему основному компоненту и импортируйте их из нашего пользовательского хука, как показано ниже:
Теперь наш код будет выглядеть намного чище и читабельнее, потому что он касается только пользовательского интерфейса и импортирует только все методы и значения из пользовательского хука.
Спасибо за чтение. Увидимся!🍻
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
