Bagaimana untuk melaksanakan cangkuk dalam tindak balas? Adakah saya perlu bergantung pada Fiber?

bertindak balasBagaimana untuk melaksanakan cangkuk? Adakah pelaksanaan React Hooks perlu bergantung pada Fiber? Artikel berikut akan menunjukkan kepada anda cara cangkuk dalam rangka kerja yang berbeza dilaksanakan. Saya harap ia akan membantu anda!

Kail React adalah ciri-ciri yang muncul selepas gentian, jadi ramai yang tersilap percaya bahawa cangkuk mesti bergantung pada gentian untuk dilaksanakan tidak semestinya bersambung. [Cadangan berkaitan: Tutorial video Redis]

Kini, cangkuk bukan sahaja dilaksanakan dalam tindak balas, ciri ini juga dilaksanakan dalam rangka kerja seperti preact, react ssr, midway, dll., tetapi pelaksanaan mereka tidak Bergantung kepada serat.

Mari kita lihat bagaimana cangkuk dalam rangka kerja yang berbeza ini dilaksanakan:

Cara tindak balas melaksanakan cangkuk

tindak balas diterangkan melalui Antara Muka jsx, ia akan disusun ke dalam fungsi render oleh alat kompilasi seperti babel atau tsc, dan kemudian dilaksanakan untuk menjana vdom:

Fungsi render di sini ialah React.createElement sebelum React17:

Selepas React 17, ia ditukar kepada jsx:

Jsx-runtime ini akan diperkenalkan secara automatik, tidak perlu lakukan seperti sebelum ini Setiap komponen mesti mengekalkan import React.

Perlaksanaan fungsi Render menjana vdom:

Struktur vdom adalah seperti ini:

dalam Before React16, vdom ini akan diberikan secara rekursif, menambah, memadam dan mengubah suai dom sebenar.

Selepas React16 memperkenalkan seni bina gentian, terdapat langkah tambahan: mula-mula tukar vdom kepada gentian, dan kemudian jadikan gentian.

Proses menukar vdom kepada gentian dipanggil reconcile, dan proses terakhir menambah, memadam dan mengubah suai dom sebenar dipanggil commit.

Mengapa kita perlu membuat penukaran sedemikian?

Oleh kerana vdom hanya mempunyai rujukan kepada anak nod anak dan tiada rujukan kepada induk nod induk dan nod adik beradik yang lain, ini menyebabkan keperluan untuk menjadikan semua nod vdom ke dom secara rekursif pada satu masa tanpa mengganggu.

Apa yang berlaku jika anda mengganggu? Oleh kerana nod induk dan nod adik beradik tidak direkodkan, kami hanya boleh terus memproses nod anak, tetapi tidak boleh memproses bahagian lain vdom.

Itulah sebabnya React memperkenalkan struktur gentian seperti ini, iaitu terdapat rujukan seperti pulangan nod induk, anak nod anak, adik beradik nod dan lain-lain, yang boleh terganggu, kerana jika ia rosak dan kemudian dipulihkan, semua item yang tidak diproses boleh ditemui.

Struktur nod gentian adalah seperti berikut:

Proses ini boleh diganggu, dan secara semula jadi ia boleh dijadualkan, iaitu proses schdule.

Jadi seni bina gentian dibahagikan kepada tiga peringkat: schdule, reconcile (tukar vdom kepada gentian) dan commit (kemas kini kepada dom).

Cakuk boleh digunakan dalam komponen fungsi untuk mengakses beberapa nilai, dan nilai ini disimpan pada nod gentian.

Sebagai contoh, komponen fungsi ini menggunakan 6 cangkuk:

Kemudian nod gentian yang sepadan mempunyai senarai terpautState yang dihafal bagi 6 elemen:

Digabungkan hingga seterusnya:

Kail yang berbeza mengakses nilai pada elemen yang berbeza dalam senarai terpaut Negeri yang dihafal, ini adalah tindak balas Prinsip cangkuk.

Senarai terpaut ini mempunyai fasa penciptaan dan fasa kemas kini, jadi anda akan mendapati bahawa pelaksanaan akhir useXxx dibahagikan kepada mountXxx dan updateXxx:

