<h1 id="d438" class="pw-post-title yr fk ys bv he yt yu yv yw yx yy yz za zb zc zd ze zf zg zh zi zj zk zl zm zn by" data-selectable-paragraph="">Composants Compos&eacute;s, La nouvelle M&eacute;thode d&rsquo;&eacute;crire des Composants React :</h1>
Il y a peu, j'ai d&eacute;couvert les composants compos&eacute;s en typescript et je ne peux plus m&rsquo;en passer. Souvent peu r&eacute;f&eacute;renc&eacute;, peu connu du vaste monde des d&eacute;veloppeurs, je vous propose une petite introduction au monde des &ldquo;compos&eacute;s&rdquo;.
<h2 id="b567" class="abj abk ys bv kx abl abm abn sx abo abp abq tc td abr te th ti abs tj tm tn abt to tr abu by">Qu&rsquo;est-ce que c&rsquo;est ?</h2>
Un composant compos&eacute; se trouve sous cette forme :
<pre class="language-javascript"><code>const Container = () =&gt; (
 &lt;MyComponent&gt;
 &lt;MyComponent.Header&gt; Un Header &lt;/MyComponent.Header&gt;
 &lt;MyComponent.Body&gt; Un Body &lt;/MyComponent.Body&gt;
 &lt;MyComponent.Footer&gt; Un Footer &lt;/MyComponent.Footer&gt;
 &lt;/MyComponent&gt;
)</code></pre>
<ul>
<li id="4ac3" class="ack acl ys ts b zq zr zt zu zw acm aba acn abe aco abi acp acq acr ea by" data-selectable-paragraph="">MyComponent:&nbsp;est le composant React parent de tous les compos&eacute;s</li>
<li id="96e6" class="ack acl ys ts b zq act zt acu zw acv aba acw abe acx abi acp acq acr ea by" data-selectable-paragraph="">Header, Body, Footer :&nbsp;sont les composants compos&eacute;s du parent, ils ne peuvent pas &ecirc;tre utilis&eacute;s dans l&rsquo;application en dehors du parent.</li>
</ul>
<h2 id="8f6b" class="abj abk ys bv kx abl abm abn sx abo abp abq tc td abr te th ti abs tj tm tn abt to tr abu by">Le parent : MyComponent :</h2>
Le parent des compos&eacute;s s&rsquo;&eacute;crit de la mani&egrave;re suivante :
<pre class="language-javascript"><code>import React from 'react'
import { MyComponentContextProvider } from './card-context'
import Body from './body'
 ...
interface MyComponentCompounds {
 Body: Body
 ...
}
interface MyComponentType {
 props: ...
 children: React.ReactNode
}
const MyComponent React.FC&lt;MyComponentType&gt; &amp; MyComponentCompounds = ({props,children}) =&gt; {
 const context = useMemo(() =&gt; ({ ... }), [...])
 return (
 &lt;MyComponentContextProvider value={context}&gt;
 {children}
 &lt;/MyComponentContextProvider&gt;
 )
}
MyComponent.Body = Body
 ...
