Jadual Kandungan
Apakah perbezaan antara versi react15 dan 16?
Rumah hujung hadapan web Soal Jawab bahagian hadapan Apakah perbezaan antara versi react15 dan react16?

Apakah perbezaan antara versi react15 dan react16?

Apr 18, 2022 am 10:44 AM
react

Perbezaan: 1. Seni bina versi 15 dibahagikan kepada dua bahagian: penyelaras dan pemapar, manakala seni bina versi 16 dibahagikan kepada tiga bahagian: penjadual, penyelaras dan pemapar 2. Penyelaras versi 15 menggunakan rekursi Kerja borang adalah segerak, dan versi 16 pendamai menggunakan kemas kini gangguan tak segerak dan bukannya kemas kini segerak versi 15.

Apakah perbezaan antara versi react15 dan react16?

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi react16&&react15, komputer Dell G3.

Apakah perbezaan antara versi react15 dan 16?

1 Seni bina react15 boleh dibahagikan kepada dua lapisan:

Reconciler (Penyelaras) - Ketahui komponen yang perlu dikemas kini dan kenal pasti cara untuk mengemas kini

Renderer (Renderer) - Bertanggungjawab untuk memaparkan komponen yang diubah ke halaman

2. Seni bina react16 boleh dibahagikan kepada tiga lapisan:

Penjadual (Penjadual) - keutamaan tugas penjadualan, yang berkeutamaan tinggi memasuki peringkat Reconciler terlebih dahulu

Reconciler (Penyelaras) - Ketahui komponen yang perlu dikemas kini, dan kenal pasti cara mengemas kini

Renderer (renderer) - bertanggungjawab untuk memaparkan komponen yang diubah ke halaman

Dikatakan pada permulaan :

Mekanisme penyemak imbas 16.6ms

Untuk mata manusia, kadar penyegaran normal dan lancar ialah 60hz, iaitu 60 bingkai, iaitu penyemak imbas menyegarkan sekali setiap 16.6ms.

Kami tahu bahawa js boleh mengendalikan elemen dom, jadi utas GUI dan utas js penyemak imbas adalah saling eksklusif. Pelaksanaan js dan lukisan serta susun atur penyemak imbas tidak boleh dilakukan pada masa yang sama. Oleh itu, penyemak imbas mesti melakukan operasi berikut setiap 16.6ms:

Pelaksanaan skrip JS ------ Reka letak gaya penyemak imbas ------ Lukisan gaya penyemak imbas

Jika js Pelaksanaan masa skrip terlalu panjang, melebihi 16.6ms Lukisan dan susun atur penyemak imbas tidak boleh dilaksanakan semasa penyegaran ini, yang akan menyebabkan ketinggalan yang boleh dikenali oleh mata manusia "semasa operasi. Sebagai contoh: untuk pengguna memasukkan kandungan dalam kotak input, ia ditunjukkan sebagai menekan butang papan kekunci tetapi input tidak dipaparkan dalam masa nyata pada halaman.

Perbezaan antara 15 dan 16

Pendamai bagi react15 ialah pendamai tindanan. Maksudnya, ia berfungsi dalam bentuk rekursif, segerak, dan tidak boleh diganggu semasa proses menjana pokok DOM maya dan membezakannya. Dengan cara ini, apabila tahap komponen terlalu dalam, masa pelaksanaan js akan menjadi terlalu lama, dan penyemak imbas tidak boleh susun atur dan melukis, mengakibatkan kehilangan bingkai.

Pendamaikan react16 ialah pendamai gentian. Iaitu, kemas kini gangguan tak segerak digunakan dan bukannya kemas kini segerak react15 Penjadual react16 akan memberitahu pendamai sama ada penyemak imbas mempunyai masa lapang untuk melaksanakan skrip js. Ini tidak akan menjejaskan kerja lukisan dan reka letak penyemak imbas. Tiada bingkai jatuh.

Dalam react16, DOM maya asal, kerana strukturnya tidak lagi dapat memenuhi keperluan kemas kini gangguan tak segerak, sebaliknya menggunakan struktur baharu Fiber. Nod DOM maya sepadan dengan nod Fiber, dan pokok DOM maya sepadan dengan pokok Fiber.

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah perbezaan antara versi react15 dan react16?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara membina apl sembang masa nyata dengan React dan WebSocket Cara membina apl sembang masa nyata dengan React dan WebSocket Sep 26, 2023 pm 07:46 PM

Cara membina apl sembang masa nyata dengan React dan WebSocket

Panduan untuk Bertindak balas pemisahan bahagian hadapan dan belakang: Cara mencapai penyahgandingan dan penggunaan bebas bagi bahagian hadapan dan belakang Panduan untuk Bertindak balas pemisahan bahagian hadapan dan belakang: Cara mencapai penyahgandingan dan penggunaan bebas bagi bahagian hadapan dan belakang Sep 28, 2023 am 10:48 AM

Panduan untuk Bertindak balas pemisahan bahagian hadapan dan belakang: Cara mencapai penyahgandingan dan penggunaan bebas bagi bahagian hadapan dan belakang

Cara membina aplikasi web yang ringkas dan mudah digunakan dengan React dan Flask Cara membina aplikasi web yang ringkas dan mudah digunakan dengan React dan Flask Sep 27, 2023 am 11:09 AM

Cara membina aplikasi web yang ringkas dan mudah digunakan dengan React dan Flask

Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ Sep 28, 2023 pm 08:24 PM

Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ

Cara membina aplikasi analisis data pantas menggunakan React dan Google BigQuery Cara membina aplikasi analisis data pantas menggunakan React dan Google BigQuery Sep 26, 2023 pm 06:12 PM

Cara membina aplikasi analisis data pantas menggunakan React dan Google BigQuery

Panduan penyahpepijatan kod tindak balas: Cara mencari dan menyelesaikan pepijat bahagian hadapan dengan cepat Panduan penyahpepijatan kod tindak balas: Cara mencari dan menyelesaikan pepijat bahagian hadapan dengan cepat Sep 26, 2023 pm 02:25 PM

Panduan penyahpepijatan kod tindak balas: Cara mencari dan menyelesaikan pepijat bahagian hadapan dengan cepat

Panduan Pengguna Penghala React: Cara melaksanakan kawalan penghalaan bahagian hadapan Panduan Pengguna Penghala React: Cara melaksanakan kawalan penghalaan bahagian hadapan Sep 29, 2023 pm 05:45 PM

Panduan Pengguna Penghala React: Cara melaksanakan kawalan penghalaan bahagian hadapan

Panduan reka bentuk responsif bertindak balas: Cara mencapai kesan susun atur bahagian hadapan yang adaptif Panduan reka bentuk responsif bertindak balas: Cara mencapai kesan susun atur bahagian hadapan yang adaptif Sep 26, 2023 am 11:34 AM

Panduan reka bentuk responsif bertindak balas: Cara mencapai kesan susun atur bahagian hadapan yang adaptif

See all articles