Условный рендеринг

В Solid.js условный рендеринг применяется для управления тем, что отображается на странице в зависимости от состояния приложения. Это позволяет создавать динамичные интерфейсы, где контент меняется в ответ на изменения данных. В отличие от других фреймворков, таких как React, Solid.js использует декларативную модель с реактивной связью, что делает условный рендеринг ещё более эффективным.

Основы условного рендеринга

В Solid.js условный рендеринг осуществляется с помощью реактивных значений и выражений. Чтобы отобразить разные части интерфейса в зависимости от состояния, обычно используются операторы if и тернарные операторы.

Простой пример условного рендеринга:

import { createSignal } from 'solid-js';

function Example() {
  const [isVisible, setIsVisible] = createSignal(false);

  return (
    <div>
      {isVisible() ? <p>Элемент видим!</p> : <p>Элемент скрыт</p>}
      <button onCl ick={() => setIsVisible(!isVisible())}>Переключить видимость</button>
    </div>
  );
}

Здесь состояние isVisible используется для определения того, какой контент рендерить. В зависимости от его значения, отображаются разные абзацы. При этом Solid.js автоматически отслеживает изменения состояния и перерисовывает только те части интерфейса, которые были затронуты, что обеспечивает высокую производительность.

Использование Show для условного рендеринга

Для более удобного и декларативного подхода Solid.js предоставляет компонент Show. Этот компонент заменяет тернарный оператор и делает код чище и понятнее. Он принимает два основных пропса: when и children.

Пример использования:

import { Show, createSignal } from 'solid-js';

function Example() {
  const [isVisible, setIsVisible] = createSignal(false);

  return (
    <div>
      <Show when={isVisible()}>
        <p>Элемент видим!</p>
      </Show>
      <Show when={!isVisible()}>
        <p>Элемент скрыт</p>
      </Show>
      <button onCl ick={() => setIsVisible(!isVisible())}>Переключить видимость</button>
    </div>
  );
}

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

Условный рендеринг с несколькими элементами

В случае, когда нужно отобразить несколько вариантов контента в зависимости от условия, Solid.js предоставляет возможность вложенного использования компонента Show. Это позволяет более гибко управлять состоянием и рендерить различные компоненты.

Пример:

import { Show, createSignal } from 'solid-js';

function Example() {
  const [userStatus, setUserStatus] = createSignal('loading');

  return (
    <div>
      <Show when={userStatus() === 'loading'}>
        <p>Загрузка...</p>
      </Show>
      <Show when={userStatus() === 'authenticated'}>
        <p>Добро пожаловать!</p>
      </Show>
      <Show when={userStatus() === 'unauthenticated'}>
        <p>Пожалуйста, войдите в систему</p>
      </Show>
      <button onCl ick={() => setUserStatus('authenticated')}>Войти</button>
      <button onCl ick={() => setUserStatus('unauthenticated')}>Выйти</button>
    </div>
  );
}

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

Рендеринг с использованием Else

Компонент Show также поддерживает атрибут else, который позволяет задавать элемент, который будет отображаться, если условие ложно.

Пример:

import { Show, createSignal } from 'solid-js';

function Example() {
  const [isLoggedIn, setIsLoggedIn] = createSignal(false);

  return (
    <div>
      <Show when={isLoggedIn()} fallback={<p>Вы не авторизованы</p>}>
        <p>Добро пожаловать, пользователь!</p>
      </Show>
      <button onCl ick={() => setIsLoggedIn(!isLoggedIn())}>Переключить статус</button>
    </div>
  );
}

В этом примере атрибут fallback используется для того, чтобы отобразить сообщение, когда условие isLoggedIn() не выполняется. Это делает код еще более компактным и легким для чтения, избегая необходимости писать явное условие для ложных состояний.

Условный рендеринг с асинхронными данными

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

Пример:

import { Show, createSignal, createEffect } from 'solid-js';

function Example() {
  const [data, setData] = createSignal(null);
  const [loading, setLoading] = createSignal(true);

  createEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(fetchedData => {
        setData(fetchedData);
        setLoading(false);
      });
  });

  return (
    <div>
      <Show when={loading()}>
        <p>Загрузка...</p>
      </Show>
      <Show when={!loading()}>
        <p>Данные: {JSON.stringify(data())}</p>
      </Show>
    </div>
  );
}

В данном примере, пока данные загружаются, отображается сообщение “Загрузка…”. Как только загрузка завершена, рендерится сам контент. Этот подход удобен для работы с данными, полученными через API или другие асинхронные операции.

Вывод

Условный рендеринг в Solid.js позволяет эффективно управлять отображением элементов в зависимости от состояния приложения. Благодаря компоненту Show, который является ключевым инструментом для такой задачи, код остается лаконичным и читаемым. Использование реактивных значений и оптимизированного рендеринга помогает избежать лишних перерисовок, что особенно важно для производительных интерфейсов.

Оглавление