React Hooks, laisse - moi t'emmener étudier.

Code Boy 2021-09-15 04:54:53
react hooks laisse moi emmener


Introduction

ReactIn16.8Les versions ci - dessus peuvent être utilisées,hooksL'avantage est une meilleure réutilisabilité,C'est réglé.Composants apatridesLe cycle de vie et la gestion de l'état,Substitutionclass,Peut être personnaliséhookSous la forme d'un composant à grain plus fin divisé,Facile à agrandir et à entretenir.

Hook Pour que tu sois dans le bien et le mal class Peut être utilisé avec plus React Caractéristiques. Sur le plan conceptuel,React Les composants ont toujours été plus fonctionnels.Et Hook Et embrasser la fonction,Et il n'y a pas de sacrifice. React Principes spirituels.Hook Questions posées Solutions pour,Pas besoin d'apprendre des techniques complexes de programmation fonctionnelle ou réactive.

Regardons un peureactProcessus de rendu global,Pour que tout le monde comprenne mieuxreactProcessus de mise en œuvre,Et ensuitehooksExplication des principes

Capture d'écran2021-09-13 Après - midi8.51.59.png

reactAutreshooks api

Sélection dans l'industrie -Ali!ahooksBibliothèque

ReactPiliers de l'optimisation des performances——ImmutableFlux de données

Utilisation de base

useStateEtuseReducerEn coursEnvoyer des mises à jour(Rendre les composants de la fonction).

useRefMise en cache des variables et modification des variables non effectuéeEnvoyer des mises à jour,ref.current Obtenir les variables mises en cache

useEffect Les effets indésirables peuvent être mis à jour ,IndomDéclenche une fonction de rappel après le montage sur la page pour le rendu,Comme une demande de réseau,Temps de mise à jour, etc..

useLayoutEffectCréationdomAprès,Montagedom Appelé avant la page ,Vous pouvez effectuer des opérations indépendantes du rendu, Comme publier des abonnements, etc.

useCallback Peut mettre en cache des fonctions ,QuandEnvoyer des mises à jourHeure,Les paramètres dépendants ne changent pas, Ne pas créer Nouvelles fonctions,useCallback(fn, deps) équivalent à useMemo(() => fn, deps).

useMemo Peut mettre en cache l'état , Optimiser les performances

useContextDisponibleReact.createContext Objet contextuel créé

const Context = createContext(null);
function Parent () {
return (<Context.Provider value={{ a: 1 }}> <Child /> </Context.Provider>);
}
function Child () {
const data = useContext(Context)
console.log(data);
return null;
}
export default Parent;
Copier le Code

useImperativeHandleCoopérationforwardRefLes paramètres du sous - composant peuvent être transmis à travers le composant parent,Composant parent viaref.current Obtenir les paramètres entrants

// UtiliserforwardRef, Le deuxième paramètre sera reçu , Pour transmission directe refOu en combinaison avecuseImperativeHandle Lier les données des sous - composants 
function SetStatePage(props, ref) {
const [count ,setCount] = useState(0)
// Le premier paramètre reçoit la transmission ref, Second Parameter receiver function , Renvoie les données à transmettre 
useImperativeHandle(ref, () => ({
count,
setCount
}))
return (
<div> <p>You clicked {count} times</p> </div>
)
}
// forwardRefTransmissibleref
const SetStatePageWithRef = forwardRef(SetStatePage);
function Parent () {
const ref = useRef(null);
return (<div> <SetStatePageWithRef ref={ref} /> {/* Adoptionref.current Obtenir des données pour les sous - composants */} <button onClick={() => ref.current.setCount(ref.current.count + 1)}>Click me</button> </div>);
}
export default Parent;
Copier le Code

useDebugValueDisponible en React Affichage dans les outils de développement Personnalisation hook Étiquette de( Doit être personnalisé HookUtilisé dans),Comme en bas.,Il peut également recevoir un second paramètre,Fonction de rappel pour le chargement différé,Réceptiondebug Valeur comme argument , Retour traité debug Afficher les valeurs

