Вопросы для собеседования по React Native


Как создать пользовательские нативные модули?

  • Создайте класс модуля, расширяющий ReactContextBaseJavaModule
  • Экспортируйте имя модуля и функции, аннотированные как @ReactMethod
  • В файле MainPackage добавьте только что созданный модуль в список модулей.
  • Импортируйте NativeModule из пакета react-native в JS-файл.
  • Более подробная информация здесь

Как создать пользовательские нативные UI-компоненты?

  • Создайте подкласс ViewManager
  • Предложите свойства, аннотированные как @ReactProps
  • Зарегистрируйте свой класс ViewManager
  • Создайте свой класс View
  • Больше информации здесь

Количество потоков в React Native?

  • Поток Javascript, который обрабатывает бизнес-логику, вызовы api, события касания
  • Основной поток, который обрабатывает нативную логику

Каковы общие узкие места или проблемы с производительностью?

  • Использование большого ScrollView вместо ListView или FlatList
  • Ненужный повторный рендеринг без изменения пользовательского интерфейса
  • Неправильное использование ключей. Подробнее читайте здесь
  • Тяжелая анимация (анимация рассчитывается в потоке Javascript). Используйте useNativeDriver как true, чтобы использовать родной apis и перенести вычисления в основной поток.

Как улучшить производительность?

  • использовать движок hermes
  • используйте inline requires для дорогих или больших модулей, например, для :
let VeryExpensive = null;
const Home = () => {
    const onClickHandler = () => {
        if (VeryExpensive == null) {
            VeryExpensive = require('./VeryExpensive').default;
        }
    }
}
Войти в полноэкранный режим Выход из полноэкранного режима

Что такое hermes?

  • Открытый JS-движок, оптимизированный для React Native
  • Помогает улучшить время запуска приложения, снизить потребление памяти и уменьшить размер приложения.
  • Больше информации здесь

Что такое Turbomodules?

  • Реархитектура системы нативных модулей
  • Поможет обеспечить более эффективную типобезопасную коммуникацию между JS и Native без использования моста React Native

Как анимировать вещи?

  • Используйте встроенные анимационные API для декларативной анимации между входом и выходом
  • Используйте LayoutAnimation API для всех анимированных представлений в следующем цикле рендеринга. В основном используется для обновления макета flexbox

Оцените статью
devanswers.ru
Добавить комментарий