Apakah gentian dalam tindak balas

Fiber ialah algoritma penjadualan baharu React dan pelaksanaan semula algoritma teras. React Fiber memecah proses kemas kini Selepas setiap proses kemas kini dilaksanakan, kawalan dikembalikan kepada modul penyelarasan tugas React untuk melihat jika terdapat tugasan mendesak lain yang perlu dilakukan, lakukan sahaja tugasan kecemasan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, bertindak balas versi 17.0.1, komputer Dell G3.

Fiber diperkenalkan selepas versi react16 Penjadualan, penyelarasan, algoritma diff dan rendering pada keseluruhan peringkat seni bina berkait rapat dengan gentian.

Apakah itu React Fiber?

Apabila bertindak balas menghasilkan komponen, keseluruhan proses dari permulaan setState hingga selesai pemaparan adalah segerak ("semua dalam satu perjalanan"). Jika komponen yang perlu diberikan adalah agak besar, pelaksanaan js akan menduduki urutan utama untuk masa yang lama, yang akan membawa kepada responsif halaman yang lemah dan menjadikan tindak balas kurang berkesan dalam aplikasi seperti animasi dan gerak isyarat.

Untuk menyelesaikan masalah ini, pasukan tindak balas menulis semula algoritma teras dalam penyesuaian-tindak balas selepas dua tahun bekerja. Dan ciri baharu ini dikeluarkan dalam versi v16. Untuk membezakan pendamai sebelumnya dan seterusnya, pendamai sebelumnya biasanya dipanggil pendamai tindanan, dan yang ditulis semula dipanggil pendamai gentian, atau singkatannya Fiber.

Penjelasan rasmi ialah "React Fiber ialah pelaksanaan semula algoritma teras."

Serat boleh meningkatkan responsif dan prestasi aplikasi React yang kompleks. Fiber ialah algoritma penjadualan baharu React (algoritma rekonsiliasi)

React Fiber memecah proses kemas kini Selepas setiap proses kemas kini dilaksanakan, kawalan dikembalikan kepada modul React yang bertanggungjawab untuk penyelarasan tugas tugasan yang perlu dilakukan Jika tiada tugasan mendesak, teruskan kemas kini Jika ada tugasan yang mendesak, maka lakukan tugasan yang mendesak.

Apabila bertindak balas menghasilkan komponen, keseluruhan proses dari permulaan setState hingga selesai pemaparan adalah segerak ("semua dalam satu perjalanan"). Jika komponen yang perlu diberikan adalah agak besar, pelaksanaan js akan menduduki urutan utama untuk masa yang lama, yang akan membawa kepada responsif halaman yang lemah dan menjadikan tindak balas kurang berkesan dalam aplikasi seperti animasi dan gerak isyarat.

Untuk menyelesaikan masalah ini, pasukan tindak balas menulis semula algoritma teras dalam tindak balas - pendamaian selepas dua tahun bekerja. Dan ciri baharu ini dikeluarkan dalam versi v16. Untuk membezakan pendamai sebelumnya dan seterusnya, pendamai sebelumnya biasanya dipanggil pendamai tindanan, dan yang ditulis semula dipanggil pendamai gentian, atau singkatannya Fiber.

Punca lag

Aliran kerja Stack reconciler sangat serupa dengan proses panggilan fungsi. Menyelaraskan komponen anak dalam komponen induk boleh dibandingkan dengan pengulangan fungsi (inilah sebabnya ia dipanggil pendamai tindanan). Selepas setState, bertindak balas akan segera memulakan proses penyesuaian, bermula dari nod induk (DOM Maya) dan merentasi untuk mencari perbezaan. Selepas semua traversal DOM Maya selesai, pendamai boleh memberikan maklumat semasa yang perlu diubah suai kepada DOM sebenar dan menyerahkannya kepada pemapar untuk pemaparan, dan kemudian kandungan yang dikemas kini akan dipaparkan pada skrin. Untuk pokok vDOM yang sangat besar, proses penyelarasan akan menjadi sangat panjang (x00ms Dalam tempoh ini, utas utama diduduki oleh js, jadi sebarang interaksi, reka letak dan pemaparan akan berhenti, memberikan pengguna perasaan bahawa halaman itu adalah). tersangkut.

