Многие из вас в восторге от изучения ReactJS, который является библиотекой пользовательского интерфейса и прост в освоении и использовании. Но управление большими проектами в React может быть немного сложным, и правильный подход может сэкономить ваше время и усилия и может быть менее раздражающим для новичка. При работе над проектами ReactJS инженеры ReactJS рекомендуют, чтобы ваше приложение было хорошо структурировано на уровне кода, а также на уровне папок/файлов. Мы рассмотрим лучшие практики работы с ReactJS.

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

Модульное мышление

В Интернете есть бесчисленное множество определений, которые могут быть полезны для понимания модульности, но самое простое может быть таким:

Если мы посмотрим на нашу рутину, нам придется работать над различными предметами, чтобы справиться с днем, например, семья, колледж / работа, друзья, времяпровождение и все те вещи, которые относительны в повседневной жизни, но одна вещь, которую можно заметить. что у каждого времени есть свои занятия, например, утро для первоначальных или важных задач, а день - для второстепенных задач и так до ночи.

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

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

Я знаю, что мои маркеры недостаточно хороши, но они могут дать вам представление о том, как устроена система компоновки и разбита на модули. Каждый компонент разделен на фрагменты или небольшие фрагменты пользовательского интерфейса для представления страницы. Важно то, что на картинке выше некоторые компоненты просты, а некоторые немного сложны, потому что у них также есть дочерние компоненты. Все эти компоненты разделены на .js файлы, например, Navbar.js, LandingComponent.js и т. д.…,

Навигационная панель проста, поэтому мы не будем ее догонять, но LandingComponent.js немного сложна, потому что она также представляет вложенные компоненты, например, VideoContent.js и Video.js здесь вы можете видеть, что LandingComponent.js следует модульному подходу, потому что этот компонент разделен в дочерние компоненты, вы можете записать весь свой код в один файл JavaScript, но он будет менее удобен в сопровождении и труден для чтения кода, поэтому важна модульность. Поэтому при работе над реактивными проектами вы должны разбить свою страницу на компоненты, чтобы ее было легче поддерживать и читать.

Если вы хотите узнать больше о модульности, рекомендуем эту статью Thinking in React

Избегайте проблем с повторным рендерингом

Повторный рендеринг может быть беспокойным как для вас, так и для вашего приложения, повторный рендеринг вычисляет материал и потребляет мощность процессора, поэтому его необходимо избегать.

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

Хук жизненного цикла под названием «useEffect» также является головной болью для разработчиков из-за его сложного состава, всегда используйте массив зависимостей с отслеживаемыми значениями, пример ниже,

  let a = 10;
  let b = 5;
  let sum;
useEffect(() => {
  sum = a + b;

return () => { // cleanup function if you've used like, setTimeout etc, 
}

},[sum]) // sum is dependency, whenever it changes,
the useEffect will run otherwise not

Приведенный выше код прост для понимания того, что происходит, мы просто добавили массив зависимостей со значением суммы, всякий раз, когда DOM необходимо повторно отобразить, вышеуказанный эффект будет проверять, должен ли он повторно отображаться или нет.

useMemo() и useCallback() также используют хуки, чтобы избежать повторного рендеринга, по синтаксису они довольно знакомы. useMemoотслеживает нессылочные значения, такие как число, строка, логическое значение и т. д.и useCallbackотслеживает ссылочные значения, такие как массив, объект, метод , и т. д.

Их синтаксис такой же, как у useEffect, поэтому я не привожу ни одного примера.

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

Если у вас есть какие-либо вопросы по вышеуказанной теме, не стесняйтесь спрашивать, и я с радостью отвечу.

Здесь приветствуются предложения ;) Если вы считаете, что я пропустил что-то, о чем нужно рассказать, поделитесь в комментариях.

Спасибо,
Фахад Хан

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.