Перейти к основному содержимому

Вопросы по React

Что такое React?​

Это JavaScript-библиотека для разработки пользовательского интерфейса

Перечислите премущества React​

  • Основан на компонентах
  • Компоненты можно переиспользовать
  • Можно использовать на сервере и на мобильных платформах с помощью React Native
  • Декларативный подход, он сокращает код и делает его понятным
  • Использование JSX(xml-подобной разметки в JavaScript)
  • Использование виртуального DOM
  • React является самым популярным фреймворком для создания сайтов
  • Огромнейшее комьюнити- Больше всего предложений на рынке труда
  • Спроектирован так, чтобы его можно было внедрять постепенно

Что такое виртуальный DOM?​

  • Виртуальный DOM — объект, в котором хранится информация о состоянии интерфейса
  • Использование виртуального DOM позволяет библиотеке эффективно обновлять реальный DOM

Для чего нужен Gatsby?​

  • Лучший способ для создания статических сайтов с помощью React
  • Выводит предварительно отрендеренный HTML и CSS, чтобы гарантировать минимальное время загрузки

Назовите инструменты которые использует React​

  • Менеджер пакетов
  • Сборщик
  • Компилятор

Зачем нужен атрибут crossorigin?​

  • Такая практика позволит улучшить обработку ошибок в React 16 и более новых версиях

Назовите особености JSX​

  • Предотвращает атаки XSS, основанные на инъекции кода
  • Представляет собой объекты, так как при компиляции Babel компилирует JSX в вызовы React.createElement
  • Можно использовать силу JS прямо в компонентах
  • В React разметке нельзя предотвратить обработчик события по умолчанию, вернув false. Нужно явно вызвать preventDefault у объекта события функции
  • JSX-тип не может являться выражением<components[props.storyType] /> // Ошибка!!
  • Обходной путь: const SpecificStory = components[props.storyType]return <SpecificStory />
  • JSX удаляет пустые строки и пробелы в начале и конце строки

В чем разница между элементами и компонентами?​

  • Элементы — это то, «из чего сделаны» компоненты
  • Компоненты это способ реализации кода таким образом чтобы его можно было переиспользовать

Как происходит обновление элементов на странице?​

  • Элементы React иммутабельны. После создания элемента нельзя изменить его потомков или атрибуты
  • Единственный способ обновить елемент - это заново его отрисовать

Что такое ключи и зачем они нужны?​

  • Ключи это помощники любого списка которые служат идентификатором элемента
  • Они помогают React’у определять, какие элементы были изменены, добавлены или удалены. Тем самым React не будет заново обновлять элементы которые не изменились

Что такое бандлинг(сборка)?​

Это процесс выявления импортированных файлов и объединения их в один «собранный» файл

Какая основная проблема сборки? Назовите ее решения​

  • Чем больше ваш проект, тем больше будет весить сборка. Вам нужно следить за кодом, который вы подключаете, для того чтобы добиться быстрой загрузки страницы
  • Вариантом решения является разделение кода, благодаря которому можно создавать несколько сборок и загружать их по мере необходимости
  • Лучший способ разделения кода - использовать динамический импорт: import()* Функция React.lazy позволяет рендерить динамический импорт как обычный компонент
  • Компонент с ленивой загрузкой должен рендериться внутри компонента Suspense
  • При использовании динамического импорта так же стоит установить @babel/plugin-syntax-dynamic-import

Как определить React фрагменты с ключами?​

Фрагменты, объявленные с помощью <React.Fragment>, могут иметь ключи

Что такое компонент высшего порядка(HOC)?​

  • Функция, которая принимает компонент и возвращает новый компонент называется HOC, это один из продвинутых способов для повторного использования логики
  • Минус HOC в том, что он создает новую Ноду(элемент в DOM дереве) перед компонентом

Чем отличается React.PureComponent от React.Component?​

  • В React.Component при изменении значения или пропса сразу происходит обновление, не смотря на прошлое значение
  • В React.PureComponent идет поверхностное сравнение(shallowEqual) прошлого значения и нового, и от результата зависит будет ли компонент ре-рендериться

Что такое хуки?​

Это функции, с помощью которых вы можете «подцепиться» к состоянию и методам жизненного цикла React из функциональных компонентов

Что такое Flux - архитектура? Какие сущности она имеет?​

Flux-архитектура - подход программирования для дополнения интерфейса веб-приложений, сочетающийся с реактивным программированием и построенный на однонаправленных потоках данных- В абстракции Flux-архитектура может содержать 4 слоя: Действия, Диспатчер, Хранилище, Представление

Объясните методы жизненного цикла компонентов React​

  • componentWillMount() - выполняется перед рендерингом как на клиенте, так и на сервере
  • componentDidMount() - выполняется только на клиенте после первого рендеринга
  • componentWillReceiveProps() - вызывается до того, как смонтированный компонент получит новые пропсы
  • shouldComponentUpdate() - возвращает истину или ложь в зависимости от определенных условий. Если вы хотите обновить компонент, верните true, в противном случае верните false
  • componentWillUpdate() - вызывается перед отрисовкой в DOM
  • componentDidUpdate() - вызывается сразу после отрисовки
  • componentWillUnmount() - вызывается после размонтирования компонента из DOM. Используется для очистки памяти.

Каковы основные проблемы фреймворка MVC?​

  • Стоимость манипуляции с DOM очень высока
  • Программа работает медленно и неэффективно
  • Серьезная трата памяти
  • Из-за циклических зависимостей модели компонентов необходимо создавать на основе моделей и представлений

Каким трем принципам следует Redux?​

  • Единый источник истины- Состояние доступно только для чтения
  • Используйте чистые функции для изменений(Чистые функции - это те, возвращаемое значение которых зависит только от значений их параметров)

Каковы некоторые ограничения react?​

  • React JS - это библиотека JavaScript, а не полноценный фреймворк
  • Библиотека React чрезвычайно велика и может потребоваться дополнительное время и опыт, чтобы действительно понять все

Как React можно принудить перемонтировать компонент?​

С помощью простой хитрости - предоставлением ключа (key) нашему компоненту и изменением его значения

Что такое «Рендер-пропсы»(другими словами render callback)?​

В чем разница между controlled и uncontrolled компонентами?​

  • Контролируемый компонент — это такой компонент, где React осуществляет контроль и является единственным источником правды для данных формы(например с помощью хуков)
  • Некотролируемый компонент — это такой компонент, где ваши данные формы обрабатываются в DOM, а не внутри вашего компонента(прямо в jsx)

Почему необходимо использовать React.Children.map(children, () => ) вместо children.map(() => )?​

Нет гарантии, что props.children будет массивом

Можно ли передать второй аргумент в setState()? Если можно, то объясните за что он отвечает​

  • Да, функция обратного вызова, которая будет вызываться после выполнения функции setState и отрисовки компонента

Сколько аргументов принимает функция изменения состояния setState?​

Что такое Reconciliation (Cверĸа)​

  • это процесс, посредством ĸоторого React обновляет DOM

Объяснение React Fiber​

  • React Fiber - это реализация основного алгоритма React
  • Его главной особенностью является инкрементный рендеринг: возможность разделить работу рендеринга на куски и распределить их по нескольким кадрам.

Другие особенности:

  • Включают возможность приостанавливать, прерывать или повторно использовать работу по мере поступления новых обновлений
  • Возможность назначать приоритет разным типам обновлений
  • Новые примитивы параллелизма

EnglishMoji!

Проблемы?​

Problem

Пишите в Telegram или ВКонтакте, а также подписывайтесь на наши новости