Cara cepat memulai VUE3.0: Masuk untuk mempelajari
React 18, sebuah konsep baru - transition diperkenalkan, yang menghadirkan API baru - startTransition dan dua hook baru - useTransition dan usedeferredValue .
1. Ikhtisar
Artikel ini dibagi menjadi empat bagian:
tansition ,startTransitionuseTransition ,useDeferredValue2. Maksud awal transisi,
transtion langsung diterjemahkan sebagai过渡. transisi pada dasarnya为了解决渲染并发问题所提出. Di React, setelah status komponen berubah dan rendering ulang dipicu, rendering tidak dapat dihentikan. Halaman tidak dapat terus merespons interaksi pengguna hingga komponen dirender ulang.
Oleh karena itu, pembaruan di react 18 dapat dibagi menjadi dua kategori berikut:
紧急更新: operasi pembaruan yang diharapkan pengguna dapat segera ditanggapi, seperti klik mouse atau input keyboard.过渡更新: beberapa operasi pembaruan dengan penundaan yang dapat diterima, seperti kueri, rekomendasi pencarian, tampilan hasil pencarian, dll.// Perbarui startTransition(()=> { setelah ditandai oleh startTransiton untuk transisi
// Pembaruan yang tidak mendesak akan diturunkan prioritasnya dan eksekusi setQueryValue(inputValue) akan ditunda.
})
// Jika tidak ditandai, setInputValue(inputValue) akan segera dieksekusi. Pembaruan yang ditandai dengan startTrionstion di reaksi 18 adalah pembaruan transisi (prioritas eksekusi dikurangi). memperbarui sesuai dengan mekanisme penjadwalan internal.
Pengembang yang sedang dalam pengembangan dapat memutuskan pembaruan mana yang ditandai sebagai peristiwa transisi melalui kaitan transisi. Setelah ditandai, ini mewakili eksekusi berprioritas rendah, yaitu React mengetahui bahwa status dapat tertunda dalam pembaruan.通过区分更新优先级, peristiwa berprioritas tinggi dapat tetap responsif,提高用户交互体验，保持页面响应.
3.
pengenalan penggunaan startTransiton startTransiton
const handleClick = () => {
// paket startTransition ditandai sebagai pembaruan prioritas rendah startTransition(()=> {
setQueryValue(nilai masukan)
})
// Jika tidak ditandai, setInputValue(inputValue) akan segera dieksekusi
} Pertama, mari kita perkenalkan startTransition yang paling sederhana.
Melalui demonstrasi dan perbandingan,
ini adalah simulasi skenario menampilkan hasil pencarian setelah memasukkan karakter dalam jumlah besar yang rentan terhadap pembekuan.
Kami mencoba untuk terus memasukkan 123, memantau perubahan value kotak pencarian (pembaruan mendesak) dan perubahan nilai pencarian searchVal (pembaruan transisi) dan mengeluarkannya ke bilah kontrol.
import React, { useEffect, useState, startTransition } dari 'react';
impor './App.css'
const Hasil Pencarian = (alat peraga) => {
const resultList = props.query
? Array.dari({ panjang: 10000 }, (_, indeks) => ({
nomor identitas: indeks,
kata kunci: `${props.query} -- hasil pencarian${index}`,
})): [];
kembalikan resultList.map(({ id, kata kunci }) => (
<li key={id}>{kata kunci}</li>
))
}
const Aplikasi = () => {
const [ketik, setTpye] = useState(1)
const [nilai, setValue] = useState('');
const [searchVal, setSearchVal] = useState('-');
gunakanEffect(() => {
// Pantau perubahan nilai pencarian console.log('Respon terhadap pembaruan nilai pencarian++++++' + searchVal + '++++++++++++')
}, [val pencarian])
gunakanEffect(() => {
console.log('Respon terhadap pembaruan nilai kotak masukan-----' + nilai + '-------------')
jika (ketik === 1) {
setSearchVal(nilai || '-')
}
jika (ketik === 2) {
mulaiTransisi(() => {
setSearchVal(nilai || '-')
})
}
}, [nilai, ketik]);
kembali (
<div className='Aplikasi'>
<input value={value} onChange={e => setValue(e.target.value)} />
<div className={`type_button ${type === 1 ? 'type_button_checked' : ''}`} onClick={() => setTpye(1)}>normal</div>
<div className={`type_button ${type === 2 ? 'type_button_checked' : ''}`} onClick={() => setTpye(2)}>transiton</div>
<ul>
<SearchResult query={searchVal}></SearchResult>
</ul>
</div>
);
}; Dalam mode normal
如图所示： 123 karakter dimasukkan secara terus menerus. Ketika karakter pertama dimasukkan, nilai pencarian segera merespons, dan rendering daftar segera dimulai, menyebabkan kotak masukan terhenti dan berhenti merespons masukan pengguna terus merespons sampai rendering selesai.
Setelah menggunakan startTransition
如图所示： Terus-menerus memasukkan karakter 123, kotak masukan terus merespons, dan respons terhadap nilai pencarian ditunda untuk memastikan umpan balik halaman tidak mulai merespons nilai pencarian hingga akhir input, merender hasil pencarian, dan menjaga halaman tetap responsif.
4. useTransiton
useTransiton pengenalan penggunaan
import { useTransiton } dari 'react'
const [isPending, startTransition] = useTransiton({timeoutMs: 2000})
// Misalnya, dalam keadaan tertunda, Anda dapat menampilkan Spinner
{ isPending ? < Spinner /> : null } startTransition adalah fungsi yang menerima panggilan balik dan digunakan untuk memberi tahu React mengenai keadaan yang perlu ditunda.isPending adalah boolean, yang merupakan cara reaksi untuk memberi tahu kita apakah harus menunggu hingga transisi selesai.useTransition menerima nilai respons tertunda dengan timeoutMs . Jika tidak diselesaikan dalam timeoutMs yang ditentukan, ini akan memaksa pembaruan status dalam fungsi panggilan balik startTransition .Analisis sederhana useTransiton
Kami memahami useTransition melalui kode semu.
fungsi penggunaanTransisi(){
const [isPending, setPending] = mountState(false);
const start = (panggilan balik)=>{
setPending(benar);
// Scheduler.unstable_next Melalui mode transisi, fungsi panggilan balik eksekusi penjadwalan prioritas rendah // dapat mengurangi prioritas pembaruan. Jika pembaruan yang dipicu dalam panggilan balik memiliki prioritas lebih rendah,
// Ini akan disetel ke pembaruan prioritas tinggi, atau ketika transaksi saat ini sedang sibuk, maka akan dijadwalkan untuk diterapkan pada periode menganggur berikutnya.
Penjadwal.unstable_next(() => {
const prevTransition = ReactCurrentBatchConfig.transition;
ReactCurrentBatchConfig.transisi = 1;
mencoba {
setPending(salah);
//Jalankan fungsi panggilan balik callback();
} Akhirnya {
ReactCurrentBatchConfig.transition = prevTransition;
}
})
}
kembali [ditunda, mulai];
} Selama eksekusi startTransition , setPending akan dipicu dua kali, sekali sebelum transition=1 dan sekali lagi setelahnya. setPending(true) ketika startTransition dipanggil, dan tugas transisi transiton memperbarui setPending(false) ketika fungsi panggilan balik di dalam startTransition dijalankan. React dapat secara akurat memahami waktu transisi menunggu berdasarkan perubahan nilai yang tertunda, dan menggunakannya untuk menentukan apakah timeoutMs telah terlampaui (jika ada yang diteruskan) untuk memaksa pembaruan.
5. useDeferredValue
useDeferredValue pengenalan penggunaan
const [value, setValue] = useState('')
// Nilai defferedValue tertunda setelah pembaruan status const deferredValue = useDeferredValue(value, {timeoutMs: 2000}) timeoutMs waktu tunda maksimum dapat diatur.一段逻辑, sedangkan useDeferred menghasilkan一个新状态.Penggunaan useDeferredValue
import React, { useEffect, useState, useTransition, useDeferredValue } dari 'react';
impor './App.css'
const Hasil Pencarian = (alat peraga) => {
const resultList = props.query
? Array.dari({ panjang: 10000 }, (_, indeks) => ({
nomor identitas: indeks,
kata kunci: `${props.query} -- hasil pencarian${index}`,
})): [];
kembalikan resultList.map(({ id, kata kunci }) => (
<li key={id}>{kata kunci}</li>
))
}
const Aplikasi = () => {
const [nilai, setValue] = useState('');
const searchValue = useDeferredValue(nilai, { timeoutMs: 2000 });
gunakanEffect(() => {
console.log('Respon terhadap nilai kotak masukan--------' + nilai + '---------------')
}, [nilai])
gunakanEffect(() => {
// Pantau perubahan nilai pencarian console.log('Perbarui respons terhadap nilai pencarian++++++' + SearchValue + '++++++++++++')
}, [Nilai Pencarian])
kembali (
<div className='Aplikasi'>
<input value={value} onChange={e => setValue(e.target.value)} />
<div className={`type_button type_button_checked`}>useDeferredValue</div>
<ul>
<SearchResult query={searchValue}></SearchResult>
</ul>
</div>
);
}; 
Analisis sederhana useDeferredValue
Kami memahami useDeferredValue melalui kode semu.
fungsi useDeferredValue(nilai){
const [nilai sebelumnya, setValue] = updateState(nilai);
updateEffect(() => {
// Perbarui nilai melalui mode transisi di useEffect.
Penjadwal.unstable_next(() => {
const prevTransition = ReactCurrentBatchConfig.transition;
ReactCurrentBatchConfig.transisi = 1;
mencoba {
setValue(nilai);
} Akhirnya {
ReactCurrentBatchConfig.transition = prevTransition;
}
})
}, [nilai]);
kembalikan Nilai Sebelumnya;
} useDeferredValue mendengarkan perubahan nilai yang masuk melalui useEffect, lalu melakukan perubahan nilai melalui tugas transisi. Hal ini保证defrredValue的更新滞后于setState dan sesuai dengan prinsip pembaruan transisi karena dijalankan melalui mekanisme penjadwalan transisi.