Fasa pelekap di sini ialah Cipta nod cangkuk dan pasangkannya ke dalam senarai terpaut:

akan menggantung senarai terpaut cangkuk yang dibuat pada atribut memorizedState bagi nod gentian.

Apabila mengemas kini, anda secara semula jadi boleh mengeluarkan senarai cangkuk daripada nod gentian:

Dengan cara ini, dalam berbilang pemaparan, api useXxx boleh berada pada nod gentian Cari keadaan hafalan yang sepadan pada .

Ini adalah prinsip cangkuk tindak balas Anda boleh melihat bahawa ia menyimpan cangkuk pada nod gentian.

Jadi apakah perbezaan antara preact?

preact Cara melaksanakan cangkuk

preact ialah rangka kerja yang lebih ringan yang serasi dengan kod tindak balas Ia menyokong komponen kelas dan komponen fungsi, dan juga menyokong ciri tindak balas seperti cangkuk . Walau bagaimanapun, ia tidak melaksanakan seni bina gentian.

Kerana ia mempertimbangkan saiz muktamad (hanya 3kb), bukan prestasi muktamad.

Kami baru mengetahui bahawa react menyimpan senarai cangkuk pada nod gentian Jika preact tidak mempunyai nod gentian, di manakah senarai cangkuk akan disimpan?

Sebenarnya, mudah untuk berfikir bahawa gentian hanya mengubah suai vdom untuk meningkatkan prestasi, dan tiada perbezaan penting daripada vdom Jadi, tidakkah cukup untuk menyimpan cangkuk pada vdom?

Memang, preact hanya meletakkan senarai cangkuk pada vdom.

Sebagai contoh, komponen fungsi ini mempunyai 4 cangkuk:

Pelaksanaannya adalah untuk mengakses cangkuk yang sepadan pada vdom:

Ia tidak membahagikan cangkuk ke tahap pelekap dan kemas kini seperti bertindak balas, tetapi menggabungkannya bersama untuk diproses.

Seperti yang ditunjukkan dalam rajah, ia menyimpan cangkuk dalam tatasusunan komponen.__cangkuk dan mengaksesnya melalui subskrip.

Komponen ini ialah atribut pada vdom:

Iaitu, nilai cangkuk disimpan dalam tatasusunan vnode._component._hooks.

Bandingkan perbezaan antara react dan preact dalam melaksanakan cangkuk:

• Secara tindak balas, senarai cangkuk disimpan dalam atribut fiberNode.memorizedState, manakala dalam preact, cangkuk list disimpan dalam Pada atribut vnode._component._hooks,

• , senarai cangkuk dalam tindak balas disatukan hingga seterusnya, dan senarai cangkuk dalam preact ialah tatasusunan, diakses melalui subskrip

• react memisahkan penciptaan dan kemas kini senarai terpaut cangkuk, iaitu useXxx akan dibahagikan kepada mountXxx dan updateXxx untuk dilaksanakan, manakala preact menggabungkannya bersama

Jadi, Pelaksanaan cangkuk tidak bergantung pada gentian Ia hanya mencari tempat untuk menyimpan data cangkuk yang sepadan dengan komponen Ia hanya perlu diambil semasa rendering disimpan.

Oleh kerana vdom, gentian dan pemaparan komponen sangat berkaitan, ia disimpan dalam struktur ini.

Seperti react ssr melaksanakan cangkuk, ia tidak wujud pada gentian mahupun pada vdom:

Bagaimana tindak balas ssr melaksanakan cangkuk

Malah, bertindak balas Dalam Selain csr, pakej -dom juga boleh melakukan ssr:

Gunakan kaedah render react-dom apabila csr:

use react apabila menggunakan ssr -Kaedah renderToString atau kaedah renderToStream dom/pelayan:

Adakah anda fikir penukaran vdom kepada gentian akan dilakukan semasa ssr?

Semestinya tidak Fiber ialah struktur yang diperkenalkan untuk meningkatkan prestasi pemaparan apabila berjalan dalam penyemak imbas, membuat pengiraan terganggu dan melakukan pengiraan apabila melahu.

Perenderan sisi pelayan secara semula jadi tidak memerlukan gentian.

Jika serat tidak diperlukan, di manakah ia menyimpan senarai cangkuk? vdom?

