Quand vous écrivez <div class="card {if active then 'active' else ''}" style="opacity: {opacity}"> en FLIN, deux choses se passent quand active change : l'attribut class se met à jour, et rien d'autre. L'attribut style ne se réévalue pas. L'élément n'est pas détruit et recréé. Les enfants du div ne sont pas re-rendus. Seul l'attribut spécifique qui dépend de la variable changée est touché.
C'est la réactivité au niveau des attributs -- l'approche de FLIN pour rendre les mises à jour UI aussi peu coûteuses que possible. Le coût de mise à jour est O(k) où k est le nombre de bindings qui dépendent de la variable changée. Pas O(n) où n est le nombre total d'éléments.
Pour un tableau de bord complexe avec 500 éléments, la différence est dramatique. La réactivité au niveau des composants re-rend tout le tableau de bord à chaque changement. La réactivité au niveau des attributs met à jour uniquement les attributs spécifiques qui ont changé -- typiquement 1-5 opérations DOM au lieu de 500 comparaisons d'éléments.
Ceci est la partie 92 de la série "How We Built FLIN".
Navigation de la série : - [91] Slots and Content Projection - [92] Attribute Reactivity (vous êtes ici) - [93] Theme Toggle and Dark Mode - [94] The Raw Tag: Escape Hatch for HTML