В чем особенность рендеринга React?

В чем особенность рендеринга React?

React использует Virtual DOM - виртуальное представление интерфейса в памяти.

Основной процесс

1. React создаёт Virtual DOM на основе компонента
2. React сравнивает новый Virtual DOM со старым (Diff)
3. React обновляет только изменённые элементы в реальном DOM

Компонент → Virtual DOM → Diff → Real DOM

Пример Virtual DOM

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Увеличить
      </button>
    </div>
  );
}

// При изменении count:
// 1. Новый Virtual DOM с count=1
// 2. Сравнение со старым Virtual DOM
// 3. Обновление только <p> элемента в реальном DOM

Reconciliation (согласование)

React определяет, какие элементы изменились, используя ключи:

// Без key - React перестраивает весь список
{items.map((item, index) => <li>{item}</li>)}

// С key - React обновляет только изменённые элементы
{items.map(item => <li key={item.id}>{item}</li>)}

Batching обновлений

React группирует несколько setState вызовов в один рендер:

const handleClick = () => {
  setCount(count + 1);   // Не рендерит
  setName('John');       // Не рендерит
  setAge(30);            // Один рендер со всеми изменениями
};

Основные особенности

1. Реактивность - компонент автоматически перерендеривается при изменении state/props

2. Эффективность - обновляется только то, что изменилось

3. Декларативный подход - описываем, как должно выглядеть, а не как это сделать

4. Асинхронный рендеринг (React 18+) - может прерывать рендеринг для приоритетных обновлений

Best Practices

Используй правильные ключи в списках. Не создавай новые объекты при рендере. Используй useMemo и useCallback для оптимизации.

Особенность React - это использование Virtual DOM для эффективного обновления реального DOM. Это делает приложения быстрыми и отзывчивыми.