Memang betul ia boleh diletakkan dalam vdom, tetapi tidak.

Contohnya, useRef cangkuk:

Ia ialah senarai terpaut yang digabungkan dengan seterusnya bermula dari firstWorkInProgressHook.

Nod cangkuk pertama yang dicipta oleh firstWorkInProgressHook menggunakan createHook:

tidak dipasang pada vdom superior.

Kenapa?

Oleh kerana ssr hanya perlu render sekali sahaja dan tidak perlu dikemas kini, tidak perlu menggantungnya di vdom.

Hanya kosongkan senarai cangkuk setiap kali anda selesai memproses cangkuk setiap komponen:

Jadi, apabila ssr bertindak balas, cangkuk wujud dalam pembolehubah global.

Bandingkan perbezaan dalam prinsip pelaksanaan cangkuk antara csr bertindak balas dan ssr:

• Csr akan mencipta gentian daripada vdom untuk menjadikan pemaparan boleh terganggu, meningkatkan prestasi melalui penjadualan melahu, tetapi tidak dalam ssr. vdom secara langsung menjadikan

• csr dan menyimpan cangkuk ke nod gentian Dalam ssr, ia diletakkan terus dalam pembolehubah global, setiap komponen akan dikosongkan. Kerana ia tidak akan digunakan untuk kali kedua

• csr akan membahagikan penciptaan dan kemas kini cangkuk kepada dua fasa: lekap dan kemas kini, manakala ssr hanya akan diproses sekali dan hanya mempunyai fasa penciptaan

Prinsip pelaksanaan cangkuk sebenarnya tidak rumit untuk menyimpan senarai terpaut dalam konteks tertentu, dan kemudian cangkuk api mengakses data yang sepadan daripada yang berbeza elemen senarai terpaut untuk melengkapkan logik masing-masing. Konteks ini boleh menjadi vdom, gentian atau pembolehubah global.

Walau bagaimanapun, idea cangkuk masih agak popular Rangka kerja sisi pelayan Taobao di pertengahan telah memperkenalkan idea cangkuk:

pertengahan Bagaimana untuk melaksanakan. cangkuk

pertengahan ialah rangka kerja Node.js:

Rangka kerja sebelah pelayan secara semula jadi tidak mempunyai struktur seperti vdom dan gentian, tetapi idea cangkuk tidak bergantung pada ini Untuk melaksanakan API cangkuk, anda hanya perlu meletakkan senarai terpaut dalam konteks tertentu.

tengah jalan melaksanakan API yang serupa dengan cangkuk tindak balas:

Saya tidak tahu di mana senarai cangkuk itu wujud lagi .

Ringkasan

Cangkuk tindak balas adalah ciri yang muncul selepas seni bina gentian tindak balas Ramai orang tersilap percaya bahawa cangkuk mesti dilaksanakan dengan gentian. preact, dan Pelaksanaan cangkuk dalam react ssr dan midway tidak seperti ini:

• react menukar vdom kepada gentian, kemudian menyimpan senarai cangkuk dalam atribut fiber.memorizedState, dan menggabungkannya melalui seterusnya
• preact tidak melaksanakan gentian Ia meletakkan senarai cangkuk pada atribut vnode._component._hooks dan melaksanakannya sebagai tatasusunan Apabila mengakses
• react ssr melalui subskrip, gentian tidak diperlukan, tetapi cangkuk tidak disertakan. Senarai terpaut digantung pada vdom, tetapi diletakkan terus pada pembolehubah global, kerana ia hanya perlu dipaparkan sekali selepas memaparkan komponen, cuma kosongkan pembolehubah global
• ialah a Rangka kerja Node.js, ia juga melaksanakan Terdapat API yang serupa dengan cangkuk Kami belum menjelaskan butiran tentang tempat untuk meletakkannya, tetapi selagi ada konteks untuk menyimpan senarai cangkuk, ia akan baik

Jadi, adakah cangkuk bertindak balas perlu bergantung pada gentian untuk melaksanakannya?

Jelas sekali tidak, ia boleh digandingkan dengan gentian, vdom, pembolehubah global, malah mana-mana konteks.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan cangkuk dalam tindak balas? Adakah saya perlu bergantung pada Fiber?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!