Penjadual

Penjadualan ialah proses penyelarasan gentian, yang menentukan terutamanya perkara yang perlu dilakukan apabila. Proses ? menunjukkan bahawa dalam rekonsiliasi tindanan, perdamaian adalah "semua dalam satu perjalanan".

• Bukan semua kemas kini keadaan perlu dipaparkan dengan segera, seperti kemas kini bahagian di luar skrin
• Tidak semua keutamaan kemas kini adalah sama, seperti respons kepada input pengguna yang diutamakan adalah lebih tinggi daripada tindak balas yang mengisi kandungan melalui permintaan
• Sebaik-baiknya, untuk sesetengah operasi keutamaan tinggi, adalah mungkin untuk mengganggu pelaksanaan operasi keutamaan rendah, seperti apabila pengguna memasukkan, Ulasan pada halaman masih mendamaikan dan harus membalas input pengguna terlebih dahulu

Jadi idealnya proses perdamaian harus seperti yang ditunjukkan dalam rajah di bawah, dengan hanya satu tugas kecil yang dilakukan setiap kali, anda boleh "tarik nafas" dan kembali ke utas utama untuk melihat sama ada terdapat tugas keutamaan yang lebih tinggi yang perlu diproses. Jika ya, proseskan tugasan keutamaan yang lebih tinggi terlebih dahulu ).

Task splitting fiber-tree & fiber

Mari kita lihat dahulu cara tindak balas berfungsi di bawah stack-reconciler. Cipta (atau kemas kini) beberapa elemen dalam kod, bertindak balas akan mencipta (atau mengemas kini) DOM Maya berdasarkan elemen ini, dan kemudian bertindak balas akan mengubah suai DOM sebenar berdasarkan perbezaan antara DOM maya sebelum dan selepas kemas kini. Ambil perhatian bahawa

di bawah penyelaras tindanan, kemas kini DOM adalah segerak, iaitu, semasa proses perbandingan DOM maya, jika tika didapati dikemas kini, operasi DOM akan dilakukan serta-merta .

Di bawah gentian-conciler, operasi boleh dibahagikan kepada banyak bahagian kecil dan boleh diganggu, jadi operasi segerak DOM boleh membawa kepada ketidakkonsistenan antara gentian-pokok dan sebenar DOM. Untuk setiap nod, ia bukan sahaja menyimpan maklumat asas elemen yang sepadan, tetapi juga menyimpan beberapa maklumat untuk penjadualan tugas. Oleh itu, gentian hanyalah objek, mewakili unit kerja terkecil yang boleh dipecah semasa fasa penyelarasan, dan sepadan satu-dengan-satu dengan contoh tindak balas dalam rajah di atas. Uruskan ciri Instance itu sendiri melalui atribut

. Unit kerja seterusnya unit kerja semasa diwakili oleh anak dan adik beradik, dan pulangan menunjukkan sasaran untuk digabungkan dengan hasil yang dikembalikan selepas pemprosesan selesai, biasanya menunjuk ke nod induk. Keseluruhan struktur ialah pokok senarai terpaut. Selepas pelaksanaan setiap unit kerja (fiber) selesai, ia akan menyemak sama ada ia masih mempunyai kepingan masa utas utama Jika ya, teruskan ke yang seterusnya Jika tidak, transaksi keutamaan tinggi yang lain akan diproses terlebih dahulu, dan pelaksanaan akan diteruskan sehingga utas utama bebas. stateNode

fiber {  	stateNode: {},    child: {},    return: {},    sibling: {},
}复制代码

Sebagai contoh

