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

Все темы 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>
    );
  }
}

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

Что такое ключи (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 помогает оптимизировать рендеринг длинных списков, отображая только видимые элементы, что значительно улучшает производительность.

Почему индекс массива опасен как key в изменяемом списке?

React использует key, чтобы сопоставить элемент между рендерами. Если ключ равен индексу, вставка, удаление или сортировка сдвигает ключи на другие сущности. Тогда локальное состояние, DOM input и эффекты могут остаться на позиции и визуально перейти к другой строке. Стабильный уникальный ID сохраняет идентичность сущности. Индекс приемлем для полностью статичного списка, который не меняет порядок и элементы и где строки не имеют состояния, но это хрупкое предположение. key должен быть уникален среди siblings и стабилен, а не генерироваться заново при render.