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

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

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

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

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

v2.3.3

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

#v2.3.2

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

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

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

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

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