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

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

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

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

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

v2.3.3

StrveAPI的參數調整;

#v2.3.2

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

這次改動也挺大的，主要是內部的整體優化。

比如，借鑒了Vue的v-if指令內部思想實現了條件渲染，利用注釋節點實現DOM占位，這一點我覺得非常值得學習。

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

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