DOM и React Middle Паттерны компонентов обновлено
Функция как ребёнок
Условие
Компонент Mouse отслеживает позицию (обновляется по событию mousemove на document) и отдаёт её ребёнку-функции: <Mouse>{({x, y}) => …}</Mouse>. Слушатель снимается при размонтировании.
Что проверяют тесты
отдаёт начальную позицию
обновляется по движению
слушатель снимается
Как подойти
Render props разделяет поведение и отрисовку: один компонент знает, как следить за мышью, второй - как это показать. Сегодня то же самое обычно делают кастомным хуком: он короче и не создаёт лишний уровень в дереве. Знать паттерн всё равно нужно - на нём построены старые библиотеки и часть API react-router.
Подсказки: 2
- children может быть функцией - вызови её и верни результат.
- Слушатель вешается один раз, зависимости пустые.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.