EugeneX MiniWeb

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

====== Реактивная текстовая нода или как рисует React и Vue ======

Заметил интересную особенность в реакте, по факту когда в текст вставляешь {значение}, то по факту он создаёт обычный textNode и меняет значение именно у него. Не затрагивая другой текст без надобности. Вот такая она чертова оптимизация.

Пример для fiddle:

HTML:
<code html>
<div id="testContainer">Hello world</div>
<button id="button">Change</button>
</code>

JS:
<code javascript>
const container = document.getElementById("testContainer");
container.appendChild(document.createTextNode(", and "));
const reactiveElement = document.createTextNode("universe");
container.appendChild(reactiveElement);
container.appendChild(document.createTextNode("!"));
const doChange = ($event) => reactiveElement.nodeValue="You";
document.getElementById("button").addEventListener("click", doChange);
</code>

EugeneX MiniWeb

User Tools

Site Tools

Page Tools