Strve.js這樣寫法像不像React?

作者：maomin9761 2022-02-21 06:02:49

最近連續(xù)更新了兩個(gè)版本：2.3.3和2.3.2，下面我們來看看這兩個(gè)版本的更新日志。

第一次在手機(jī)上寫文章，覺得別有一番風(fēng)趣。上周自己抽時(shí)間把Strve.js升級(jí)了一下，現(xiàn)在目前版本是2.3.3。有興趣的朋友可以去官方文檔查閱一下。說到官方文檔，之前有位朋友說我的文檔缺乏可視化界面，就是那種在線編輯插件。這位朋友提的建議很不錯(cuò)，就去網(wǎng)上調(diào)研了一下，最后選定了Codepen。選定它的原因是我只是單獨(dú)的頁面展示，這樣簡單就足夠了。

其次，最近連續(xù)更新了兩個(gè)版本：2.3.3和2.3.2，下面我們來看看這兩個(gè)版本的更新日志。

v2.3.3

StrveAPI的參數(shù)調(diào)整;

#v2.3.2

HTML標(biāo)簽內(nèi)容支持顯示非字符串類型;
數(shù)據(jù)綁定統(tǒng)一使用${}符號(hào)綁定，不再支持{}符號(hào);
視圖模板支持多個(gè)根節(jié)點(diǎn);
視圖模板支持Text節(jié)點(diǎn);
修復(fù)條件渲染時(shí)切換狀態(tài)，無法正確渲染節(jié)點(diǎn);
增加watchDOMChangeAPI，用于監(jiān)視DOM樹變化;
增加支持HTML模板字符串高亮顯示(VSCode編輯器需安裝 es6-string-html 插件);
刪除StrveAPI的data屬性參數(shù);
視圖模板支持Class類寫法;

這次改動(dòng)也挺大的，主要是內(nèi)部的整體優(yōu)化。

比如，借鑒了Vue的v-if指令內(nèi)部思想實(shí)現(xiàn)了條件渲染，利用注釋節(jié)點(diǎn)實(shí)現(xiàn)DOM占位，這一點(diǎn)我覺得非常值得學(xué)習(xí)。

但是還是遇到了問題，那就是虛擬DOM量級(jí)的問題，因?yàn)镾trve.js內(nèi)部跟React.js相似，都是數(shù)據(jù)變化后，通過新老數(shù)據(jù)的計(jì)算 Diff 來得知數(shù)據(jù)的變化。React.js為了突破性能瓶頸，借鑒了操作系統(tǒng)時(shí)間分片的概念，引入了 Fiber 架構(gòu)。通俗來說，就是把整個(gè)虛擬 DOM 樹微觀化，變成鏈表，然后我們利用瀏覽器的空閑時(shí)間計(jì)算 Diff。一旦瀏覽器有需求，我們可以把沒計(jì)算完的任務(wù)放在一旁，把主進(jìn)程控制權(quán)還給瀏覽器，等待瀏覽器下次空閑。

不過，我相信在之后會(huì)慢慢解決這個(gè)問題。在上面我們說到React.js，我們常用的方式就是在Class類中寫JSX。那么，使用Strve.js其實(shí)也可以。