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

Все темы React Developer

Что такое условный рендеринг в React?

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

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

import React, { Component } from "react";

class Greeting extends Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;

    if (isLoggedIn) {
      return <h1>Привет, пользователь!</h1>;
    } else {
      return <h1>Пожалуйста, войдите в систему.</h1>;
    }
  }
}

export default Greeting;

В этом примере компонент Greeting в зависимости от значения пропса isLoggedIn рендерит разные заголовки. Если isLoggedIn равен true, отображается приветствие, в противном случае - приглашение к входу в систему.

Условный рендеринг можно реализовать также с помощью тернарного оператора:

class Greeting extends Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;

    return (
      <div>
        {isLoggedIn ? (
          <h1>Привет, пользователь!</h1>
        ) : (
          <h1>Пожалуйста, войдите в систему.</h1>
        )}
      </div>
    );
  }
}

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

Как реализовать условное добавление класса к элементу в React?

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

import React from "react";

const MyComponent = ({ isActive }) => {
  return (
    <div className={isActive ? "active" : "inactive"}>
      Содержимое компонента
    </div>
  );
};

export default MyComponent;

В этом примере класс active будет добавлен к элементу, если isActive равно true, иначе будет добавлен класс inactive.

import React from "react";

const MyComponent = ({ isActive }) => {
  const getClassNames = () => {
    return isActive ? "active" : "inactive";
  };

  return <div className={getClassNames()}>Содержимое компонента</div>;
};

export default MyComponent;

Здесь мы определяем функцию getClassNames, которая возвращает класс в зависимости от значения isActive.

Если вы хотите добавить несколько классов, вы можете использовать строковое объединение или библиотеки, такие как classnames.

import React from "react";
import classnames from "classnames";

const MyComponent = ({ isActive, isHighlighted }) => {
  const classNames = classnames({
    active: isActive,
    highlighted: isHighlighted,
  });

  return <div className={classNames}>Содержимое компонента</div>;
};

export default MyComponent;

В этом примере classnames библиотека позволяет добавить несколько классов на основе объекта, где ключи - это названия классов, а значения - условия, при которых класс будет добавлен.

Что такое ключи (keys) в списках React-элементов и зачем они нужны?

В React, ключи (keys) - это специальные атрибуты, используемые при рендеринге списков компонентов или элементов. Они помогают React оптимизировать процесс обновления и перерисовки компонентов в списках.

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

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

import React from "react";

const TodoList = ({ todos }) => {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

export default TodoList;

В примере todo.id сохраняет идентичность задачи при вставках, удалениях и перестановках. Сам по себе key не предотвращает повторный рендер компонента.

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

Что такое “виртуализация списка” (list virtualization) и как она реализуется в React?

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

Основные характеристики:

1. Экономия ресурсов:

   • Рендерятся только элементы, видимые в области прокрутки, что улучшает производительность.

2. Простота реализации:

   • В React можно использовать библиотеки для виртуализации, такие как react-virtualized или react-window.

Пример для react-window 1.x с FixedSizeList. В 2.x API отличается:

import { FixedSizeList as List } from "react-window";

const Row = ({ index, style }) => <div style={style}>Row {index}</div>;

const Example = () => (
  <List height={150} itemCount={1000} itemSize={35} width={300}>
    {Row}
  </List>
);

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