Mengembara dari React to React Native

En tant que développeur React/JS, vous avez probablement eu la pensée "Dois-je apprendre React Native ?" C'est une question légitime et je me l'ai posée il y a quelques années . Il s'avère qu'apprendre React Native était définitivement la bonne décision. C'est ce qui m'a valu le rôle de Sr. Developer Advocate chez Amazon, où j'utilise désormais React Native pour créer des applications sur les appareils Android, Fire TV et les tablettes.

Si vous vous demandez s'il faut aller au-delà des applications Web, voici quelques réflexions sur les raisons pour lesquelles cela vaut la peine d'envisager :

Pourquoi apprendre React Native ?

• La philosophie « apprendre une fois, écrire n'importe où » s'étend au-delà d'iOS et d'Android : elle inclut désormais des plates-formes comme tvOS, VisionOS et même des environnements de bureau comme React-native-macos

• Pertinence pour l'industrie : de grandes entreprises comme Amazon, Meta et Microsoft adoptent toutes React Native. Pourquoi ? Réutilisabilité du code, rentable et vous permet de créer des plateformes multiplateformes.

• Fort soutien de la communauté : React Native compte plus de 100 000 étoiles et 24 000 forks sur GitHub, avec des mises à jour régulières et un développement actif.

• Satisfaction élevée des développeurs : Selon l'enquête State of React Native, 90 % des développeurs utiliseraient à nouveau React Native !

• Écosystème unifié : La communauté React Native se mobilise autour d'Expo, conduisant à des améliorations plus rapides, à des bibliothèques tierces bien intégrées et à des ressources partagées abondantes.

• Expérience de développeur familière

React vs React Native : similitudes et différences

Architecture et compilation

Similitudes :

Les deux utilisent un processus de réconciliation souvent appelé « DOM virtuel ». Ce processus compare une arborescence à une autre pour déterminer quelles parties de l'interface utilisateur doivent être mises à jour. Pour cette raison, ils prennent tous deux en charge l’actualisation rapide, vous permettant de voir les modifications de l’interface utilisateur en temps réel.

Différences :

React se compile pour s'afficher dans les navigateurs Web, en tirant parti du DOM et des API Web. Même lorsqu'il est accessible via des navigateurs mobiles, il est toujours limité par les capacités du navigateur et l'accès limité aux fonctionnalités natives de l'appareil.

React Native, quant à lui, se compile en code natif, permettant un accès direct aux API et fonctionnalités spécifiques à la plate-forme. Cela signifie que les applications React Native peuvent utiliser les fonctionnalités de l'appareil telles que l'accès à la caméra, les notifications push, offrant ainsi une expérience utilisateur native. Pour cette raison, il adopte une approche différente de son architecture, avec ce qu'on appelle l'architecture « sans pont », et à la place du DOM, il comporte des composants natifs. Il utilise le module Turbo Native et exploite une interface JavaScript (JSI) permettant une communication directe entre JavaScript et le code natif. Cette architecture est nouvelle et vous entendrez peut-être parler de « nouvelle architecture ». Si vous souhaitez en savoir plus, j'en ai parlé dans un article précédent.

JSX et crochets

Similitudes

Les deux utilisent JSX pour décrire l'interface utilisateur et prennent en charge les hooks React (useState, useEffect, etc.). Cela vous permet de maintenir un style de codage et une approche de gestion d'état cohérents dans les deux bibliothèques.

Composants

Similitudes

React et React Native suivent une architecture basée sur des composants et les composants suivent les mêmes méthodes de cycle de vie sous le capot.

Différences :

1. Importations de composants : dans React Native, vous importez des composants d'interface utilisateur à partir de React-Native, contrairement à React où les éléments HTML sont disponibles globalement. Cette différence est en fait l'une de mes choses préférées à propos de React Native, car vous avez accès à un ensemble de composants prédéfinis, par exemple. Vue, Texte, Image, TextInput, ScrollView.
2. Composants spécifiques à la plate-forme : React Native propose également des composants et des API prêts à l'emploi adaptés à iOS et Android.
3. Gestion du texte : dans React Native, tout le texte doit être enveloppé dans un composant, contrairement à React où le texte peut être placé directement dans de nombreux éléments. Cela garantit un style et un comportement corrects du texte sur différentes plates-formes, améliorant ainsi la cohérence et l'accessibilité.
4. Gestion des événements : React utilise onClick pour les événements de clic, tandis que React Native utilise onPress pour les interactions tactiles, reflétant la nature différente des interactions.

