突發:鴻蒙之祖華爲在 Inula 官網聲稱可“避免重複運行組件”但“組件渲染次數”是寫死的
消息來源
看到羣裏這個消息,我的想法是:羣裏怎麼炸鍋了?華爲之前的鴻蒙被指疑似安卓二開不說,現在出個 openInula 好像是什麼歐拉又被人挖出幺蛾子?哦有 la
後綴但好像又不像歐拉。
到底怎麼回事?我也不敢說話甚至都不敢參與討論。
求真過程
不過華爲好不好是個大企業,並且又是風口浪尖一樣的存在,褒貶兩級分化。真,搞得我一直到現在我都不知道遙遙領先
到底是一個什麼詞語,時常懷疑我自己是不是出軌了。
官網現象
我打開 openInula 的官網 https://www.openinula.net/ ,看樣子還是很高大尚的。
上來就是 相比傳統虛擬DOM方式,提升渲染效率30%以上。
,完全兼容React API,支持React應用無縫切換至openInula。
這種兼容傳統但吊打傳統的描述,很難讓人不把他是電、他是光、他是唯一的希望等聯想在一起。
繼續向下:我們看網友說的造假
現象到底是不是存在。
我小心翼翼的向下滑動頁面,目不轉睛的注視着每一個窗口,全神貫注的查找目標文字組件渲染次數
,內心忐忑不安的希望這不是真的。
但是,現實總是這麼殘酷,左右兩欄的對比裏,左邊的數據是動態的,右邊爲什麼就要寫死?難道頁面在跳動開發測試都看不出來嗎?爲了避免是我的錯覺問題,我決定對其 GIF 錄製:
注意看
注意看
注意看,組件渲染次數1與源碼中定死的1。
好了,網友沒說錯。從結果上來看,數據確實就是寫死的。這種行爲如果用在官網和對比上,確實很難讓人接受。
但是我還注意到一個問題,官網上並沒有華爲的大 logo,那麼這東西到底是不是華爲的?別啥髒水都往華爲身上潑好吧!
然後我又再次陷入沉思:與華爲什麼關係?
inula 與華爲的關係
9月21日,在華爲全聯接大會2023開源分論壇上,華爲表示國內軟件根技術創新之勢已起,目前處於戰略機遇期,有較大的市場空間。在這一契機下,華爲發佈了國內首個全面自研密碼套件openHiTLS及
全場景智慧前端框架openInula
。這兩款開源基礎中間件助力軟件根技術自主創新,對構築業務數字化的核心競爭力有重要意義。
開發團隊合影:
華爲ICT開源產業與生態發展部總經理周俊懿在發佈會上表示,“國內軟件根技術創新之勢已起,正處於發展戰略機遇期。在此我們發佈更快、更簡單、更智能的新一代智慧前端框架openInula,構築前端生態創新底座,共建國內前端繁榮生態。”
目前,華爲公司內部已有多個產品採用openInula作爲其前端框架運用於實際商用項目,支撐上千萬行前端業務代碼。openInula帶來的性能提升解決了產品較多的前端性能瓶頸問題,保證了項目健康、高效地運行。
功能說明PPT:
根據以上圖文,我暫且覺得可以理解爲 openInula 和華爲有一定關係,是華爲公司或旗下的團隊。
簡直不敢相信自己的眼睛!
肯定是什麼地方弄錯了,openInula 就是有這麼牛筆,人家發佈會在那,官網在那,倉庫在那,地面在那,還有假?BUG!肯定是BUG!
於是我開始從試圖從代碼上來實踐看看,他確實 比傳統虛擬DOM渲染效率更高、渲染次數更少
。
代碼實踐一
根據官網的步驟,我開始 npx create-inula <項目名>
,這樣就完全使用官方的腳手架模板生成項目,避免誤差。
然後根據官方指示運行命令 npm run start
:
這怎麼回事?我還沒進入狀態你就結束了?
咦?不對,好像打開方式不對。
看到了 node:path
勾起了我僅有的記憶,大概是 node 版本過低。
這個我熟啊!於是我直接打開 package.json 文件,並加入以下代碼:
"env": {
"node": "18.18.2"
}
然後再次運行命令,這時候項目就在 node v18 的環境下運行成功啦。
注意看
注意看
注意看,上圖中在 package.json 中聲明瞭當前項目依賴的環境。
當我打開控制檯 url 時,頁面並沒有問題(沒有使用官網聲明的響應式API)。然後當我把官網上的響應式API示例代碼放過來的時候:
啊啊啊!頁面一片空白。
然後發現官網聲明中的代碼:
import { useRef, useReactive, useComputed } from 'openinula';
function ReactiveComponent() {
const renderCount = ++useRef(0).current;
const data = useReactive({ count: 0 });
const countText = useComputed(() => {
return `計時: ${data.count.get()}`;
});
setInterval(() => {
data.count.set(c => c + 1);
}, 1000);
return (
<div>
<div>{countText}</div>
<div>組件渲染次數:{renderCount}</div>
</div>
);
}
其中 openinula 的 useReactive, useComputed
兩個 api 都是 undefined。
官網 api 文檔中全局搜索 useReactive 也無任何訊息。
好了,我累了,毀滅吧。因爲它可能還在 ppt 裏或者還沒有發佈。
然後我就開始相關如何結束本文,如何思考如何更中立一些,應放入哪些參考材料。
比如我準備去找代碼倉庫、去找 npm 官方以及其他鏡像倉庫來大概看看 openinula 的下載量時:
這是什麼情況?
- 版本 0.0.1,總歷史版本 2個 -- 代表很新很新。難道是內網發佈?
- 周下載量 65 -- 代表 npm 上很少很少人用。 說好的支撐上千萬行前端項目呢?難道是內網人用?
- 代碼倉庫爲空 -- ???
- readem 爲空 -- ???
有一說一,如果就上面這樣子的話,真的是一點都不像官網所描述的光環拉滿的樣子。
真的,說實話到這裏我的失望值已經累計到 0.2 了。
但是我真的還想再掙扎一下:難道是因爲這是國產框架,所以大都使用國內鏡像,所以 npm 上的下載量少?
然後去大家都在用的淘寶鏡像上看了一下:
我再次被震驚了,請看圖片左邊是淘寶鏡像,爲 0.0.4 版,右邊是 npm 驚喜,爲 0.0.1 版本。大家都知道,通常都是 taobao 鏡像比 npm 倉庫更新要慢一些。但 openinula 在這裏怎麼就直接遙遙領先了 3 個版本?
雖然不理解,但大受震撼。不過,如果這是假的,我希望這是真的(因爲我可以試試新的0.0.4版本)。如果這是真的,我希望這是假的,因爲這太反常了。
所以,那就再試試淘寶鏡像上的 0.0.4 是不是遙遙領先,吊打傳統虛擬 dom hook api 吧。
代碼實踐二
這下我們直接:
nrm use taobao
npm i openinula@latest
npm run start
然後仍然是:
頁面一片空白,直接報錯:jsx-dev-runtime 404 。
注意看
注意看
注意看:上圖瀏覽器網絡控制檯。
真的,我累了,毀滅吧。
結論
確實在官網上,傳統 Hook API
一欄中組件渲染次數是動態改變的,而在響應式 API
聲稱響應式 API 避免重複運行組件,無需對比虛擬DOM樹,可精準更新DOM,大幅提升網頁性能。
中組件渲染次數是寫死的
。
但是,這麼做的原因到底是什麼,有有意爲之,還是不小心寫錯了?就得繼續等待後續了。
我斗膽猜測一下,有幾個可能:
一:還沒有準備好
雖然從發佈會上和官網上來看,光環拉滿,但從已發佈的包、倉庫、文檔來看,還亟待完善……
二:失誤
失誤就是,真的那個地方是要再加個 t,讓其出現動態渲染的效果。不過我嘗試修復了這個問題,把 t 加上,也發現只是簡單的定時器,所以應該不是少加個 t 的事情。
注意看
注意看
注意看上面的動圖中,響應式 API 真的動起來了!
那種有沒有可能是,這個地方是真的想做個動態渲染效果比較,但還沒做出來?
另外,根據官方代碼倉庫中的源碼(是活躍分支,最近提交2小時前)看來:
readme 中的開發工具都還是隨手寫的錯誤網址:
package.json 聲明當前版本爲 0.0.1 (那 taobao 上的 0.0.4 是怎麼回事)。
三:有意爲之
在不少關於 Inula 的文章,以及發表大會中,都是以響應式、區別傳統虛擬DOM、提高效率
號稱的。並且代碼也是開源的,如果是如實開源的情況下,到底效果是不是如官網所說,大佬們一挖代碼便知。雖然目前官網也沒有提供詳細評測倉庫,或三方評測結果。
可能真是有那麼強的,並且也是有意在官網中用渲染次數1
來體現效果以達到視覺要求,但沒想到有些程序非要扒代碼看說這個地方一定要寫個實例動態渲染出來。
參考
- 根深才能葉茂,華爲兩款基礎中間件重磅開源 https://www.51cto.com/article/770662.html
- 新一代響應式前端框架openInula正式開源發佈 http://www.ecconsortium.org/Lists/show/id/1098.html
- openInula 源碼倉庫:https://gitee.com/openInula/inula
- openinula 官網首頁: https://www.openinula.net/
最後再說幾句,我個人認爲像華爲這樣的公司,在我心中是民族企業,民族希望。我大概瞭解大家所說的在環境(風氣)現狀,也知道科技這東西不是三年五載的事。所以我更希望大家給予其包容,暫時放低一些期望,很多事情就算不是第一,已經很不容易了。另外,是希望,所以才備受關注。所以我們如果作爲企業的一員,應時刻提醒有無數雙眼睛在注視着自己,要踏實。
——山高路遠,道阻且長,且行且珍惜。