Цей розділ — про те, що відбувається між зміною вашого реактивного стану й оновленням пікселів на екрані. Вам рідко доводиться про це думати — але розуміння моделі пояснює, чому код $mol лишається швидким без особливих зусиль.
$mol не порівнює віртуальне дерево. Кожна властивість подання прив'язана безпосередньо до вузла чи атрибута DOM, яким керує, через ті самі реактивні комірки, з якими ви вже познайомилися в Стані. Коли комірка змінюється, повторно виконуються лише ті прив'язки, що її читають, — не піддерево, не функція компонента, а лише зачеплені властивості.Це означає, що немає проходу узгодження для оптимізації, немає ключів для ручного налаштування diff-у списку й немає memo/shouldComponentUpdate, до яких треба вдаватися. Граф залежностей уже знає мінімальний набір оновлень.
Подання конструюється лише тоді, коли щось його запитує. Екран, на який ви ніколи не переходите, ніколи не будується; вкладка, яку ви ніколи не відкриваєте, нічого не коштує. Оскільки конструювання відбувається на вимогу й кешується, компонувати великі дерева компонентів дешево — частини, які не потрібні, просто ще не існують.
$mol малює лише те, що всередині видимої області. Компоненти, прогорнуті за межі видимості, не зберігаються як прихований DOM — вони взагалі не створюються й будуються тієї миті, коли потрапляють у діапазон. Це архітектурна властивість фреймворка, а не опційна можливість чи спеціальний компонент списку: будь-який лейаут віртуалізовано, тож список із десяти елементів і список із десяти тисяч коштують приблизно однаково для показу.Практичний ефект у тому, що ви пишете звичайні дерева компонентів і довгі списки, не вдаючись до бібліотек віконного рендерингу.
Твердження про продуктивність корисні лише тоді, коли ви можете їх відтворити. Замість наводити цифри тут, $mol бере участь у спільнотному js-framework-benchmark; ви можете прочитати його результати й самостійно перезапустити набір тестів:Результати js-framework-benchmarkВважайте це джерелом істини для порівнянь — виміряним, версіонованим і незалежним від цієї сторінки.
