So starten Sie schnell mit VUE3.0: Um
React 18 zu lernen, wird ein neues Konzept eingeführt – transition , das eine neue API – startTransition und zwei neue Hooks – useTransition und usedeferredValue mit sich bringt. Dieser Artikel beginnt hier. Verwenden Sie Einführungen für frühe Anwender.
1. Übersicht
Dieser Artikel ist in vier Teile unterteilt:
tansition ,startTransitionuseTransition ,useDeferredValue2. Die ursprüngliche Absicht von „transition“,
transtion wird direkt übersetzt als过渡. tansition wird im Wesentlichen为了解决渲染并发问题所提出. Sobald sich in React der Komponentenstatus ändert und ein erneutes Rendern ausgelöst wird, kann das Rendern nicht gestoppt werden. Die Seite kann nicht weiter auf Benutzerinteraktionen reagieren, bis die Komponente erneut gerendert wird.
Aus diesem Grund lassen sich Aktualisierungen in React 18 in die folgenden zwei Kategorien einteilen:
紧急更新: Aktualisierungsvorgänge, von denen Benutzer eine sofortige Reaktion erwarten, wie etwa Mausklicks oder Tastatureingaben.过渡更新: Einige Aktualisierungsvorgänge mit akzeptabler Verzögerung, z. B. Abfrage, Suchempfehlung, Anzeige von Suchergebnissen usw.// startTransition(()=> { aktualisieren, nachdem es von startTransiton für den Übergang markiert wurde
// Nicht dringende Aktualisierungen werden in der Priorität herabgesetzt und die Ausführung von setQueryValue(inputValue) wird verzögert.
})
// Wenn es nicht markiert ist, wird setInputValue(inputValue) sofort ausgeführt. Das durch startTrionstion in React 18 markierte Update ist ein Übergangsupdate (die Ausführungspriorität wird reduziert). Zu diesem Zeitpunkt verzögert React die Ausführung des internen Status Aktualisierung gemäß dem internen Planungsmechanismus.
Entwickler in der Entwicklung können über Übergangs-Hooks entscheiden, welche Updates als Übergangsereignisse markiert werden. Sobald es markiert ist, stellt es eine Ausführung mit niedriger Priorität dar, das heißt, React weiß, dass sich der Status bei der Aktualisierung verzögern kann.通过区分更新优先级können Ereignisse mit hoher Priorität weiterhin reagieren,提高用户交互体验，保持页面响应.
3. startTransiton
Einführung in die Verwendung von startTransiton
const handleClick = () => {
// startTransition-Paket als Update mit niedriger Priorität markiert startTransition(()=> {
setQueryValue(inputValue)
})
// Wenn es nicht markiert ist, wird setInputValue(inputValue) sofort ausgeführt
} Zunächst stellen wir die einfachste startTransition vor,
Statusaktualisierung
Dies ist eine Szenariosimulation der Anzeige von Suchergebnissen nach der Eingabe von Zeichen das zum Einfrieren neigt.
Wir versuchen, kontinuierlich 123 einzugeben, die Änderung des value (dringende Aktualisierung) und die Änderung des Suchwerts searchVal (Übergangsaktualisierung) zu überwachen und diese in der Steuerleiste auszugeben.
import React, { useEffect, useState, startTransition } from 'react';
importiere './App.css'
const SearchResult = (props) => {
const resultList = props.query
? Array.from({ length: 10000 }, (_, index) => ({
ID: Index,
Stichwort: „${props.query} – Suchergebnisse${index}“,
})): [];
return resultList.map(({ id, keyword }) => (
<li key={id}>{keyword}</li>
))
}
const App = () => {
const [Typ, setTpye] = useState(1)
const [value, setValue] = useState('');
const [searchVal, setSearchVal] = useState('-');
useEffect(() => {
// Suchwertänderungen überwachen console.log('Antwort auf Suchwertaktualisierung++++++' + searchVal + '++++++++++++')
}, [searchVal])
useEffect(() => {
console.log('Antwort auf die Aktualisierung des Eingabefeldwerts-----' + value + '-------------')
if (Typ === 1) {
setSearchVal(value || '-')
}
if (Typ === 2) {
startTransition(() => {
setSearchVal(value || '-')
})
}
}, [Wert, Typ]);
zurückkehren (
<div className='App'>
<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>
);
}; Im normalen Modus
如图所示： 123 Zeichen werden kontinuierlich eingegeben. Der Suchwert reagiert sofort und die Listenwiedergabe beginnt sofort, wodurch das Eingabefeld einfriert und nicht mehr auf Benutzereingaben reagiert Reagieren Sie weiter, bis das Rendern abgeschlossen ist.
Nach der Verwendung von startTransition
如图所示： Geben Sie kontinuierlich 123 Zeichen ein, das Eingabefeld antwortet weiterhin und die Antwort auf den Suchwert wird verzögert, um sicherzustellen, dass die Seite erst am Ende der Eingabe auf den Suchwert reagiert Suchergebnisse und die Reaktionsfähigkeit der Seite.
4. useTransiton
useTransiton-Nutzungseinführung
import { useTransiton } from 'react'
const [isPending, startTransition] = useTransiton({timeoutMs: 2000})
// Beispielsweise können Sie im Status „Ausstehend“ einen Spinner anzeigen
{ isPending ? < Spinner /> : null } startTransition ist eine Funktion, die einen Rückruf akzeptiert und verwendet wird, um React über den Status zu informieren, der verzögert werden muss.isPending ist ein boolescher Wert, mit dem React uns mitteilt, ob wir auf den Abschluss des Übergangs warten sollen.useTransition akzeptiert den Wert einer verzögerten Antwort mit timeoutMs . Wenn diese nicht innerhalb des angegebenen timeoutMs abgeschlossen wird, wird die Aktualisierung des Status in der Callback-Funktion startTransition erzwungen.Einfache Analyse von useTransiton
Wir verstehen useTransition durch Pseudocode.
Funktion useTransition(){
const [isPending, setPending] = mountState(false);
const start = (Rückruf)=>{
setPending(true);
// Scheduler.unstable_next Durch den Transiton-Modus kann die Rückruffunktion für die Ausführung mit niedriger Priorität // die Priorität von Aktualisierungen verringern. Wenn das im Callback ausgelöste Update eine niedrigere Priorität hat,
// Es wird auf eine Aktualisierung mit hoher Priorität eingestellt, oder wenn die aktuelle Transaktion ausgelastet ist, wird die Anwendung in der nächsten Leerlaufzeit geplant.
Scheduler.unstable_next(() => {
const prevTransition = ReactCurrentBatchConfig.transition;
ReactCurrentBatchConfig.transition = 1;
versuchen {
setPending(false);
//Rückruffunktion ausführen callback();
} Endlich {
ReactCurrentBatchConfig.transition = prevTransition;
}
})
}
return [isPending, start];
} Während der Ausführung von startTransition wird setPending zweimal ausgelöst, einmal vor transition=1 und einmal danach. setPending(true) wenn startTransition aufgerufen wird, und transiton Übergangsaufgabe aktualisiert setPending(false) , wenn die Rückruffunktion in startTransition ausgeführt wird. React kann die wartende Übergangszeit basierend auf Änderungen des ausstehenden Werts genau erfassen und diese verwenden, um festzustellen, ob timeoutMs überschritten wurde (sofern welche übergeben wurden), um eine Aktualisierung zu erzwingen.
5.
Einführung in die Nutzung von useDeferredValue
const [value, setValue] = useState('')
// Der defferedValue-Wert wird nach der Statusaktualisierung verzögert. const deferredValue = useDeferredValue(value, {timeoutMs: 2000}) timeoutMs kann festgelegt werden.一段逻辑, während useDeferred一个新状态generiert.Verwendung von useDeferredValue
import React, { useEffect, useState, useTransition, useDeferredValue } from 'react';
importiere './App.css'
const SearchResult = (props) => {
const resultList = props.query
? Array.from({ length: 10000 }, (_, index) => ({
ID: Index,
Stichwort: „${props.query} – Suchergebnisse${index}“,
})): [];
return resultList.map(({ id, keyword }) => (
<li key={id}>{keyword}</li>
))
}
const App = () => {
const [value, setValue] = useState('');
const searchValue = useDeferredValue(value, { timeoutMs: 2000 });
useEffect(() => {
console.log('Antwort auf Eingabefeldwert--------' + Wert + '---------------')
}, [Wert])
useEffect(() => {
// Suchwertänderungen überwachen console.log('Antwort auf Suchwert aktualisieren++++++' + searchValue + '++++++++++++')
}, [Suchwert])
zurückkehren (
<div className='App'>
<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>
);
}; 
Einfache Analyse von useDeferredValue
Wir verstehen useDeferredValue durch Pseudocode.
Funktion useDeferredValue(value){
const [prevValue, setValue] = updateState(value);
updateEffect(() => {
// Wert durch Übergangsmodus in useEffect aktualisieren.
Scheduler.unstable_next(() => {
const prevTransition = ReactCurrentBatchConfig.transition;
ReactCurrentBatchConfig.transition = 1;
versuchen {
setValue(value);
} Endlich {
ReactCurrentBatchConfig.transition = prevTransition;
}
})
}, [Wert]);
return prevValue;
} useDeferredValue wartet über useEffect auf Änderungen im eingehenden Wert und führt die Wertänderung dann über die Übergangsaufgabe durch. Dadurch保证defrredValue的更新滞后于setState und dem Prinzip der Übergangsaktualisierung entspricht, da sie über den Übergangsplanungsmechanismus ausgeführt wird.