export default MyComponent</code></pre>
Il est l&rsquo;&eacute;quivalent d&rsquo;un contenaire. On peut en profiter pour lui donner le style des contours ainsi que le style de placement associ&eacute; au composant global. Le parent peut avoir un Context-Provider qui permettra aux enfants de r&eacute;utiliser certaines valeurs du parent &agrave; l&rsquo;aide des hooks de react.
Exemple de code pour la cr&eacute;ation du provider et du contexte hooks:
<pre class="language-javascript"><code>import { createContext, useContext } from 'react'
type myComponentContextType = {
 value?: ...
}
const MyComponentContext = createContext&lt;myComponentContextType&gt;({})
export const MyComponentContextProvider = MyComponentContext.Provider
export function useMyComponentContext() {
 const context = useContext(MyComponentContext)
 if (!context) {
 throw new Error('Blablabla erreur blablabla')
 }
 return context
}</code></pre>
<h1 id="b62c" class="abj abk ys bv kx abl abm abn sx abo abp abq tc td abr te th ti abs tj tm tn abt to tr abu by" data-selectable-paragraph="">Les compos&eacute;s : Body</h1>
Le composant compos&eacute; aura une structure semblable &agrave; un composant React normale, mais il doit imp&eacute;rativement rester petit, comme le d&eacute;crit l&rsquo;exemple suivant :
<pre class="language-javascript"><code>import React from 'react'
interface BodyPropsType {
 props: ...
}
const Body = ({ props }: BodyPropsType) =&gt; {
 const {value} = useMyComponentContext()
 return (
 &lt;div&gt;
 {...}
 &lt;/div&gt;
 )
}
export default Body</code></pre>
Il sera capable de r&eacute;utiliser des valeurs stock&eacute;es dans le contexte. Il g&egrave;re son propre style et ses propres fonctionnalit&eacute;s.
Si besoin, on peut chainer les composants compos&eacute;s comme dans cet exemple :
<pre class="language-javascript"><code>const Container = () =&gt; (
 &lt;MyComponent&gt;
 &lt;MyComponent.Header&gt; Un Header &lt;/MyComponent.Header&gt;
 &lt;MyComponent.Body&gt; 
 &lt;MyComponent.Body.Title&gt;Un Titre &lt;/MyComponent.Body.Title&gt;
 &lt;MyComponent.Body.SubTitle&gt;Un ...&lt;/MyComponent.Body.SubTitle&gt;
 &lt;/MyComponent.Body&gt;
 &lt;MyComponent.Footer&gt; Un Footer &lt;/MyComponent.Footer&gt;
 &lt;/MyComponent&gt;
)</code></pre>
Title&nbsp;et&nbsp;Subtitle&nbsp;sont des compos&eacute;s du composant&nbsp;Body&nbsp;qui lui-m&ecirc;me est un compos&eacute; du composant&nbsp;MyComponent.
<h1 id="827a" class="abj abk ys bv kx abl abm abn sx abo abp abq tc td abr te th ti abs tj tm tn abt to tr abu by" data-selectable-paragraph="">Les Avantages Des Compos&eacute;s en Type-Script :</h1>
Les avantages des composants compos&eacute;s sont les suivants :
<ul>
<li id="5260" class="ack acl ys ts b zq zr zt zu zw acm aba acn abe aco abi acp acq acr ea by" data-selectable-paragraph="">Avec TypeScript l&rsquo;auto-compl&eacute;tion ! Cela peut paraitre tout b&ecirc;te, mais lors de l&rsquo;int&eacute;gration de composants &ccedil;a donne beaucoup de clart&eacute; de savoir ce qui peut &ecirc;tre fait par notre composant.</li>
<li id="fbcf" class="ack acl ys ts b zq act zt acu zw acv aba acw abe acx abi acp acq acr ea by" data-selectable-paragraph="">La clart&eacute; dans la gestion des props: chaque Compos&eacute; g&egrave;re ses propres props, cela &eacute;vite au parent de porter toutes les props et &eacute;vite le chainage de props</li>
</ul>
<pre class="language-javascript"><code>const Container = () =&gt; (
 &lt;MyComponent {...propsComponent}&gt;
 &lt;MyComponent.Body {...propsBody}&gt; Un Body &lt;/MyComponent.Body&gt;
 &lt;/MyComponent&gt;
)
VS
const Container = () =&gt; (
 &lt;MyComponent propsComponent={propsComponent} propsBody={propsBody} messageBody='Un Body' /&gt;
)</code></pre>
<ul>
<li>Les performances : gros sujets des d&eacute;veloppeurs front, la performance de leur code et notamment la chasse au re-render inutiles. Isoler certaines props &agrave; leur compos&eacute; au lieu de passer par leur parent, &eacute;vite les re-render intempestifs. En d&rsquo;autres termes, Si Body a besoin de se re-render pour un changement d&rsquo;&eacute;tat ou de props quelconque, Header n&rsquo;en a peut-&ecirc;tre pas besoin. Je vous conseille d&rsquo;utiliser :&nbsp;<a class="ay nr" href="https://github.com/welldone-software/why-did-you-render" rel="noopener ugc nofollow" target="_blank">why-did-you-render</a>&nbsp;pour comprendre le re-render de certains composants. </li>
<li id="8495" class="ack acl ys ts b zq act zt acu zw acv aba acw abe acx abi acp acq acr ea by" data-selectable-paragraph="">La scalabilit&eacute;: deuxi&egrave;me gros sujet connu par tous: comment faire du code standard r&eacute;utilisable ? Le secret&nbsp;les compos&eacute;s. En effet plus notre code est d&eacute;coup&eacute; en petite partie, plus notre code sera standard et &ldquo;propre&rdquo;, plus il sera facile de le r&eacute;int&eacute;grer dans des composants et ainsi &eacute;viter de coder deux fois la m&ecirc;me choses.</li>
<li id="0f8e" class="ack acl ys ts b zq act zt acu zw acv aba acw abe acx abi acp acq acr ea by" data-selectable-paragraph="">Le petit Bonus: la maintenabilit&eacute; ! A qui &ccedil;a n&rsquo;est pas arriv&eacute; de devoir retoucher &agrave; un composant React de 300 lignes incompr&eacute;hensible ? Lorsque l&rsquo;on code, il faut bien garder en t&ecirc;te que notre code &agrave; une date de p&eacute;remption. Tout ce qui &eacute;crit aujourd&rsquo;hui et qui est consid&eacute;r&eacute; comme acceptable ne le sera peut &ecirc;tre plus dans 1 an. Construire des composants &ldquo;l&eacute;ger&rdquo;, &ldquo;petits&rdquo;, c&rsquo;est construire des composants claires et maintenables pour l&rsquo;avenir!</li>
</ul>
[keep it simple, keep it smart]

Un tutoriel qui apprend à écrire des composants React, réutilisable, flexible et facile à prendre en main.

Blog Posts by Category

Comment écrire des Composants Flexible et Réutilisables en React