Junior React Native Developer — Питання на співбесіді React Native

Що таке компонент у React Native, і в чому різниця між функціональним і класовим компонентом?

Компонент — перевикористовуваний шматок UI, написаний як функція (або, історично, клас), що повертає JSX з описом того, що рендерити. Функціональні компоненти з хуками зараз норма — код чистіший, немає проблем з байндингом this, і stateful-логіку можна перевикористовувати між компонентами через кастомні хуки так, як не дозволяли методи життєвого циклу класу. Класові компоненти досі працюють і трапляються в старих кодових базах, але новий код за замовчуванням функціональний.

У чому різниця між props і state?

Props приходять від батька, і компонент не може їх змінювати — ставтеся до них як до вхідних даних лише для читання. State належить самому компоненту, створюється через useState, і його зміна запускає ре-рендер. Текст на кнопці зазвичай props; чи відкрито зараз модальне вікно — зазвичай state.

Що робить `useEffect`?

Запускає функцію після рендера компонента для всього, що не є чистим рендерингом — завантаження даних, підписка на подію, встановлення таймера. Масив залежностей контролює, коли ефект перезапускається, а функція очищення, повернута з нього, відписує перед наступним запуском або при розмонтуванні. Пропуск масиву залежностей означає, що ефект запускатиметься після кожного рендера, що рідко потрібно насправді.

Як стилізувати компонент у React Native?

За допомогою JS-обʼєкта, зазвичай створеного через StyleSheet.create({...}) і переданого в проп style — окремого CSS-файлу немає. Розкладка за замовчуванням використовує Flexbox з flexDirection: 'column', тому flex: 1, justifyContent і alignItems — найуживаніші властивості для розташування дочірніх елементів. StyleSheet.create також дозволяє React Native валідувати стилі й посилатися на них за ID замість перестворення обʼєкта на кожному рендері.

Як перемикатися між екранами через React Navigation?

Обгорнути застосунок у навігатор — зазвичай stack-навігатор для типового патерну push/pop, — зареєструвати кожен екран під іменем і викликати navigation.navigate('ScreenName') з екрана, щоб перейти на нього. Параметри передаються разом з викликом, navigation.navigate('Details', { id: 5 }), а цільовий екран читає їх через route.params. Повернення назад — через navigation.goBack() або нативний жест/кнопку «назад», які stack-навігатор підключає автоматично.

Чим React Native відрізняється від React для вебу?

Тут немає DOM і браузера — <View>, <Text> і <Image> заміняють <div>, <span> і <img> та рендеряться в реальні нативні UIKit/Android view, а не в HTML-елементи. Стилізація — JS-обʼєкти замість CSS, немає className, а браузерних API на кшталт localStorage не існує — у React Native свої аналоги, наприклад AsyncStorage. Модель компонентів, хуки й однонапрямлений потік даних — в іншому та сама ментальна модель, що й у React для вебу.