Рендеринг

Для рендеринга React-элемента, сперва передайте DOM-элемент в ReactDOM.createRoot(), далее передайте React-элемент в root.render():

const root = ReactDOM.createRoot(document.getElementById("root"))
const element = <h1>Hello, world</h1>
 
root.render(element)

На практике большинство React-приложений вызывают root.render() только один раз.

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

Условный рендеринг в React работает так же, как условные выражения работают в JavaScript. Бывает нужно объяснить React, как состояние влияет на то, какие компоненты требуется скрыть, а какие — отрендерить, и как именно. В таких ситуациях используйте условный оператор JavaScript или выражения подобные if.

Рассмотрим два компонента:

function UserGreeting(props) {
  return <h1>С возвращением!</h1>
}
 
function GuestGreeting(props) {
  return <h1>Войдите, пожалуйста.</h1>
}

Можно создать компонент Greeting, который отражает один из этих компонентов в зависимости от того, выполнен ли вход на сайт:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn
  if (isLoggedIn) {
    return <UserGreeting />
  }
  return <GuestGreeting />
}
 
const root = ReactDOM.createRoot(document.getElementById("root"))
// Попробуйте заменить на isLoggedIn={true}:
 
root.render(<Greeting isLoggedIn={false} />)

В этом примере рендерится различное приветствие в зависимости от значения пропа isLoggedIn.

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

Работа с коллекциями

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

Пример:

const items = ["Item 1", "Item 2", "Item 3"]
 
function List() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  )
}

Здесь мы создали массив items с тремя элементами, а затем использовали компонент map, чтобы создать список элементов <li> на основе каждого элемента массива. Ключ key используется для оптимизации производительности и идентификации каждого элемента списка.

Кроме того, в React есть множество библиотек и компонентов, которые упрощают работу с коллекциями элементов, таких как react-virtualized и react-window. Эти библиотеки позволяют рендерить большие списки элементов с высокой производительностью, используя технику виртуализации.

Например, библиотека react-virtualized позволяет создавать виртуальные списки элементов, которые отображают только те элементы, которые видимы в текущем окне браузера. Это позволяет уменьшить количество элементов, которые нужно отображать на странице, и улучшить производительность приложения.

Пример:

import { List } from "react-virtualized"
 
const items = ["Item 1", "Item 2", "Item 3"]
 
function VirtualList() {
  return (
    <List
      width={300}
      height={300}
      rowCount={items.length}
      rowHeight={30}
      rowRenderer={({ index, key, style }) => (
        <div key={key} style={style}>
          {items[index]}
        </div>
      )}
    />
  )
}

Здесь мы использовали компонент List из библиотеки react-virtualized, который создает виртуальный список элементов на основе массива items. Компонент List принимает ряд параметров, таких как ширина и высота списка, количество элементов в списке и функцию rowRenderer, которая генерирует элементы списка на основе каждого элемента массива.

Назад