Краткое руководство по методу render() в React
4 января 2024 г.
render() — очень важный, но часто неправильно понимаемый метод в React. В этом руководстве мы попытаемся пролить свет на то, что такое render(), что он делает и почему он так важен для процесса разработки с помощью React.
Что такое рендеринг в React?
Метод Render возвращает структуру компонента, написанную на JSX. Другими словами, он определяет, как должен выглядеть пользовательский интерфейс. Компоненты React повторно отображают каждый раз, когда происходит изменение состояния или свойств, чтобы последние изменения отражались на странице.
Автоматическое обновление (повторный рендеринг) для отображения последних изменений — ключевая функция React. Именно это позволяет Facebook отображать новые уведомления и комментарии без перезагрузки страницы.
Давайте подробнее рассмотрим, что именно делает метод render(). В моем блоге SimpleFrontEnd также рассматривается ряд конкретных случаев использования, например отрисовка при нажатии пользователем кнопки.
Как работает метод render()
Вы, наверное, заметили, что внутри класса компонентов метод render() возвращает HTML-подобный код для определения макета компонента. Функциональные компоненты не имеют явного метода render(), но сами функции работают так же.
Реагирование на изменения очень важно в React. Вот почему каждый компонент имеет метод render(). React вызывает метод render(), чтобы обновить макет компонента (и всех его дочерних элементов), чтобы убедиться, что он соответствует последним изменениям.
Далее давайте поговорим о том, что визуализируется. Метод render() отображает виртуальный DOM, а не реальный DOM, который мы видим в браузере. Virtual DOM — еще одна очень важная функция React. По сути, это облегченная копия реального DOM, поэтому React может эффективно отображать и повторно отображать его, чтобы приложение оставалось актуальным.
Как только render() обновит виртуальный DOM, React заметит различия между виртуальным DOM и реальным DOM. Библиотека автоматически обновляет HTML, чтобы отразить последние изменения. Все это происходит автоматически, без участия разработчиков.
Важно: метод render() запускается каждый раз, когда происходит изменение состояния или реквизита. Любые побочные эффекты в теле функции также будут выполняться.
Условный рендеринг в React
React — это библиотека JavaScript, поэтому вы можете использовать динамические выражения для рендеринга (или не рендеринга) элементов и компонентов. Вы также можете встраивать выражения JavaScript в макет компонента с помощью JSX.
Оператор if/else позволяет условно настроить макет компонента.
Как вы можете видеть в этом CodeSandbox, заголовок "Hello World" ' отображается, поскольку условие выполнено.
Важно! Большинство компонентов возвращают несколько компонентов и/или элементов. В React есть важное правило: компоненты всегда должны возвращать один элемент, поэтому не забудьте обернуть несколько элементов элементом div или фрагментом.
React также позволяет нам встраивать тернарные операторы в JSX. Таким образом, мы можем условно отображать компоненты прямо в макете.
Это базовые примеры. В реальном мире условия обычно определяются состоянием, а значения могут меняться в ответ на действия пользователей.
Оригинал