Что такое рендер в React?

Question 1

Что такое рендер в React?

Answer 1

Рендеринг — это процесс, в рамках которого React опрашивает ваши компоненты, требуя от них актуальное описание той секции пользовательского интерфейса, за которую они отвечают, основываясь на текущей комбинации пропсов (props) и состояния (state).

React начинает процесс рендеринга с корня дерева компонентов и циклически спускается вниз, чтобы найти все компоненты, помеченные как требующие обновления. Для каждого помеченного компонента React вызывает либо classComponentInstance.render() (для классовых компонентов), либо FunctionComponent() (для функциональных компонентов) и сохраняет результат рендеринга.

Результат рендеринга компонентов обычно представлен в виде JSX-кода, который затем компилируется и развертывается как JS-код, принимая вид серии вызовов React.createElement(). Функция createElement возвращает React-элементы, представляющие собой простые JS-объекты, описывающие желаемую структуру пользовательского интерфейса.

// This JSX syntax:
return <SomeComponent a={42} b=”testing”>Text here</SomeComponent>

// is converted to this call:
return React.createElement(SomeComponent, {a: 42, b: “testing”}, “Text Here”)

// and that becomes this element object:
{type: SomeComponent, props: {a: 42, b: “testing”}, children: [“Text Here”]}

Собрав результаты рендеринга всего дерева компонентов, React делает сравнение с новым деревом объектов (его часто называют «виртуальной DOM») и составляет список всех изменений, которые нужно внести в «настоящую» DOM, чтобы привести ее к желаемому в данный момент виду. Процесс сопоставления двух деревьев и вычисления разницы между ними называется согласованием.

Затем React одним махом применяет все рассчитанные изменения к DOM в синхронном режиме.

Рендеринг происходит, когда:
- изменяется состояние, происходит перерисовка, поменялся глобальный стейт
- перерисовка дочерней компоненты
- пришли новые пропсы и контекст - изменяются