Qu'est-ce que le rendu dans React et comment le forcer?

Qu'est-ce que Render dans React, comment pouvons-nous forcer une classe ou un composant fonctionnel à re-rendre, et peut-on le faire sans appeler setState?

La réponse courte à la question de savoir si vous pouvez forcer un composant React rendre (et sans appeler setState) est oui, vous pouvez. Cependant, avant de savoir comment procéder, clarifions d’abord quelques points importants.

Dès les débuts de React, les développeurs se sont inquiétés des ré-rendus inutiles des composants et ont essayé de les optimiser. Je peux déjà vous dire que l'optimisation prématurée n'est pas la meilleure idée car React est très rapide, et le plus souvent le problème réside dans la manière dont le code est écrit. Par conséquent, inquiétez-vous quand il y a vraiment un problème visible. Le fait qu'un composant ait été rendu à nouveau ne signifie pas nécessairement que DOM a été réellement modifié. Si cela vous surprend, alors soyez indulgents avec moi.

Commençons par une explication de ce qui se passe exactement lorsque nous mettons à jour l'état dans React.

Qu'est-ce que Render dans React?

React prend en charge la manipulation de DOM avec l'utilisation de la fonction React.createElement afin que nous n'ayons pas à le faire manuellement. Au lieu de cela, les mises à jour sont effectuées uniquement lorsque cela est nécessaire. Nous ne décrivons que l'apparence que nous voulons du DOM avec JSX ou la fonction pure createElement et React crée une représentation virtuelle du DOM. Ensuite, sur cette base, le vrai DOM sera mis à jour chaque fois qu'il y aura des différences après le changement d'état. De plus, si de nombreuses mises à jour DOM sont planifiées, React peut les regrouper pour plus d'efficacité. Néanmoins, l'ensemble de ce processus se compose de trois étapes: Render, Reconciliation et Commit.

Render – React appelle la fonction render pour collecter la sortie des fonctions createElement
Reconciliation – De nouveaux éléments sont comparés à des éléments donnés précédemment et le DOM virtuel est mis à jour s'il y a des différences
Commit – Le vrai DOM est mis à jour

Comme je l'ai déjà mentionné, changer l'état ne signifie pas que le La phase commit sera exécutée, car il n'y en aura pas besoin s'il n'y avait pas de changements dans le DOM virtuel. Comme vous pouvez le voir dans l'exemple ci-dessous, quel que soit le nombre de clics sur le bouton, la propriété name est définie sur la même valeur, malgré le fait que nous appelons la méthode setState .

 classe   App   étend   Composants   {
état  =   {
nom :  «Thomas»
} 

	 onClickHandler   =   ()   =>   {
		 this .  setState  ( { nom :  'Thomas' } ) 
} 
	
	 render  ()   {
		 < div > 
			 < p >  Je m'appelle  { cet .  état .  nom } [19659038] < /  p >  < br  / > 
			 < button onClick  =  {[19659036] this .  onClickHandler } >  Click me  < /  button > 
		 < /  div > 
	} 
} 

Si vous mettez un journal de console dans la fonction de rendu, vous verrez qu'elle sera appelée. Cependant, si vous vérifiez le DOM dans l'inspecteur, vous ne verrez pas de flash indiquant un changement de DOM. Maintenant, parlons de la façon dont nous pouvons déclencher un nouveau rendu.

Forcer le rendu d'un composant dans React

Si vous utilisez un composant de classe React, il est aussi simple que d'utiliser this.forceUpdate () function.

 class   App   extend   Components   {	
	 onClickHandler   =   ()   => [19659015] {
		 this .  forceUpdate  () 
} 
	
	 render  ()   {
		 < button onClick  =  { this .  onClickHandler } >  Click me  < /  button > 
	} 
} 

