React Frontend Developer

Question 1

Что такое реактивность?

Accepted Answer

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

Question 2

Как работает реактивность под капотом и как реализовать её?

Accepted Answer

Реактивность в React работает через использование состояния и хуков, таких как useState и useEffect. Когда состояние изменяется, React автоматически инициирует перерисовку компонентов, которые зависят от этого состояния, обеспечивая согласованность между данными и интерфейсом. Реактивность достигается через механизм подписки на изменения состояния и виртуальный DOM, который минимизирует обновления реального DOM.

Question 3

На каком паттерне построен MobX?

Accepted Answer

MobX построен на паттерне Observer и принципах реактивного программирования. Состояние объявляется как observable, а компоненты автоматически становятся наблюдателями. При изменении данных MobX сам решает, какие части UI нужно обновить. Разработчику не нужно вручную описывать связи между состоянием и представлением.

Question 4

Чем отличается изменение state от изменения ref в React

Accepted Answer

Изменение state приводит к ререндеру компонента, а изменение ref — нет. state используется для данных, которые влияют на отображение UI. ref нужен для хранения мутабельных значений, которые должны сохраняться между рендерами, но не участвуют в отрисовке. React не отслеживает изменения ref.current.

Question 5

Почему MobX сложнее дебажить

Accepted Answer

MobX сложнее дебажить из-за неявных зависимостей. Компоненты автоматически подписываются на observable-данные, и не всегда очевидно, что именно вызвало обновление. В отличие от Redux, где поток данных строго детерминирован, в MobX реактивность происходит “магически”. Это усложняет трассировку изменений.

Question 6

Что произойдёт, если добавить новое свойство в объект после его инициализации во Vue?

Accepted Answer

Если добавить новое свойство в объект после его инициализации, Vue не сделает его реактивным автоматически. Такое свойство не будет отслеживаться системой реактивности. В результате изменения этого свойства не вызовут обновление шаблона. Это связано с тем, как Vue перехватывает доступ к свойствам. Для корректной работы нужно использовать специальные методы.

Question 7

Почему нельзя мутировать состояние напрямую?

Accepted Answer

Прямая мутация состояния нарушает принцип иммутабельности, который является основой предсказуемости в современных UI-фреймворках. Когда объект мутируется напрямую, ссылка на него остаётся прежней, и система не может обнаружить, что состояние изменилось. Это приводит к тому, что компоненты не перерисовываются, кэши не инвалидируются, а история изменений теряется. Вместо этого нужно создавать новые объекты или массивы, например, используя оператор spread или методы вроде map и filter.

Question 8

Где в реальном приложении применяется паттерн Observer? Приведите конкретный пример.

Accepted Answer

Паттерн Observer используется, когда один объект (субъект) уведомляет множество зависимых объектов (наблюдателей) об изменениях своего состояния. Например, в интерфейсе пользователя при изменении данных модели автоматически обновляются все связанные представления. Это реализует слабую связанность и упрощает поддержку кода.

Вопросы React Frontend Developer