Penggayaan

Persamaan

Kedua-dua React dan React Native menawarkan pendekatan yang fleksibel untuk komponen penggayaan. Kedua-duanya menyokong penggayaan sebaris, membolehkan anda menggunakan gaya terus pada komponen. Selain itu, kedua-duanya membolehkan penciptaan objek gaya boleh guna semula.

Perbezaan

1. Bahasa Penggayaan: React biasanya menggunakan perpustakaan CSS atau CSS-dalam-JS untuk penggayaan manakala React Native menggunakan sistem penggayaan berasaskan objek JavaScript dengan beberapa perbezaan:
   • Nama Harta: React Native menggunakan camelCase untuk nama harta (cth., Saiz fon dan bukannya saiz fon).
   • Unit Nilai: Dalam React Native anda tidak memerlukan unit untuk sifat seperti lebar, tinggi atau Saiz fon, ia secara automatik menganggap dimensi dalam piksel bebas ketumpatan.
2. StyleSheet API: React Native menyediakan kaedah StyleSheet.create() untuk mencipta objek gaya. API ini meningkatkan prestasi dengan mengurangkan keperluan untuk mencipta semula objek gaya pada setiap paparan.
3. Aplikasi Gaya: Tidak seperti dalam React di mana nama kelas boleh digunakan untuk menggunakan gaya, React Native menggunakan gaya terus pada komponen menggunakan prop gaya.
4. Subset CSS Terhad: React Native hanya menyokong subset sifat CSS, memfokuskan pada yang sesuai untuk reka letak yang berbeza. Ini bermakna sesetengah sifat khusus web (seperti apungan) tidak tersedia, manakala yang lain (seperti flex) mungkin berkelakuan berbeza.

Perpustakaan & Perkakas

Persamaan

React dan React Native berkongsi banyak perpustakaan teras. Anda boleh menggunakan pustaka pengurusan keadaan yang sama seperti Redux, MobX dan pustaka pengambilan data seperti Axios atau API Ambil.

Perbezaan

Navigasi: Semasa dalam React anda biasanya menggunakan React Router untuk navigasi web, React Native mempunyai pustaka React Navigation sendiri. Ini kerana React (Web) biasanya menggunakan navigasi berasaskan URL, di mana komponen berbeza dipaparkan berdasarkan laluan URL semasa. Manakala React Native menggunakan navigasi berasaskan tindanan, meniru pengalaman aplikasi mudah alih asli. Skrin 'bertindan' di atas satu sama lain, dengan peralihan menolak skrin baharu ke timbunan atau 'meletuskannya'.

? Nota: Ingat untuk menamakan folder anda 'Skrin' dan bukannya 'Halaman' semasa menstrukturkan apl anda.

Pengujian: konsep kekal serupa merentas kedua-dua perpustakaan, memfokuskan pada pemaparan komponen dan simulasi acara, tetapi perpustakaan ujian khusus berbeza. React menggunakan Pustaka React Testing, manakala React Native anda akan menggunakan React Native Testing Library (RNTL), tetapi jangan ditunda kerana RNTL hanya menyediakan fungsi utiliti ringan di atas React Test Renderer.

? Sesetengah perpustakaan React mungkin tidak serasi dengan semua platform React Native disebabkan kebergantungan DOM, namun anda boleh menyemak keserasian platform semua perpustakaan di: (https://reactnative.directory)

Merapatkan Jurang dengan Apl Universal React

Jika anda masih di atas pagar, kebangkitan Universal React Apps adalah ruang yang sangat menarik yang semakin merapatkan jurang antara React dan React Native. Pustaka dan alatan Universal React, biasanya dikuasakan oleh web-react-asli membolehkan anda membuat aplikasi merentas platform yang berjalan pada iOS, Android dan Web semuanya daripada pangkalan kod React Native yang dikongsi. Ini membolehkan anda berkongsi navigasi, penggayaan, pengurusan negeri dan logik perniagaan menjimatkan masa dan usaha anda sambil menghormati konvensyen unik setiap jenis peranti.

Jadi apabila garisan antara DOM dan Peranti terus kabur, menerima React Native membuka pintu kepada dunia pembangunan aplikasi berbilang platform yang menarik!

Jika anda sudah bersedia untuk bermula, semak ulasan untuk sumber kegemaran saya atau komen dengan anda di bawah ⬇️

Atas ialah kandungan terperinci Mengembara dari React to React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!