Halaman semasa mengandungi senarai, yang melaluinya butang dan sekumpulan Item dipaparkan dan Item mengandungi div , yang kandungannya ialah nombor. Dengan mengklik butang, semua nombor dalam senarai boleh diduakan. Terdapat juga butang yang boleh anda klik untuk melaraskan saiz fon.

Selepas pemaparan halaman selesai, pokok gentian akan dimulakan dan dijana. Tiada perbezaan antara memulakan pokok gentian dan memulakan pokok DOM Maya, jadi saya tidak akan menerangkan butiran di sini.

Pada masa yang sama, bertindak balas juga akan mengekalkan workInProgressTree. workInProgressTree digunakan untuk mengira kemas kini dan menyelesaikan proses penyelarasan.

Selepas pengguna mengklik butang segi empat sama, gunakan senarai kuasa dua bagi setiap elemen untuk memanggil setState, dan bertindak balas akan menghantar kemas kini semasa ke baris gilir kemas kini yang sepadan dengan komponen senarai . Tetapi bertindak balas tidak akan segera melakukan perbandingan dan mengubah suai operasi DOM. Sebaliknya, serahkan kepada penjadual.

Penjadual akan mengendalikan kemas kini ini berdasarkan penggunaan semasa urutan utama. Untuk melaksanakan ciri ini,

API digunakan. Untuk penyemak imbas yang tidak menyokong API ini, bertindak balas akan menambah pollyfill. requestIdelCallback

Secara umum, biasanya, urutan pelanggan dibahagikan kepada bingkai apabila melaksanakan tugasan Kebanyakan peranti mengawal 30-60 bingkai tanpa menjejaskan pengalaman pengguna antara dua bingkai pelaksanaan, Urutan utama biasanya mempunyai tempoh masa terbiar yang singkat ,

boleh memanggil requestIdleCallbackPanggil Balik Terbiar (Panggil Balik Terbiar) semasa Tempoh Terbiar ini dan melaksanakan beberapa tugasan

• 低优先级任务由requestIdleCallback处理；

• 高优先级任务，如动画相关的由requestAnimationFrame处理；

• requestIdleCallback可以在多个空闲期调用空闲期回调，执行任务；

• requestIdleCallback方法提供deadline，即任务执行限制时间，以切分任务，避免长时间执行，阻塞UI渲染而导致掉帧；

一旦reconciliation过程得到时间片，就开始进入work loop。work loop机制可以让react在计算状态和等待状态之间进行切换。为了达到这个目的，对于每个loop而言，需要追踪两个东西：下一个工作单元（下一个待处理的fiber）;当前还能占用主线程的时间。第一个loop，下一个待处理单元为根节点。

因为根节点上的更新队列为空，所以直接从fiber-tree上将根节点复制到workInProgressTree中去。根节点中包含指向子节点（List）的指针。

根节点没有什么更新操作，根据其child指针，接下来把List节点及其对应的update queue也复制到workinprogress中。List插入后，向其父节点返回，标志根节点的处理完成。

根节点处理完成后，react此时检查时间片是否用完。如果没有用完，根据其保存的下个工作单元的信息开始处理下一个节点List。

接下来进入处理List的work loop，List中包含更新，因此此时react会调用setState时传入的updater funciton获取最新的state值，此时应该是[1,4,9]。通常我们现在在调用setState传入的是一个对象，但在使用fiber conciler时，必须传入一个函数，函数的返回值是要更新的state。react从很早的版本就开始支持这种写法了，不过通常没有人用。在之后的react版本中，可能会废弃直接传入对象的写法。

setState({}, callback); // stack concilersetState(() => { return {} }, callback); // fiber conciler复制代码

在获取到最新的state值后，react会更新List的state和props值，然后调用render，然后得到一组通过更新后的list值生成的elements。react会根据生成elements的类型，来决定fiber是否可重用。对于当前情况来说，新生成的elments类型并没有变（依然是Button和Item），所以react会直接从fiber-tree中复制这些elements对应的fiber到workInProgress 中。并给List打上标签，因为这是一个需要更新的节点。

