React Senibina Baharu Asli

React Native telah mengumumkan keluaran versi 0.76. Dengan kemas kini ini, seni bina baharu kini akan didayakan secara lalai. Sebelum versi 0.76, satu-satunya cara untuk mendayakan seni bina baharu ialah dengan mengikut serta.

Blog ini akan menumpukan pada perkara baharu dalam seni bina baharu.

Seni bina React Native baharu telah menjadi tajuk utama selama lebih setahun, dan atas semua sebab yang betul. Seni bina baharu ini, juga dikenali sebagai 'Bridgeless'. Mengapa ia dipanggil Bridgeless? Kami akan meneroka perkara ini dalam blog."

Sebelum kita meneroka seni bina baharu, mari kita imbas semula dengan pantas yang sebelumnya.

? Rekap seni bina lama

a. Terdapat dua tanah - JavaScript, dan Asli.

b. Terdapat 3 utas:

• Benang JavaScript (JavaScript): Bertanggungjawab untuk kod berkas JavaScript.
• Utama, Benang Asli UI : Bertanggungjawab untuk modul asli.
• Bayang, atau Benang latar belakang (Yoga): Bertanggungjawab untuk reka letak.

c. Satu-satunya cara JavaScript dan kod Asli boleh berkomunikasi antara satu sama lain adalah melalui Jambatan.

d. Mana-mana komponen asli, seperti Button atau Alert, disiri ke dalam JSON dalam lapisan JavaScript dan dihantar melalui jambatan ke urutan asli. Dalam urutan asli, JSON ini kemudiannya ditukar kepada komponen asli (iOS atau Android).

e. Dalam urutan asli, apabila peristiwa berlaku pada komponen asli, ia menghantar acara sebagai JSON ke urutan JavaScript melalui jambatan. Komunikasi ini tidak segerak, membolehkan jambatan memudahkan interaksi antara JavaScript dan komponen asli.

? Masalah dengan Seni Bina lama

Komunikasi antara JavaScript dan lapisan asli bergantung pada jambatan, yang merupakan had utama seni bina lama.

1. Isu Prestasi

2. Bingkai rentak atau kosong

3. Penduaan nod

✨ Matlamat seni bina baharu

Seni bina baharu memfokuskan pada menyelesaikan cabaran yang sebelumnya. Matlamatnya adalah untuk:

1. Permulaan pantas ?

2. Paparan serentak ?️

3. Apl responsif ?‍?

4. Sokongan pada berbilang platform ?

5. Kurang ranap ranap ?

6. Pengurusan ingatan yang lebih baik ?

7. Pelaksanaan segerak ?

? Seni Bina Baru

Seni bina baharu ialah penulisan semula dalam C , yang telah membuka kunci dua peningkatan utama:

A. Komunikasi langsung antara JavaScript dan lapisan asli tanpa jambatan. Inilah sebabnya mengapa seni bina baharu ini biasanya dikenali sebagai 'tanpa jambatan.'

B. Sokongan untuk berbilang platform (selagi platform menggunakan React Native)

? Komponen Senibina Baharu:

1. Antara Muka JavaScript (JSI)

JSI ialah Antara Muka JavaScript, ini adalah lapisan yang ditulis dalam C . Mana-mana enjin JS boleh digunakan dengan ini dan ini membolehkan sokongan platform silang - bukan sahaja pada IOS, android tetapi juga pada TV pintar, jam tangan pintar, dll.

JSI membolehkan JavaScript memegang rujukan kepada modul asli. Ini membolehkan JavaScript berkomunikasi secara langsung dengan modul asli serta ini membolehkan komunikasi segerak antara JavaScript dan benang Asli

PS: Kod natif tindak balas anda mendapat himpunan melalui Metro dan pergi ke JSI.

2. Modul Asli Baharu

Modul Asli Baharu ialah modul asli baharu dan dipertingkatkan. Ini ditulis dalam C dan ia membolehkan akses segerak daripada JS/TS apis kepada Native. Ini bermakna akan terdapat komunikasi langsung antara Native dan thread JavaScript tanpa memerlukan bridge. C juga membolehkan untuk menulis modul asli anda sendiri untuk perkongsian merentas platform.

Modul asli baharu membolehkan untuk mengendalikan acara, membaca reka letak, menjadualkan kemas kini secara tidak segerak dan segerak.

