Tujuan dan pentingnya Web React sangat jelas: Biarkan Kode Native React berjalan di web dan biarkan satu set kode yang dijalankan pada berbagai terminal seluler. Untuk front-end dan bisnis, ini adalah peningkatan kualitatif dalam efisiensi pengembangan. Pada tahap awal proyek, kami juga berkonsultasi dengan tim React dengan pertanyaan serupa. Teman sekelas inti dari tim mereka @VJEUX juga berpikir ini adalah hal yang sangat keren dan apa yang ingin mereka lakukan di masa depan. Mungkin ketika bereaksi asli untuk Android, React Web dapat dirilis. (Y Y)
Arsitektur Teknis
Ada beberapa solusi adaptasi berdasarkan React Native:
1. Kembangkan standar jembatan, dan RN dan RW masing -masing menerapkan set standar ini dengan cara yang optimal.
Misalnya, berdasarkan tata letak fleksibel, kami menerapkan serangkaian komponen flex yang konsisten, <flex>, <cell>, dll.
2. Sepenuhnya sejajar dengan RN, RW mengimplementasikan semua API yang dapat diterapkan RN.
Dalam diskusi, yang terakhir akhirnya dipilih.
Karena konsep React Web, biarkan Kode Asli yang dijalankan di sisi web, ia menentukan bahwa RW hanyalah alat konstruksi dan pengemasan, dipisahkan dari RN, dan implementasi RW tidak banyak signifikan. Maka arah teknis keseluruhan sangat jelas: untuk menerapkan gaya konsisten RN, komponen dan API, dan akhirnya mengkompilasinya menjadi versi web melalui alat konstruksi.
Contoh
Mari kita lihat Proses Pembuatan Proyek Web React:
Langkah 1: Instal React Web dan lakukan konfigurasi terkait
Langkah ini terutama untuk menginstal paket React-Web dan dependensi terkait, dan mengkonfigurasi skrip kemasan webpack.
Untuk menyederhanakan langkah ini, kami telah mengembangkan alat baris perintah reaksi-web-cli, yang hanya membutuhkan eksekusi dua baris perintah. Pada saat yang sama, alat baris perintah juga mendukung memulai server debugging, pengemasan dan fungsi lainnya, yang akan diperkenalkan nanti.
Instal alat CLI:
NPM menginstal react-web-cli -g
Instal dan konfigurasikan react web, dll.:
React-Web Init <Direktori Proyek Saat Ini>
Setelah eksekusi selesai, NPM menginstal pustaka terkait akan dibuat di direktori proyek Anda, dan file web/webpack.config.js akan dibuat secara otomatis, dengan konfigurasi tertulis di dalamnya. Saat ini struktur direktori adalah:
.├── readme.md├── Android/├── Index.android.js├── Index.ios.js├── iOS/├── Paket.
Langkah 2: Tambahkan file entri dan buat konfigurasi yang relevan
Setiap proyek perlu memiliki file entri, yang biasanya digunakan untuk memperkenalkan dan memanggil komponen lain dan menginisialisasi proyek, seperti index.ios.js mewakili file entri proyek pada platform iOS. Untuk mematuhi spesifikasi penamaan file React Native, kami membuat index.web.js sebagai file entri, dan kami perlu menentukan bahwa file tersebut adalah file entri di webpack. Buka file web/webpack.config.js dan ubah variabel konfigurasi:
var config = {paths: {src: path.join (root_path, '.'), index: path.join (root_path, 'index.web'),},};Kemudian kami membuat file index.web.js. File ini sebenarnya sangat mirip dengan index.ios.js, tetapi sedikit berbeda. Perbedaan utama adalah bahwa iOS hanya membutuhkan appregistry.registerComponent ('Awes', () => AWES); Untuk mengizinkan kode asli Xcode menerima dan memproses kode JS Anda, sementara sisi web perlu dimasukkan ke dalam node DOM sebelum dapat digunakan. Oleh karena itu, kita perlu menambahkan kode berikut di bagian bawah index.web.js:
Appregistry.RegisterComponent ('awes', () => awes); if (platform.os == 'web') {var app = document.createelement ('div'); Document.Body.AppendChild (App); Appregistry.runapplication ('awes', {roottag: app});}Maka komponen platform perlu diperkenalkan di bagian membutuhkan atas. Dengan cara ini, bagian konfigurasi telah diproses. Jalankan perintah mulai react-web untuk memulai server debugging!
Anda dapat memodifikasinya sesuka hati, hampir sama dengan pengalaman dalam simulator asli React.
Langkah 3: Uji dan bungkus kode versi web
Setelah selesai memodifikasi dan mengembangkan dan menguji sisi web, Anda dapat mengemas dan mempublikasikannya. Perintah yang dikemas oleh alat react-web-cli adalah:
Bundel React-Web
Setelah kemasan, file akan disimpan di Web/ Output/ Direktori. Anda dapat langsung membuka index.html (jika aplikasi telah meminta operasi, Anda perlu memeriksanya dari server lokal), dan kemudian Anda dapat mempublikasikannya setelah memeriksa.
Apa yang terjadi selama proses ini?
Siswa yang ingin tahu mungkin memiliki beberapa pertanyaan ketika mereka melihat ini. Apa yang dilakukan beberapa perintah dari alat baris perintah di atas? Mengapa Paket Web React React Code Asli ke dalam salinan kode yang digunakan di sisi web? Apakah React Web aman dan dapat diandalkan? Apa saja hal -hal di dalamnya?
Di sini saya akan secara singkat memperkenalkan prinsip implementasi Web React dan apa yang sebenarnya dilakukan langkah -langkahnya.
React Web Implement Bereaksi komponen asli di sisi web
Bereaksi memisahkan kode dari lingkungan platform, menambahkan lapisan, sehingga pengembang dapat melakukan beberapa pemrosesan di tingkat lingkungan platform, sehingga kode yang sama dapat beradaptasi dengan lebih banyak lingkungan platform, dll.
Misalnya, React-Canvas menulis kode sesuai dengan sintaks React, melakukan beberapa pemrosesan di tingkat lingkungan platform (menjalankan kode React Anda dan membuatnya dengan kanvas), dan kemudian mencapai tujuan spesifik (meningkatkan kinerja di sisi seluler).
Di React Native, hal yang sama berlaku untuk sepotong kode untuk dijalankan di iOS dan Android secara bersamaan. Tim Native React telah melakukan beberapa pemrosesan pada aplikasi asli dari platform yang sesuai untuk memungkinkannya parse kode yang mengeksekusi sintaks React.
Ada juga aplikasi isomorfik. Server menggunakan react + node.js untuk menghasilkan HTML, dan klien menggunakan React untuk mendapatkan interaksi dan fungsi terkait klien. Hal yang sama benar.
Untuk tujuan ini, versi React V0.14.x dimulai dengan dua perpustakaan, React dan React-Dom, yang sebenarnya menghapus perlakuan khusus dari platform browser dan mengubahnya menjadi perpustakaan react-dom saja.
Hal khusus tentang React Native adalah bahwa implementasi komponen tingkat terendah adalah implementasi asli, sehingga tidak mendukung tag seperti span dan div. Animasi, dll., Juga secara langsung memanggil penduduk asli untuk rendering antarmuka. Oleh karena itu, sisi web tidak didukung, tetapi sebagian besar komponen dapat disimulasikan dan diimplementasikan menggunakan teknologi web. Animasi dapat digunakan dalam CSS3, elemen dasar dapat disimulasikan dengan tag HTML yang sama, tata letak dan masalah kompatibilitas dapat ditangani dalam CSS, sehingga web React hanya perlu mengimplementasikan kembali komponen asli React menggunakan teknologi web, dan dengan bantuan reaksi lapisan ini, sepotong kode dapat diimplementasikan pada banyak platform.
Untuk memberikan contoh yang sangat sederhana, komponen teks:
Implementasi React Native Calls banyak dari implementasi kode yang mendasarinya dari React Native.
Untuk sisi web, cukup gunakan tag <span> untuk mengeluarkan baris teks, sehingga implementasi React Web secara langsung membuat tag <span>, dan tidak apa -apa untuk mengikat beberapa peristiwa atau sesuatu.
Anda dapat menggunakan komponen asli React yang dapat berjalan dalam demo UI Explorer dengan percaya diri.
Webpack membantu Anda mengganti target pengemasan
Setelah membuat komponen yang kompatibel dengan sisi web, bukankah kita perlu mengganti semua yang diperlukan ('reaksi-asli') dalam komponen yang akan dikemas dengan kebutuhan ('react-web')? Kalau tidak, bagaimana saya bisa menggunakan komponen web saya untuk mengemasnya?
Webpack yang kuat hadir dengan item konfigurasi alias untuk membantu Anda menyelesaikan masalah ini:
resolve: {alias: {'react-native': 'react-web', 'reactnativeart': 'react-art',}, ekstensi: ['', '.js', '.jsx'],},Dengan cara ini, saat pengemasan, semua tempat di mana membutuhkan ('reaksi-asli') diganti dengan paket reaksi-Web, dan modul reaksi-Web. Exports konsisten dengan reaksi-asli, sehingga kode dapat berfungsi tanpa penggantian.
Selain itu, metode pengantar lain dapat diimplementasikan dengan plug-in, silakan lihat di bawah.
Memperkenalkan komponen melalui metode tergesa -gesa untuk meningkatkan kinerja
Webpack dan alat pengemasan lainnya yang mendukung spesifikasi CommonJS akan mengemas semua komponen yang dibutuhkan dalam file bersama -sama. Untuk React Native, ukuran kode tidak relevan, tetapi untuk web seluler, ini sedikit lebih penting. Terutama jika proyek Anda hanya membutuhkan komponen teks, tetapi menyedihkan karena membutuhkan ('react-web') menghasilkan pengemasan semua komponen.
Berdasarkan plugin webpack, ada cara lain untuk memperkenalkan komponen untuk menyelesaikan masalah ini, Anda dapat menyebutnya cara tergesa -gesa. Metode ini memerlukan pemuatan plugin webpack Haste-Resolver-Webpack-Plugin. Konfigurasi webpack default telah dimuat untuk Anda. Anda dapat menggunakannya secara langsung di komponen sebagai berikut:
var text = membutuhkan ('reacttext');Bukannya apa yang sebelumnya:
var {text} = membutuhkan ('react-native');Dengan cara ini, ketika Webpack dikemas, yang pertama hanya akan mengemas konten komponen itu, yang dapat mengurangi ukuran dan meningkatkan kinerja. Bagaimana ini dicapai?
Ketika pack plug-in dimuat, semua komponen akan dipindai terlebih dahulu dan informasi @ProvidesModule di header komponen (seperti informasi komponen teks), dan kemudian ketika nama komponen diperlukan di file lain, file akan secara otomatis ditempatkan untuk kemasan. Pada saat yang sama, Anda juga dapat membedakan antara platform. Bahkan jika itu adalah nama yang sama, platform akan dibedakan saat mengemas file yang sesuai (file ditentukan sesuai dengan aturan penamaan index.xxx.js).