ИССЛЕДОВАНИЕ КОМПОНЕНТА РЕНДЕРИНГА ПО УСЛОВИЮ В REACT-ПРИЛОЖЕНИИ

RESEARCH OF CONDITIONAL COMPONENT RENDERING IN REACT APPLICATION

Maxim Beryanov

student, PIKT faculty, ITMO University,

Russia, Saint-Petersburg

АННОТАЦИЯ

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

ABSTRACT

When designing an application in React.JS, we can create separate components that encapsulate behavior we want and then only render some of them, depending on the current state of our application. This article proposes to explore a way to simplify application code through the conditional rendering component usage.

Ключевые слова: React, рендеринг, условие, компонент.

Keywords: React, rendering, condition, component.

Рендеринг с условием [1] – один из наиболее часто используемых принципов рендеринга компонентов в React.JS [2]. По мере роста приложения и его явного усложнения чередой условных операторов, оно может стать менее читабельным для разработчика. В этой статье мы обсудим, как легко написать условные операторы в React.JS.

Существует несколько методов, используемых при применении рендеринга с условием в компонентах React.JS:

• Использование оператора && [3] – это один из наиболее часто используемых методов условного рендеринга. Важно помнить, что этот метод следует использовать очень осторожно, так как он может привести к непредсказуемым ошибкам;
• Использование операторов if/else [4] – это другой метод условного рендеринга в React.JS, который может привести к сложному коду большого компонента, когда необходимо проверить несколько условий (к примеру, десятков);
• Использование тернарного оператора [5] – это также популярный метод. Проблема использования тернарного оператора заключается в том, что, когда у нас есть несколько условий для проверки, это приводит к использованию вложенных тернарных операторов, что, несомненно, может аналогично сделать код менее читаемым и более сложным.

Предлагаемый в данной статье вариант условного рендеринга вводит новый компонент <ReactWhen /> – простой и достаточно малый компонент React.JS, который позволяет нам писать красивые условные операторы (рисунок 1).

Рисунок 1. Компонент рендеринга

Независимо от того, нужно ли нам проверить одно условие или ряд условий, мы можем сделать это с помощью компонента <RenderWhen />. Данный компонент работает аналогично операторам if/else и switch/case – это позволяет нам выполнить поставленную задачу. Компонент <RenderWhen /> принимает свойство isTrue, что в свою очередь реализовывает вложенные условия – все дочерние условия будут проверяться только в том случае, если условие, переданное в <RenderWhen />, оценивается как истинное.

Опишем работу компонента (рисунок 2). Он реализует интерфейс с тремя свойствами – лимит на число дочерних компонент для рендеринга (по умолчанию данное число равно 1), флаг того, является ли переданное условие верным и, непосредственно, дочерние компоненты. Внутри себя данный компонент создает список элементов, в который затем будет добавлять пригодные к рендерингу по условию элементы среди дочерних. Если изначальное условие ложно, то длина этого списка будет равна нулю. Далее, учитывая лимитированное число элементов и правильность условий вложенных элементов формируется конечный набор элементов для рендеринга. Стоит добавить, что <RenderWhen.If /> является, как говорят, «синтаксическим сахаром» для улучшения понимания кода, хотя его использование в коде абсолютно не обязательно.

Рисунок 2. Код компонента рендеринга

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

Список литературы:

1. Отрисовка по условию [Электронный ресурс] URL: https://ru.react.js.org/docs/conditional-rendering.html (дата обращения: 07.12.2022).
2. React.JS [Электронный ресурс] URL: https://reactjs.org (дата обращения: 07.12.2022).
3. Логическое И (&&) [Электронный ресурс] URL: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND (дата обращения: 07.12.2022).
4. Операторы if … else [Электронный ресурс] URL: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...else (дата обращения: 07.12.2022).
5. Условный (тернарный) оператор [Электронный ресурс] URL: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator (дата обращения: 07.12.2022).