Comment démarrer rapidement avec VUE3.0 : En entrant pour apprendre
React 18, un nouveau concept - transition est introduit, qui apporte une nouvelle API - startTransition et deux nouveaux hooks - useTransition et usedeferredValue .
1. Présentation
Cet article est divisé en quatre parties :
tansition ,startTransitionuseTransition ,useDeferredValue2. L'intention originale de transition,
transtion est directement traduite par过渡. La transition est essentiellement为了解决渲染并发问题所提出. Dans React, une fois que l'état du composant change et qu'un nouveau rendu est déclenché, le rendu ne peut pas être arrêté. La page ne peut pas continuer à répondre à l'interaction de l'utilisateur jusqu'à ce que le composant soit restitué.
Pour cette raison, les mises à jour dans React 18 peuvent être divisées dans les deux catégories suivantes :
紧急更新: opérations de mise à jour auxquelles les utilisateurs s'attendent à répondre immédiatement, telles que les clics de souris ou la saisie au clavier.过渡更新: certaines opérations de mise à jour avec un délai acceptable, comme la requête, la recommandation de recherche, l'affichage des résultats de recherche, etc.// Mise à jour startTransition(()=> { après avoir été marqué par startTransiton pour la transition
// Les mises à jour non urgentes auront une priorité réduite et l'exécution de setQueryValue(inputValue) sera retardée.
})
// S'il n'est pas marqué, setInputValue(inputValue) sera exécuté immédiatement. La mise à jour marquée par startTrionstion dans React 18 est une mise à jour transitoire (la priorité d'exécution est réduite à ce moment, React retardera l'exécution de l'état interne). mise à jour selon le mécanisme de planification interne.
Les développeurs en cours de développement peuvent décider quelles mises à jour sont marquées comme événements de transition via des hooks de transition. Une fois marqué, il représente une exécution de faible priorité, c'est-à-dire que React sait que l'état peut être retardé lors de la mise à jour.通过区分更新优先级, les événements de haute priorité peuvent rester réactifs,提高用户交互体验，保持页面响应.
3.
introduction à l'utilisation de startTransiton startTransiton
const handleClick = () => {
// Package startTransition marqué comme mise à jour de faible priorité startTransition(()=> {
setQueryValue (valeur d'entrée)
})
// S'il n'est pas marqué, setInputValue(inputValue) sera exécuté immédiatement
} Tout d'abord, introduisons la startTransition la plus simple.
Grâce à une démonstration et une comparaison,
il s'agit d'un scénario de simulation d'affichage des résultats de recherche après la saisie de caractères. En forgeant un grand nombre de résultats de recherche, il simule une situation. qui a tendance à geler.
Nous essayons de saisir en permanence 123, de surveiller le changement de la value du champ de recherche (mise à jour urgente) et le changement de la valeur de recherche searchVal (mise à jour de transition) et de l'afficher dans la barre de contrôle.
importer React, { useEffect, useState, startTransition } depuis 'react' ;
importer './App.css'
const SearchResult = (accessoires) => {
const resultList = props.query
Array.from({ longueur : 10000 }, (_, index) => ({
identifiant : index,
mot-clé : `${props.query} -- résultats de recherche${index}`,
})) : [];
return resultList.map(({ id, mot-clé }) => (
<li key={id}>{keyword}</li>
))
}
const App = () => {
const [type, setTpye] = useState(1)
const [valeur, setValue] = useState('');
const [searchVal, setSearchVal] = useState('-');
utiliserEffet(() => {
// Surveiller les modifications de la valeur de recherche console.log('Réponse à la mise à jour de la valeur de recherche++++++' + searchVal + '++++++++++++')
}, [Val recherche])
utiliserEffet(() => {
console.log('Réponse à la mise à jour de la valeur de la zone de saisie-----' + valeur + '-------------')
si (tapez === 1) {
setSearchVal(valeur || '-')
}
si (tapez === 2) {
startTransition(() => {
setSearchVal(valeur || '-')
})
}
}, [valeur, type]);
retour (
<div className='Application'>
<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>
);
} ; En mode normal
如图所示： 123 caractères sont saisis en continu. Lorsque le premier caractère est saisi, la valeur de recherche répond immédiatement et le rendu de la liste démarre immédiatement, provoquant le gel de la zone de saisie et l'arrêt de la réponse à la saisie de l'utilisateur. continuez à répondre jusqu'à ce que le rendu soit terminé.
Après avoir utilisé startTransition
如图所示： saisissez continuellement des caractères 123, la zone de saisie continue de répondre et la réponse à la valeur de recherche est retardée pour garantir un retour de page. Elle ne commence à répondre à la valeur de recherche qu'à la fin de la saisie, ce qui rend la réponse. les résultats de recherche et en gardant la page réactive.
4. useTransiton
useTransiton introduction à l'utilisation
import { useTransiton } from 'react'
const [isPending, startTransition] = useTransiton({timeoutMs : 2000})
// Par exemple, à l'état en attente, vous pouvez afficher un Spinner
{ isPending ? < Spinner /> : null } startTransition est une fonction qui accepte un rappel et est utilisée pour informer React de l'état qui doit être retardé.isPending est un booléen, qui permet à React de nous dire s'il faut attendre la fin de la transition.useTransition accepte la valeur d'une réponse retardée avec timeoutMs . Si elle n'est pas terminée dans le timeoutMs donné, elle forcera la mise à jour de l'état dans la fonction de rappel startTransition .Analyse simple de useTransiton
Nous comprenons useTransition via un pseudo-code.
fonction useTransition(){
const [isPending, setPending] = mountState(false);
const start = (rappel)=>{
setPending(true);
// Scheduler.unstable_next Grâce au mode transition, la fonction de rappel d'exécution de planification à faible priorité // peut réduire la priorité des mises à jour. Si la mise à jour déclenchée lors du rappel a une priorité inférieure,
// Elle sera définie sur une mise à jour hautement prioritaire, ou lorsque la transaction en cours est occupée, elle sera programmée pour être appliquée lors de la prochaine période d'inactivité.
Planificateur.unstable_next(() => {
const prevTransition = ReactCurrentBatchConfig.transition;
ReactCurrentBatchConfig.transition = 1 ;
essayer {
setPending(faux);
//Exécuter la fonction de rappel callback();
} enfin {
ReactCurrentBatchConfig.transition = prevTransition;
}
})
}
return [isPending, start] ;
} Lors de l'exécution de startTransition , setPending sera déclenché deux fois, une fois avant transition=1 et une fois après. setPending(true) lorsque startTransition est appelé et transiton met à jour setPending(false) lorsque la fonction de rappel à l'intérieur startTransition est exécutée. React peut saisir avec précision le temps de transition d'attente en fonction des modifications de la valeur en attente et l'utiliser pour déterminer si timeoutMs a été dépassé (le cas échéant) afin de forcer une mise à jour.
5. useDeferredValue
useDeferredValue introduction à l'utilisation
const [value, setValue] = useState('')
// La valeur defferedValue est retardée après la mise à jour de l'état const deferredValue = useDeferredValue(value, {timeoutMs: 2000}) timeoutMs peut être défini.一段逻辑, tandis que useDeferred génère一个新状态.Utilisation de useDeferredValue
import React, { useEffect, useState, useTransition, useDeferredValue } from 'react' ;
importer './App.css'
const SearchResult = (accessoires) => {
const resultList = props.query
Array.from({ longueur : 10000 }, (_, index) => ({
identifiant : index,
mot-clé : `${props.query} -- résultats de recherche${index}`,
})) : [];
return resultList.map(({ id, mot-clé }) => (
<li key={id}>{keyword}</li>
))
}
const App = () => {
const [valeur, setValue] = useState('');
const searchValue = useDeferredValue(value, { timeoutMs : 2000 });
utiliserEffet(() => {
console.log('Réponse à la valeur de la zone de saisie------------' + valeur + '--------------')
}, [valeur])
utiliserEffet(() => {
// Surveiller les modifications de la valeur de recherche console.log('Mettre à jour la réponse à la valeur de recherche++++++' + searchValue + '++++++++++++')
}, [valeur de recherche])
retour (
<div className='Application'>
<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>
);
} ; 
Analyse simple de useDeferredValue
Nous comprenons useDeferredValue à travers un pseudo-code.
fonction useDeferredValue(valeur){
const [prevValue, setValue] = updateState(value);
updateEffect(() => {
// Mettre à jour la valeur via le mode de transition dans useEffect.
Planificateur.unstable_next(() => {
const prevTransition = ReactCurrentBatchConfig.transition;
ReactCurrentBatchConfig.transition = 1 ;
essayer {
setValue(valeur);
} enfin {
ReactCurrentBatchConfig.transition = prevTransition;
}
})
}, [valeur]);
renvoie la valeur précédente ;
} useDeferredValue écoute les modifications de la valeur entrante via useEffect, puis effectue la modification de valeur via la tâche de transition. Cela保证defrredValue的更新滞后于setState et est conforme au principe de mise à jour transitionnelle car elle est exécutée via le mécanisme de planification de transition.