List节点处理完成，react仍然会检查当前时间片是否够用。如果够用则处理下一个，也就是button。加入这个时候，用户点击了放大字体的按钮。这个放大字体的操作，纯粹由js实现，跟react无关。但是操作并不能立即生效，因为react的时间片还未用完，因此接下来仍然要继续处理button。

button没有任何子节点，所以此时可以返回，并标志button处理完成。如果button有改变，需要打上tag，但是当前情况没有，只需要标记完成即可。

老规矩，处理完一个节点先看时间够不够用。注意这里放大字体的操作已经在等候释放主线程了。

接下来处理第一个item。通过shouldComponentUpdate钩子可以根据传入的props判断其是否需要改变。对于第一个Item而言，更改前后都是1,所以不会改变，shouldComponentUpdate返回false，复制div，处理完成，检查时间，如果还有时间进入第二个Item。

第二个Item shouldComponentUpdate返回true，所以需要打上tag，标志需要更新，复制div，调用render，讲div中的内容从2更新为4，因为div有更新，所以标记div。当前节点处理完成。

Untuk situasi di atas, div sudah menjadi nod daun dan tidak mempunyai sebarang nod saudara, dan nilainya telah dikemas kini Pada masa ini, kesan yang dijana oleh perubahan nod ini perlu digabungkan ke dalam induk nod. Pada masa ini, bertindak balas akan mengekalkan senarai yang merekodkan semua elemen yang menghasilkan kesan.

Selepas digabungkan, kembali ke Item nod induk dan tanda nod induk selesai.

Unit kerja seterusnya ialah Item Sebelum memasukkan Item, semak masa. Tetapi kali ini habis. Pada ketika ini bertindak balas mesti menukar benang utama dan memberitahu benang utama untuk memperuntukkan masa kepadanya pada masa hadapan untuk menyelesaikan operasi yang tinggal.

Urut utama seterusnya melaksanakan operasi membesarkan fon. Selepas selesai, laksanakan operasi tindak balas seterusnya, yang hampir sama dengan proses pemprosesan Item sebelumnya Selepas pemprosesan selesai, keseluruhan fiber-tree dan workInProgress adalah seperti berikut:

Selepas selesai, Senarai Item kembali dan menggabungkan kesan Senarai kesan kini kelihatan seperti ini:

Pada masa ini, Senarai kembali ke. nod akar dan menggabungkan kesan Semua nod boleh ditanda sebagai selesai. Pada masa ini reaksi menandakan workInProgress sebagai pendingCommit. Ini bermakna anda boleh memasuki peringkat komit.

Pada ketika ini, apa yang anda perlu lakukan ialah menyemak sama ada masa itu mencukupi, jika tiada masa, anda akan menunggu sehingga masa untuk menyerahkan pengubahsuaian DOM. Selepas memasuki peringkat 2, reacDOM akan mengemas kini DOM berdasarkan senarai kesan yang dikira dalam peringkat 1.

Selepas mengemas kini DOM, workInProgress benar-benar konsisten dengan DOM Untuk memastikan pokok gentian semasa dan DOM konsisten, bertindak balas menukar penunjuk semasa dan workinProgress.

Malah, react mengekalkan dua pokok (Penimbalan Berganda) pada kebanyakan masa. Ini boleh mengurangkan masa memperuntukkan memori dan membersihkan sampah semasa kemas kini seterusnya. Selepas komit selesai, laksanakan fungsi componentDidMount.

Ringkasan

Dengan memecahkan proses penyelarasan kepada unit kerja kecil, halaman itu boleh bertindak balas terhadap acara penyemak imbas dengan lebih tepat pada masanya. Tetapi masalah lain masih belum dapat diselesaikan, iaitu, jika rendering tindak balas yang sedang diproses mengambil masa yang lama, rendering tindak balas berikutnya masih akan disekat. Itulah sebabnya fiber reconciler menambah strategi keutamaan.

[Cadangan berkaitan: Tutorial video Redis]

Atas ialah kandungan terperinci Apakah gentian dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!