Очки знаний React Native для интервью

JavaScript React.js опрос React Native
Очки знаний React Native для интервью

Эта статья изначально была опубликована в публичном аккаунте: круг разработки ReactNative, и для перепечатки необходимо указать источник.

Эта статья будет время от времени обновляться. Если вы хотите проверить последнюю версию, перейдите по ссылке https://github.com/forrest23/react-native-interview.


1. Каковы преимущества React Native перед нативными ios и Android?

1. Производительность сопоставима с родным приложением 2. Пишите на JavaScript, просто выучите язык 3. Большая часть кода может использоваться совместно между Android и IOS. 4. Компонентная разработка, повторное использование кода 5. Как и при написании веб-страницы, ее можно автоматически обновлять после изменения кода, нет необходимости медленно компилировать, что экономит много времени ожидания компиляции. 6. Поддержка горячего обновления приложения, обновление без переустановки приложения

недостаток: Относительно высокое использование памяти Версия не стабильная, обновилась, а стабильная версия 1.0 еще не вышла

2. Жизненный цикл компонентов React Native

Жизненный цикл Количество вызовов Можно ли использовать setSate() getDefaultProps 1 (вызывается один раз глобально) Нет getInitialState 1 нет компонентWillMount 1 визуализировать >=1 нет компонентDidMount 1 есть componentWillReceiveProps >=0 да shouldComponentUpdate >=0 нет componentWillUpdate >=0 нет componentDidUpdate >=0 нет componentWillUnmount 1 нет

3. Что происходит, когда вы вызываете setState?

При вызове setState первое, что сделает React, — это объединит объект, переданный в setState, с текущим состоянием компонента. Это инициирует процесс, называемый примирением. Конечная цель согласования — обновить пользовательский интерфейс в соответствии с этим новым состоянием наиболее эффективным способом. Для этого React построит новое дерево элементов React (вы можете думать об этом как об объектном представлении пользовательского интерфейса). Когда у вас есть это дерево, React сравнит ( diff ) это новое дерево с предыдущим деревом элементов, чтобы выяснить, как изменился пользовательский интерфейс в ответ на новое состояние. Делая это, React будет точно знать, что изменилось, и, зная, что изменилось, он может минимизировать влияние пользовательского интерфейса, выполняя обновления только тогда, когда это абсолютно необходимо.

4. Сходства и различия между реквизитом и состоянием

1. Будь то изменение реквизита или состояния, оно вызовет повторный рендеринг рендера. 2. Начальное значение может быть установлено соответствующей функцией инициализации собственного компонента.

разница 1. Источник начального значения: начальное значение состояния берется из собственной функции getInitalState (конструктора), реквизиты берутся из родительского компонента или его собственного getDefaultProps (если ключ тот же, первый может переопределить второй).

2. Метод модификации: состояние может быть установлено только в его собственном компоненте и не может быть изменено родительским компонентом, свойства могут быть изменены только родительским компонентом, а не его собственным компонентом.

3. Для дочерних компонентов: props — это поток данных, передаваемый от родительского компонента к дочернему, и этот поток данных может быть передан до компонентов-потомков, состояние представляет собой внутреннее состояние компонента и может существовать только в своем собственном компонент.

5. Что должно делать ComponentUpdate

На самом деле, эта проблема также связана с примирением. «Конечная цель согласования — обновить пользовательский интерфейс в соответствии с новым состоянием наиболее эффективным способом». Если мы знаем, что определенная часть нашего пользовательского интерфейса (UI) не изменится, Тогда у React нет причин пытаться выяснить, должен ли он отображаться. Возвращая false из shouldComponentUpdate, React будет предполагать, что текущий компонент и все его дочерние элементы останутся такими же, как текущий компонент.

6. Функция props.children.map в reactJS для обхода получит запрос об исключении, почему? Как его нужно пройти?

Для this.props.children есть три возможных значения: 1. Текущий компонент не имеет дочерних узлов, он не определен; 2. Есть дочерний узел, тип данных объектный; 3. Имеется несколько дочерних узлов, а тип данных — массив. Система предоставляет метод React.Children.map() для безопасного обхода объектов дочерних узлов.

7. Процесс управления состоянием редукции

Действие — это обычный объект, запускаемый пользователем или программой. Редуктор выдает разные ответы данных в соответствии с операцией действия и возвращает новое состояние. Окончательное значение хранилища определяется значением редуктора. (Магазин — это объект, редюсер изменит некоторые значения в сторе) действие -> редуктор -> новый магазин -> обратная связь с пользовательским интерфейсом изменилась.

8. Механизм загрузки пачек

Чтобы реализовать горячее обновление скриптов RN, нам нужно понять, как RN загружает скрипты. При написании бизнес-логики у нас будет много js-файлов.При упаковке RN упакует эти js-файлы в файл с именем index.android.bundle (index.ios.bundle для ios), все js-файлы.Код (включая rn исходный код, сторонняя библиотека и код бизнес-логики) находится в этом файле, и файл пакета будет загружен при первом запуске приложения, поэтому для горячего обновления сценария необходимо заменить пакет файл.

9. Гибкая компоновка

Элементы, в которых используется макет Flex, называются контейнерами Flex или для краткости «контейнерами». Все его дочерние элементы автоматически становятся членами контейнера, называемыми flex-элементами (flex-элементами), или для краткости «items».

Контейнер по умолчанию имеет две оси: горизонтальную главную ось (основную ось) и вертикальную поперечную ось (поперечную ось). Начальное положение главной оси (пересечение с границей) называется основным началом, а конечное положение — основным концом, начальное положение поперечной оси — поперечным началом, а конечное положение — поперечным концом.

По умолчанию элементы располагаются вдоль главной оси. Пространство по главной оси, занимаемое одним элементом, называется основным размером, а занимаемое им пространство по поперечной оси называется поперечным размером.

свойства контейнера Для контейнера заданы следующие 6 свойств. Свойство flex-direction определяет направление главной оси (то есть направление, в котором располагаются элементы). Свойство flex-wrap определяет, как выполнить перенос, если одна ось не подходит. flex-flow Свойство flex-flow является сокращением для свойств flex-direction и flex-wrap. justify-content определяет выравнивание элементов по главной оси. Свойство align-items определяет, как элементы выравниваются по поперечной оси. align-content Свойство align-content определяет выравнивание нескольких осей. Это свойство не действует, если элемент имеет только одну ось.

10. Пожалуйста, кратко опишите принцип отправки кода

code push вызывает команду пакета react native для упаковки несобственного кода текущей среды в пакетный файл, а затем загружает его на облачный сервер Microsoft (Windows Azure). Напишите код для запроса обновления на начальной странице (или заставке) в приложении (запрос включает локальную версию, hashCode, appToken и другую информацию).Сервер Microsoft сравнивает локальную версию пакета js с версией Microsoft Если локальная версия низкая, скачайте ее.

11. В чем самая большая разница между синхронным действием и асинхронным действием в Redux

Синхронизация просто возвращает простой объект действия. Асинхронная операция вернет функцию обещания в середине. Конечно, обычный объект действия также будет возвращен после обработки функции обещания. Промежуточное ПО thunk должно определить, что если возвращаемая функция является функцией, она не будет передана редьюсеру и не будет обработана редьюсером, пока не обнаружит обычный объект действия.


Эта статья будет время от времени обновляться. Если вы хотите проверить последнюю версию, перейдите по ссылке https://github.com/forrest23/react-native-interview.

Название этой статьи взято из Интернета, если есть какие-либо нарушения, пожалуйста, свяжитесь со мной!

Добро пожаловать в мой публичный аккаунт WeChat:Круг разработки ReactNative