Vivre sans « crochets du cycle de vie »

Presque toutes les bibliothèques d'interface utilisateur JavaScript &/| Le framework que j'ai vu a une sorte de hooks de cycle de vie : onmount, willmount, beforemount, aftermount, onunmount, onwhatever.

En avez-vous vraiment besoin ? Sont-ils bons ou mauvais ? Est-il possible de vivre sans ?

Alors, pourquoi ceux-ci existent-ils, en premier lieu ?

  const oninit = (e: Element) => {
    e.style.prop = value;
    e.addEventListener('mouseover', handler);
    e.setAttribute('data-key', value);
  }

Il s'agit du modèle d'initialisation typique (ennuyeux) que de nombreux composants du Web sont fournis et utilisés. La nature déclarative du HTML et du CSS vise à les rendre redondants, sauf qu'il est parfois difficile, voire impossible, de prédéfinir certaines fonctionnalités avec les valeurs prévues (pensez à désactivé="${()=>false}" qui ne le fait pas. comportez-vous simplement comme on peut s'y attendre).

Alors on fait quoi ? Définissez impérativement tout ce qui nous reste dans un gestionnaire d'initialisation. Cela fonctionne et le monde peut avancer.

Il y a cependant un problème important avec cette approche. Si quelque chose ne va pas, il est difficile de garantir que les écouteurs d'événements et autres éléments soient correctement nettoyés. Le framework donné peut bien sûr exposer n'importe quel hook onunmount, mais s'il y a une erreur dans la logique de l'application, alors vous avez un bug, ou pire, une fuite de mémoire.

La programmation impérative est un paradigme de programmation malheureux et totalement exposé à ces situations. Vous pouvez presque tout faire, y compris casser des trucs.

La solution est fournie avec l'inversion du contrôle et la programmation fonctionnelle, ce qui n'est pas la manière dont HTML et JavaScript ont été conçus, mais il y a une bonne nouvelle : nous pouvons toujours implémenter certains des modèles de conception fondamentaux de FP et fournir une solution stratégique au problème.

rimmel.js est une implémentation de référence d'un sur-ensemble conceptuel de HTML appelé Reactive Markup, qui fonctionne un peu comme TypeScript pour JavaScript, mais il vise à rendre le HTML et le DOM fonctionnels/fonctionnels-réactifs.

Ce résultat est obtenu en traitant tout comme un flux : le style ? C'est un flux. Des événements DOM ? Bien sûr, ce sont des flux. Attributs HTML ? Les flux aussi. Chaque fois qu'ils émettent une valeur, celle-ci est définie.

Voyons comment cela fonctionne.

  const style = CreateStream({color: 'red'});
  const key = CreateStream('red', value);
  const handler = CreateStream();

  const template = rml`
    <div style="${style}" data-key="${key}" onmouseover="${handler}">
    </div>
  `;

CreateStream n'est qu'un utilitaire hypothétique de création de flux. En règle générale, vous souhaiterez plutôt utiliser les flux Promises et Observables RxJS en général, car ils modélisent au mieux les interactions avec l'interface utilisateur.

Si vous vérifiez à nouveau le code, vous vous rendrez vite compte qu'il n'y a pas d'appel au montage. En fait, cela n'est tout simplement pas nécessaire, puisque chaque opération qu'un rappel onmount effectuait plus tôt sera désormais effectuée dès que ces flux seront émis.

Tout framework ou bibliothèque d'interface utilisateur donné sera chargé de démonter chaque flux défini ou lié dans les modèles : style, clé de données, survol de la souris. Il n'y a aucun risque que vous oubliiez de nettoyer et les chances de créer des fuites de mémoire sont considérablement réduites.

Si vous êtes nouveau dans la programmation fonctionnelle, vous passerez probablement un certain temps à comprendre comment reformuler vos problèmes en termes de flux, mais lorsque vous y parviendrez, de nombreux autres avantages vous attendront en échange, comme une réduction considérable taille du code (50 % à 90 % de code en moins), logique et implémentation beaucoup plus testables et moins sujettes aux erreurs.

Prêt pour une expérience un peu exotique ? Découvrez rimmel.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!