Assurez-vous simplement que le contexte this fait référence à l'instance du composant. Dans l'exemple ci-dessous, this fait référence à la portée de innerFunction et non à l'instance du composant React, et à cause de cela, cela ne fonctionnera pas.

 class   App   extend   Components   {	
	 onClickHandler   =   ()   =>   {
		 function   innerFunction  ([19659020])   {
			 this .  forceUpdate  () 
		} 
		 innerFunction  () 
} 
	
	 render  ()   {
		 < button onClick  =  { this .  onClickHandler } >  Cliquez sur moi  < /  button > 
	} 
} 

Vous savez maintenant à quel point c'est facile, mais sachez que dans 99,99% des cas, vous ne devrait pas en avoir besoin. Si vous le faites, alors vous faites peut-être quelque chose de mal, et il existe probablement une meilleure solution à ce que vous essayez de réaliser. L'avantage de la fonction forceUpdate par rapport à setState est le fait qu'elle mettra à jour un composant même si le hook de cycle de vie shouldComponentUpdate est implémenté.

Si vous êtes mise à jour des valeurs d'état, mais elles ne sont pas rendues correctement, alors au lieu de fournir une nouvelle valeur, vous pourriez être en train de muter directement l'état actuel. Il est également possible que vous transmettiez la même référence. N'oubliez pas que lors de la mise à jour de l'état, vous devez toujours fournir une nouvelle valeur. Par exemple, les chaînes sont immuables; cependant, les objets et les tableaux sont transmis comme référence, donc:

 const  str1  =  ‘bonjour’
 const  str2  =  "bonjour"

str1  ==  str2


 const  obj1  =   { str :  'hello' } 
 const  obj2  =   {  str :  'bonjour' } 
 const  obj3  =  obj1
ob1  ==  obj2
obj3  ==  obj1

Forcer un nouveau rendu dans un composant fonctionnel

Dans un composant de fonction, il n'y a pas de méthode forceUpdate . Cependant, nous pouvons imiter cette fonctionnalité avec le code ci-dessous.

 import  React   { useState }   from  ‘react’

 const   App   =  props  =>   {
 const   [ count  setCount ] [19659018] =   useState  ( 0 ) 
 const  onClickHandler  =  e  =   =>   {[19659148] setCount  ( prevCount  =>  prevCount  +   1 ) 
} 

 return   (
	 < button onClick  =  { onClickHandler } >  Click me  < /  button > 
) 
 } 

Comme vous pouvez le voir, chaque fois que nous avons besoin d'un nouveau rendu du composant, nous incrémentons simplement le compteur. Pour être honnête, nous pouvons aller encore plus loin et créer un hook personnalisé pour cela.

 import React, {useState} de ‘react’

const useForceUpdate = () => {
const [count, setCount] = useState (0)

const increment = () => setCount (prevCount => prevCount + 1)
retour [increment, count]
}

const App = props => {
const [forceUpdate] = useForceUpdate ()

const onClickHandler = e => {
Forcer la mise à jour()
}

revenir (
 Cliquez sur moi 
)
}

Vous avez maintenant vu comment forcer le nouveau rendu d'un composant. Si pour une raison quelconque vous souhaitez restituer un composant enfant à partir d'un parent, vous pouvez le faire en modifiant son accessoire comme indiqué ci-dessous.

 const   ChildComponent   =  props  =>   {
	 return   (
		
) 
} 

 const   App   =  props  =>   {	
   [ forceUpdate  forceUpdateValue ]   =   useForceUpdate  () 

 const   onClickHandler   = [constHandler] e  =>   {
	 forceUpdate  () 
} 

 return   (
	 < div > [19659034] < Clé ChildComponent  =  { forceUpdateValue }   / > 
		 < bouton onClick  =  { onClickHandler } >  Cliquez sur moi  < /  button > [19659155] < /  div > 
) 
} 

Dans cet article, nous avons couvert ce que le rendu est dans React, ce qui se passe lorsque l'état est mis à jour, et comment forcer une re -rendre en classe et composants fonctionnels. Pour la note finale, rappelez-vous, si jamais vous pensez que vous avez besoin de forcer un nouveau rendu, détrompez-vous car il pourrait y avoir un meilleur moyen.