経緯 DOMについて調べてた時に気づいたので、備忘録として。 (この備忘録ではReactベースで書いてます) 結論 仮想DOMの真のメリットは「パフォーマンスが良いこと」ではなく、「宣言的UIの実現と現実的なパフォーマンスを両立できること」にある。 命令的UIと宣言的UIってなんだろう... 命令的UI 「イベント・変更が発生するたびに、どのように処理を実行し、状態を反映するのか」を記述する必要がある const checkbox = document.querySelector(".checkbox"); const button = document.querySelector(".button"); checkbox.addEventListener("click", () => { if (checkbox.checked === true) { button.disabled =
![僕が勘違いしてた仮想DOMのメリット - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b81d10ee958d6109e693ca2ec649f71029a4fec/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU1JTgzJTk1JUUzJTgxJThDJUU1JThCJTk4JUU5JTgxJTk1JUUzJTgxJTg0JUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJTlGJUU0JUJCJUFFJUU2JTgzJUIzRE9NJUUzJTgxJUFFJUUzJTgzJUExJUUzJTgzJUFBJUUzJTgzJTgzJUUzJTgzJTg4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jN2VlMjFlNTk5NGViOGVkNzE0YWM5MGQyMDM3YzVlNw%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwbWFydW1hcnUwMTEzJTIwaW4lMjAlRTYlQTAlQUElRTUlQkMlOEYlRTQlQkMlOUElRTclQTQlQkUlRTMlODIlODYlRTMlODIlODElRTMlODElQkYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWNiZTkxOTEwN2RkZDFjNGYwNThkNTkzNjNhMDdkMWFl%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D0fc4dce87631b3e1600c6d9d701f9366)