Seperti yang kita pelajari sebelum ini, JSI menyimpan rujukan objek dalam TurboModules, ini akan membenarkan kod JavaScript memuatkan setiap modul hanya apabila ia diperlukan (pemuatan dinamik modul). Ini meningkatkan masa permulaan apl berbanding dengan seni bina lama.

3. Codegen

Codegen ialah alat untuk mencipta kontrak yang ditaip kuat. Kontrak ini membantu pembangun dengan menjimatkan masa mereka dan memudahkan komunikasi antara bahasa pengaturcaraan silang.

Dalam React Native, JavaScript dan Typescript bukanlah bahasa yang ditaip dengan kuat tetapi C ditaip dengan kuat. Untuk membuat komunikasi antara JavaScript dan C , codegen menjana antara muka (jenis). Ini berlaku pada masa binaan untuk pelaksanaan pantas semasa runtime.

Oleh kerana Codegen JSI (Antara Muka JavaScript) berkomunikasi secara langsung dengan modul Turbo tanpa sebarang jambatan.

4. Penyampai Baharu

Renderer Baharu dikenali sebagai Fabrik. Ini juga ditulis dalam C.
Ingat kita mempunyai 3 utas dalam React Native? - JavaScript, Utama/UI Native dan Shadow/background thread. Dalam seni bina lama, masalahnya ialah benang utama kami yang digunakan untuk disekat dan ini membawa kepada:

1. isu prestasi

2. bingkai kosong (tiada 60FPS)

3. juga, seni bina lama perlu mengekalkan 2 salinan nod dan DOM. Ini membawa kepada isu ingatan

4. Tiada cara untuk mengganggu tugas keutamaan rendah untuk memberi keutamaan kepada kemas kini segera.

Dalam Fabrik isu-isu ini telah diambil perhatian. Dengan pemapar baharu kini kami boleh menggunakan peralihan untuk mengganggu tugasan keutamaan rendah untuk keperluan segera. Ini akan menjadikan apl responsif & utas asli Utama/UI tidak akan dinyahsekat. Peristiwa akan dilaksanakan secara tidak segerak. Dengan sistem pemapar baharu, pepohon hierarki paparan tidak boleh diubah.

Tidak berubah bermakna ia tidak akan berubah. Faedah tidak berubah:

1. Ini membenarkan pemprosesan kemas kini yang selamat untuk benang.

2. Ini juga bermakna akan terdapat berbilang pokok sedang dalam proses, setiap satu mewakili versi antara muka pengguna yang berbeza.

3. Memandangkan terdapat berbilang pokok pada versi UI yang berbeza, *kemas kini boleh dipaparkan di latar belakang tanpa menyekat UI *(seperti semasa peralihan) atau pada urutan utama (sebagai tindak balas kepada input pengguna)

4. Penyampai baharu juga boleh membaca maklumat reka letak secara serentak dan merentas urutan yang berbeza. Ini membolehkan pengiraan latar belakang untuk kemas kini keutamaan rendah dan bacaan segerak apabila diperlukan.

? Seni Bina Hujung ke Hujung

? Ringkasan

1. Seni bina baharu tersedia secara lalai daripada 0.76

2. Seni bina baharu telah diperkenalkan: Antara Muka JavaScript (JSI), modul asli baharu (Modul Turbo) , codegen, penyampai baharu sistem (fabrik)

3. JSI ialah Antara Muka JavaScript ia berdasarkan C dan menjadikan modul JavaScript dan Native komunikasi terus mungkin tanpa sebarang keperluan untuk Bridge

4. Modul Asli baharu ialah modul asli semasa yang dipertingkatkan. Ditulis dalam C dan mendayakan banyak faedah: komunikasi segerak ke dan membentuk JavaScript dan asli tanpa jambatan, memuatkan malas.

5. Codegen menjana antara muka jenis untuk JavaScript dan C untuk berkomunikasi antara satu sama lain.

6. Penyebar baharu (Fabrik) ialah sistem pemapar baharu yang ditulis dalam C . Ini membolehkan prestasi yang lebih baik dengan mendayakan berbilang threading dan mengganggu tugas keutamaan rendah.

7. Gelung acara baharu untuk menjadikan reaksi asli lebih dekat dengan DOM

8. Baca baik isu GitHub

Selamat Belajar!!

Atas ialah kandungan terperinci React Senibina Baharu Asli. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!