From ad605119e5f94d44c255ec569a4b8181ba4ba8c9 Mon Sep 17 00:00:00 2001 From: "pipe.zkk" Date: Thu, 11 Jan 2024 20:30:34 +0800 Subject: [PATCH] Update Code --- _posts/2024-01~03/2024-01-10-virtualdom-3.md | 48 -------------------- _posts/2024-01~03/2024-01-11-virtualdom-4.md | 32 +++++++++++++ 2 files changed, 32 insertions(+), 48 deletions(-) diff --git a/_posts/2024-01~03/2024-01-10-virtualdom-3.md b/_posts/2024-01~03/2024-01-10-virtualdom-3.md index 2f937ca..06b7723 100644 --- a/_posts/2024-01~03/2024-01-10-virtualdom-3.md +++ b/_posts/2024-01~03/2024-01-10-virtualdom-3.md @@ -108,51 +108,3 @@ html` * [tagged_templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) * [ecmascript-language-lexical-grammar](https://tc39.es/ecma262/multipage/ecmascript-language-lexical-grammar.html#sec-template-literal-lexical-components) -# Virtual DOM 核心作用 - - - -* DSL vs JSX -* Ecosystem - * Three.JS - * -* - -> The big improvements that React brought to the mainstream were componentization, and popularizing declarative rendering. -> https://news.ycombinator.com/item?id=34621279 - -> For some reason I thought the virtual DOM was a native feature of the browser -> https://news.ycombinator.com/item?id=34633339 - - - -### RTED - -> RTED requires O(n2) space as the most space-efficient competitors, and its runtime complexity of O(n3) in the worst case is optimal. - - -# Virtual DOM 简写 - - 使用 JSX 简写 - - -# References - -* https://news.ycombinator.com/item?id=34612162 -* https://svelte.dev/blog/virtual-dom-is-pure-overhead -* https://github.com/mbasso/asm-dom -* https://github.com/patrick-steele-idem/morphdom -* https://zhoukekestar.github.io/notes/2017/08/07/webcomponents-demo.html -* https://zhoukekestar.github.io/notes/2017/08/07/beyond-framework.html -* https://github.com/WebReflection/hyperHTML -* https://github.com/AFASSoftware/maquette - -* https://en.wikipedia.org/wiki/Virtual_DOM - * https://svelte.dev/blog/virtual-dom-is-pure-overhead - * https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/ - - -* [RTED: A Robust Algorithm for the Tree Edit Distance](https://vldb.org/pvldb/vol5/p334_mateuszpawlik_vldb2012.pdf) -* [Minimal Edit-Based Diffs for Large Trees](https://dl.acm.org/doi/pdf/10.1145/3340531.3412026) -* [Detecting Changes in XML Documents](https://people.cs.rutgers.edu/~amelie/papers/2002/diff.pdf) -* [Google String diff-match-patch](https://github.com/google/diff-match-patch) diff --git a/_posts/2024-01~03/2024-01-11-virtualdom-4.md b/_posts/2024-01~03/2024-01-11-virtualdom-4.md index 7fc90d4..a56f9a6 100644 --- a/_posts/2024-01~03/2024-01-11-virtualdom-4.md +++ b/_posts/2024-01~03/2024-01-11-virtualdom-4.md @@ -46,8 +46,11 @@ tags: [note] ### React + 批量更新使用 Fiber 优化，将原有的递归不可中断更新，变成循环可中断更新。 + * https://github.com/maoxiaoxing/react-study/tree/master/Fiber * https://juejin.cn/post/6993973502852202503 +* https://github.com/acdlite/react-fiber-architecture # Diff 算法 @@ -56,12 +59,20 @@ tags: [note] 一个典型的 Diff 算法复杂度为 O(n^3) +![image](https://github.com/zhoukekestar/notes/assets/7157346/66b183db-a3af-421f-8445-65e471419a7c) + + * [https://github.com/acdlite/react-fiber-architecture](https://github.com/acdlite/react-fiber-architecture) * [https://legacy.reactjs.org/docs/reconciliation.html](https://legacy.reactjs.org/docs/reconciliation.html) * [https://github.com/facebook/react/issues/6170](https://github.com/facebook/react/issues/6170) * [A Survey on Tree Edit Distance and Related Problems](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) +### RTED + +> RTED requires O(n2) space as the most space-efficient competitors, and its runtime complexity of O(n3) in the worst case is optimal. + + # 权衡 React 引入 VirtualDOM 及其出现，另外一个主要原因是 [React Native](https://reactnative.dev/docs/handling-text-input) 的存在。 @@ -71,9 +82,30 @@ tags: [note] 这是【跨端需求、多端开发效率】与【单端性能、单端开发效率】之间平衡，并没有绝对的优劣，正如 VirtualDOM 的一棵树和二棵树的区别，也是一种平衡。 > Note that a virtual DOM is pure overhead if you already have a real DOM to work with. +> > https://news.ycombinator.com/item?id=34616031 + +# Virtual DOM 核心作用 + + + +* DSL vs JSX +* Ecosystem + * Three.JS + * +* + +> The big improvements that React brought to the mainstream were componentization, and popularizing declarative rendering. +> https://news.ycombinator.com/item?id=34621279 + +> For some reason I thought the virtual DOM was a native feature of the browser +> https://news.ycombinator.com/item?id=34633339 + + + + # References * https://news.ycombinator.com/item?id=34612162