export default function SetStatePage(props) {
function useOnline (state) {
const [isOnline, setIsOnline] = useState(state);
useDebugValue(isOnline > 5 ? 'Online' : 'Offline', (debug) => {
if (debug === 'Online') {
return true;
} else {
return false;
}
});
return [isOnline, setIsOnline];
}
function useFriendStatus(friendID) {
const [id, setID] = useState(friendID);
// Celui - ci dans les outils de développement Hook Afficher les étiquettes à côté 
// "FriendStatus: Online"
useDebugValue(id > 5 ? 'Online' : 'Offline');
return [id, setID];
}
const [id, setID] = useFriendStatus(3);
const [isOnline, setIsOnline] = useOnline(3);
return (
<div> <p>You clicked {isOnline} times</p> <button onClick={() => setID(id + 1)}>Click ID</button> <button onClick={() => setIsOnline(isOnline + 1)}>Click Online</button> </div>
)
}
Copier le Code

Capture d'écran2021-09-13 Matin11.20.00.png

HooksPrincipe de réalisation

Comme au - dessus.useDebugValueNous pouvons utiliser Google explorerReact devtoolsPlug - inVous pouvez voir lehooksStatut,Comment cet état a - t - il été obtenu?On pourrait étudier sa réalisation, Et trouver la réponse

InReactMoyenne,Chaque exécutionuseStateOuuseReducer Toutes les fonctions de mise à jour sont déclenchées Envoyer des mises à jour,Exécuter à nouveau les composants de la fonction pour rendre à nouveau, Si vous ne mettez pas en cache hooksÉtat de,N'est - ce pas la même valeur chaque fois que vous obtenez un état

Comment mettre en cache hooksÉtat de, Où est le cache? ? La réponse est:react16 fiberArchitectureMoyenne

react Dans la grande version 16Quand,Virtualiserdom La structure de l'arbre est convertie en Liste des liensfiber,Adoptionchild、sibling、return Pointer vers un autre noeud ,L'avantage est que Je peux vous interrompre. EtParamètresdom Priorités opérationnelles Nouveau et anciendomComparer,diff Processus de fragmentation , Similaire à la structure de données suivante

{
type: Marquer le type de noeud (dom Chaîne d 'étiquettes ,Fonctions,Catégorie),
key: Valeur unique au niveau actuel du noeud,
props: Propriétés,
stateNode: Primitivedom、Exemple de classe,
child: Sous - noeud,
return: Noeud parent,
sibling: Noeud frère,
alternate: Vieux noeud,
flags: Instructions de fonctionnement(Ajouter,Remplacer,Mise à jour),
deletions: Pour supprimer un noeud enfant nullOu[],
index: Indice au niveau actuel ,De0C'est parti.
memorizedState: hookNoeud d'en - tête de la liste de liens
}
Copier le Code

image.png

hooks En fait, tout est là. fiber.memorizedStateLà - haut, Voilà la réponse. React devtoolsPlug - in Comment obtenir le statut ,PourquoimemorizedStatePourquoi une structure de liste liée au lieu d'un tableau, Je pense que c'est un besoin DiscontinuEspace de stockage pour

Pourquoi ne peut - on appeler que la couche externe de la fonction Hook? Pourquoi pas en boucle? 、Jugement conditionnel ou appel dans une sous - fonction

Pour répondre aux questions ci - dessus ,Pour comprendrereact hooksPrincipe de réalisation,On a raison.Fiber Liste de liens dfsHeure,Je vais juger.typePropriétés, Si une fonction ,Il passera.type(props)Exécuter la fonction,Obtenir un nouveauFiber,reconcileChildren Nouveau et ancien noeud diff,Voici une simplification de la mise en œuvre du code source,Facile à comprendre:

// Composant de fonction
export function updateFunctionComponent(wip) {
renderWithHooks(wip);
const {type, props} = wip;
const newFiber = type(props);
// Sous - noeud de coordination 
reconcileChildren(wip, newFiber);
}
Copier le Code

renderWithHooks( Réinitialiser l'exécution actuelle FiberDehookStatut)

Avant d'exécuter un composant de fonction,Sera appelé en premierrenderWithHooksLa fonction passe dansFiber, Variables globales currentlyRenderingFiberAssigner une valeur, Pour le suivi hooks APIAppel de

function renderWithHooks(fiber) {
currentlyRenderingFiber = fiber;
currentlyRenderingFiber.memoizedState = null;
// Dans le code source est un updateQueue Tableau à stocker , C'est simple. , Écrivez séparément useEffectEtuseLayoutEffect
currentlyRenderingFiber.updateQueueOfEffect = [];
currentlyRenderingFiber.updateQueueOfLayout = [];
workInProgressHook = null;
}
Copier le Code

updateWorkInProgressHook( Obtenir l'exécution actuelle hook)

AdoptionFiber.alternate( Pour l'ancien Fiber)Pour déterminer s'il s'agit d'un rendu initial

Via les variables globales currentlyRenderingFiber Travaux en cours Fiber,workInProgressHookEn coursHook,currentHook Travaux en cours hook Ancien correspondant hook,Pour obtenir En cours hook Et extraction hookDépendancesEn coursComparaison superficielle

unction updateWorkInProgressHook() {
let hook = null;
// todo get hook
// Vieux noeud 
let current = currentlyRenderingFiber.alternate;
if (current) {
// Phase de mise à jour NouveauhookDans le vieuxhook Mise à jour sur la base 
currentlyRenderingFiber.memoizedState = current.memoizedState;
if (workInProgressHook) {
// Non.0- Oui.hook
hook = workInProgressHook = workInProgressHook.next;
currentHook = currentHook.next;
} else {
// Oui.0- Oui.hook
hook = workInProgressHook = current.memoizedState;
currentHook = current.memoizedState;
}
} else {
// Première phase de rendu 
currentHook = null;
hook = {
memoizedState: null, // Valeur du Statut
next: null, // Suivant.hook
};
if (workInProgressHook) {
// Non.0- Oui.hook
workInProgressHook = workInProgressHook.next = hook;
} else {
// Oui.0- Oui.hook
workInProgressHook = currentlyRenderingFiber.memoizedState = hook;
}
}
return hook;
}
Copier le Code

useState

  • AdoptionupdateWorkInProgressHook Obtenir l'exécution actuelle hook
  • AdoptioncurrentlyRenderingFiberDéterminer si ce n'est pas le premier rendu
  • Adoptionsetter La fonction passe dans un nouvel état newStatePour mettre à jourhook État et envoi des mises à jour
function useState (state) {
const hook = updateWorkInProgressHook();
if (!currentlyRenderingFiber.alternate) {
// Rendu initial
hook.memoizedState = state;
}
const dispatch = (newState) => {
hook.memoizedState = newState;
scheduleUpdateOnFiber(currentlyRenderingFiber);
};
return [hook.memoizedState, dispatch];
}
Copier le Code

use(Layout)Effect

  • AdoptioncurrentHookUne comparaison superficielle entre les dépendances antérieures sauvegardées et les dépendances existantes
  • AdoptionhookFlagDéterminer si un rappel est effectué de façon asynchrone ou synchrone
  • FiberTousdiffUne fois terminé,C'est exact.updateQueueLa fonction de rappel est exécutée de façon synchrone ou asynchrone
export function useEffect(create, deps) {
return updateEffectIml(HookPassive, create, deps);
}
export function useLayoutEffect(create, deps) {
return updateEffectIml(HookLayout, create, deps);
}
export function updateEffectIml(hookFlag, create, deps) {
const hook = updateWorkInProgressHook();
const effect = {hookFlag, create, deps};
// Lors de la mise à jour des composants ,Et la dépendance n'a pas changé
if (currentHook) {
const prevEffect = currentHook.memoizedState;
if (deps) {
const prevDeps = prevEffect.deps;
if (areHookInputsEqual(deps, prevDeps)) {
return;
}
}
}
hook.memoizedState = effect;
if (hookFlag & HookPassive) {
currentlyRenderingFiber.updateQueueOfEffect.push(effect);
} else if (hookFlag & HookLayout) {
currentlyRenderingFiber.updateQueueOfLayout.push(effect);
}
}
Copier le Code

QuandFiberNoeuddiffUne fois terminé,commitSoumettredom Lors du montage ,useLayoutEffectRappelExécution immédiate,useEffectLa fonction passe parscheduleCallback Programmation asynchrone ,Il sera là.domAprès le renduMise en œuvre

Article de référence

React Hooks Principes

版权声明
本文为[Code Boy]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/09/20210914174203451z.html

  1. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  2. Vue3.0 using Gaode map to obtain longitude and latitude information
  3. React realizes the function of copying pictures with one click
  4. White space, word break and word wrap are the three most basic and confusing attributes in CSS - thoroughly understand
  5. Trois ans d'expérience d'entrevue avec une femme de programmation diplômée, une réflexion sur la cohérence de l'expiration des données de redis Master slave Node,
  6. Résumé de l'entrevue Android de Dachang, carte technique Android
  7. Un plan de carrière Java correct, découvrez les questions que vous devez poser lors de l'entrevue d'embauche du printemps Java de cette année.
  8. Le résumé de l'entrevue Android de Dachang est en retard
  9. Un article vous a appris à gérer les entrevues sur le Web, à partager 350 vraies questions d'entrevue Java,
  10. Jquery Tools Methodology collation, Sharing a little interview Experience
  11. Jquery plug - in urianchor, app front end Development
  12. $in jquery, Visualized Web Development Tool
  13. Le développement Java doit être fait. Les entrevues https demandent souvent une analyse complète.
  14. vue v-if未生效问题
  15. vue动态改变组件外部元素样式
  16. Jdk's Past Life: The Classic Features of Thin Number - java5 - - - 15 -, webfront Development
  17. Résumé des questions d'entrevue pour les ingénieurs en développement Java, analyse des questions d'entrevue à haute fréquence Dubbo,
  18. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  19. A Simple Css Meun
  20. Vue modifier dynamiquement le style de l'élément externe du composant
  21. Vue V - si problème non valable
  22. N'osez pas vous opposer à l'intervieweur et obtenir des commentaires personnels des stagiaires d'offer Ali après cinq rondes d'entrevue.
  23. Améliorer continuellement leur capacité à créer des primes, et les questions d'entrevue Java d'Alibaba Huawei Tencent et d'autres grandes usines sont sautées en octets.
  24. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  25. Who doesn't want to make a scratch music by himself? Scratch music is realized by native JS
  26. Learn XPath to help climb the data of major e-commerce platforms in the Mid Autumn Festival
  27. vue動態改變組件外部元素樣式
  28. vue v-if未生效問題
  29. Je ne comprends pas comment la machine virtuelle JVM peut encore interviewer, et j'ai terminé ce dictionnaire d'entrevue Java de 1307 pages.
  30. Dongxh, mid autumn festival gifts 🥮, [CSS starry sky realization, Mid Autumn Festival poem]
  31. What if you want to see the moon and don't want to go out
  32. Mid Autumn Festival, Chang'e looks at the moon
  33. Mid Autumn Festival special! Use the simplest animation animation to make the most local and trendy holiday blessing greeting card. This romantic male and female tears of Xiao Chen.
  34. [Pixi] super beautiful! How to make mid autumn festival scene level animation!!
  35. Echarts realizes the rotation of the moon (super simple, you can see it at a glance)
  36. Dart mixin full resolution
  37. Some suggestions on Vue code readability | comments are rewarded
  38. 120 lines of code to achieve pure web video editing
  39. Yang yangsun took a selfie to celebrate his 30th birthday, and Wang Yanlin sent blessings.
  40. Comment passer une entrevue avec une entreprise Internet de première ligne, Android Classic Getting started tutoriel
  41. Comment essayer un développeur Android vraiment niveau, 【 résumé de l'entrevue 】
  42. Wang Ou went back to the hotel with the man at night. It was suspected that his relationship was open. The netizen replied mercilessly: is the man single
  43. 借助HTML ping属性实现数据上报
  44. APNG在线制作、兼容、播放和暂停
  45. Apng production, compatibilité, lecture et pause en ligne
  46. Mise en œuvre de l'escalade des données avec l'attribut de Ping HTML
  47. Comment envoyer 100 000 requêtes http le plus rapidement possible
  48. JQuery Basics
  49. Front and back end data interaction (V) -- what is Axios?
  50. Serverless is a model architecture invented driven by economic benefits- Grady
  51. Les questions d'entrevue pour les ingénieurs Java d'Internet, les intervieweurs rencontrés sont tous de niveau architecte,
  52. Cinq ans d'entrevue d'expérience en développement Java, découvrez les questions que vous devez poser lors de l'entrevue d'embauche du printemps Java de cette année.
  53. La dernière collection de questions d'entrevue Java haute fréquence organisée cette année, 2021 Java Universal Popular Framework
  54. Intel selected Weilai es8 to promote driverless taxis in Europe
  55. JavaScript operator (1), Web Development Engineer
  56. Trier les questions d'entrevue Javascript, trier les points de connaissance des itinéraires d'apprentissage
  57. Song Mengjun's "sleepless night" triggered an upsurge of dance storm after 00
  58. Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)
  59. Encapsulated PHP sends HTTP requests with curl. Get and post are very easy to use
  60. Front and back end data interaction (V) -- what is Axios?