Qwik知識整理總結_第1頁
Qwik知識整理總結_第2頁
Qwik知識整理總結_第3頁
Qwik知識整理總結_第4頁
Qwik知識整理總結_第5頁
已閱讀5頁，還剩28頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

背景、Qwik是一款語法"接近"react的前端處框架，前段時間看了兩篇Qwik相關的文章，對這個框架有了些興趣，但是去網(wǎng)上搜了一下，發(fā)現(xiàn)相關的中文文章幾乎沒有了，所以決定對其好好研究一番，并且寫一篇關于Qwik的特點、基礎用法、設計概念，再加上Qwik對我的一些啟發(fā)，接下來就一起看看這款黑科技是何方神圣吧。一、前提知識:ssr（懂了這里才能看懂Qwik）從入門學習前端開發(fā)開始，我們不斷學習到各種前端的優(yōu)化方式來提高前端代碼的性能，其中"服務端渲染（ssr）”這種模式幫我們大幅提高了使用前端框架開發(fā)的項目的首屏性能，那么ssr的工作流程是什么樣的？下面我們一起簡單梳理一下。第一步：服務端拼接html當用戶請求某個頁面的時候,server端會拼接好一個頁面的html結構返回給客戶端，例如下面的結構：<!DOCTYPE人的（><head><title>Docui^ent</title></head><body><divid="App">〈butt。八》點擊彈出：Mlo</butto^><ul><li>2</li></ul></div>〈scriptsrc="/fr72O4￡328Js"defer></$cnpt></body>第二步：客戶端加載好的html展示出來了上面的代碼可以看出,曲山結構加載完就可以展示出來了，但是比如點擊事假，這類交互事件還是沒有的，需要加載/￡〃2。463285后頁面才能有交互（活起來），所以我們還是要請求一堆js文件到本地。第三步:js執(zhí)行hydration階段完畢才可交互hgdratio八字面意思類似‘注水’，也就是通過js代碼的執(zhí)行，動態(tài)的為當前頁面上的dom綁定事件，你可把當前獲取到的向川代碼當做一根干貨海參,js代碼理解成水，而gWratim過程就是用水把海參泡發(fā)，達到可以食用的狀態(tài)，也就是頁面可正常交互的狀態(tài)。二、ssr流程有什么可優(yōu)化的點看完上述ssr的流程后你有什么感覺？有沒有感覺ssr可能是個"視覺騙子”,我們簡單羅列幾個可優(yōu)化的點：.雖然首屏展示的速度快了，但是不可交互，所以他的tti（頁面可交互時間）并沒有太大的優(yōu)化，但不可否認也是有提升的只是不太多。.下載的js仍然是比較全量的js代碼。.js代碼執(zhí)行的時候，仍然需要處理大量的邏輯，還要重新處理一遍頁面上的dom。2020年的時候我負責的項目就是使用的ssr技術搭建的，首屏速度的確有提高，但是缺點就是比較消耗服務器資源，并且維護成本上去了，比如偶爾的內存泄漏，還有每次更新代碼都需要去服務器上手動執(zhí)行一些命令（當時的團隊流水線還不完善），給當時的我的直接感覺就是陣仗挺大收益有點小。三、Qwik是什么可以將Qwik理解成一款語法接近react的前端ssr框架，但是比傳統(tǒng)的ssr框架做的更激進：.大幅優(yōu)化甚至取消了hydration的過程.不光是延遲加載組件，還可以延遲加載點擊事件等代碼.幾乎可以做到，只加載當前用到的js代碼與css代碼.dom元素沒有出現(xiàn)在屏幕的可視區(qū)，則不執(zhí)行組件內部方法Qwik的目標是延遲加載所有的代碼，比如一個按鈕你沒有點擊它之前，那么Qwik就不會去加載點擊相關邏輯，甚至他都不會去加載react相關的代碼，畢竟有的時候用戶進入頁面后也確實沒有進行任何操作，那么我們沒必要去加載所有資源。當然了看完上述的描述你會感覺到使用Qwik會不會操作起來卡頓啊，帶著疑問拿好車票我們一點點深入研究。四、初始化項目把安裝與基本用法簡單說下，這樣大家腦海里就有比較清晰的概念了，但我感覺官網(wǎng)寫的不錯，所以詳細的用法請移步qwik官網(wǎng)初始化項目下面這條命令就是創(chuàng)建項目的命令:

npkvvinitqwik@latest第一次使用這個命令我竟然愣住了，因為我只用*mMit初始化一個空項目,充其量使用呼伍init-y這種方式，但是我去查了官網(wǎng)才發(fā)現(xiàn)原來還可以這樣用：npm-initCreateapackage.jsonfileVersion8.x(Currentrelease)▼Synopsisnpminit<package-spec>(sameas'npx<package-spec>) Cnpminit<@scope>(sameasnpx<@scope>/create')aliases:create,innit//原命令npkniiaitqwik^latest//相當于npxcreate-qwik//要注意，不是呻xqwik@(atest/cireate

所以由此可知，我們直接叩出install"eate-qwik-g然后再create-qwik就可以同樣的初始化項目啦：V終端4Let*screateaQwikapp4Projectname...qwik-appSelectastarter>QwikCitySelectaserver>ExpressFeatures>PrettierSuccess!Projectsavedinqwik-appdirectory**Nextsteps:cdqwik-appnpminstallnpmstart?Questions?Starttheconversationat:https://qwik.builder.io/chat/QwikDev-qwik-app|選項的具體能力不是本篇文章的重點，本次我們先從整體上體驗Qwik以后有機會再扣扣細節(jié)。啟動開發(fā)時的啟動npkvvstart打包后的啟動npkv\runbuild八pMrunserve點擊事件由于整體上與react幾乎一樣，咱們就開門見山，先來看看如何定義一個組件并且定義它的點擊事件：import{co^poMiat$,useStore}frow"@bu"der.io/qwik”;exportconstHonae=com?。八e八七$(()=>{conststate=u^eStoire({couiat：O,})；return(<feuttoHonClick^={()=>(state.couiat+=[)}〉〃。3e組件：(state.cou^t}</button)；!)；我們可以發(fā)現(xiàn)，組件是由一個COMpMW杼函數(shù)生成的，有了這個函數(shù)組件就可以是一個異步的組件，也就是當用戶的屏幕上沒有使用該組件時，這個組件的相關代碼就不會被加載。。八aickf這個名字也有一個手,意思差不多，就是當我們沒有觸發(fā)這個點擊事件的時候，不會去下載點擊事件的代碼，這個就很細節(jié)了。五、hooksuseStore定義變量與react不一樣的定義變量的寫法：conststate=useStore（{count:Ot八akne」金毛cd））;修改值直接在,state身上修改即可state.=，被修改啦，突然有一種寫vue的感覺。useServerMountS注冊一個服務器掛載鉤子，該鉤子僅在首次掛載組件時在服務器中運行。這個hooks只在服務端運行，寫法如下：“seServerM。1mt0=>{c。八6。/0./。§（"什么時候執(zhí)行：useServe-MotmtJ"）;

const八：HUknfeer=a\A/aitnewPirokv\ise((resolve)=>{$etTikv\eout(0=>{reso”e(q);上3000);})；^tate.coui^t=n;})；})；CC0localhost:5173QwikCityBBlogDocsAPIAboutUsQwikCityBBlogDocsAPIAboutUsWelcometoQwikCityhome組件:9BlogDocsAboutUsSignInHome

打印的文字在瀏覽器看不到，開發(fā)時可以在vscode的控制臺里面查看:12131213141516171819202122useServerMount$(async()=>{console.log(“什么時候執(zhí)行：useServerMount$");constn:number=awaitnewPromise((resolve)=>setTimeout(()=>{resolve(9);},3000)；?；state.count=n;})；問題4輸出 調試控制臺 終端下午4:49:39[vite]pagereloadsrc/routes/home.tsx(xll)什么時候執(zhí)行：useServerMount$useQientEffectS對元素的可見性的監(jiān)控僅在客戶端渲染時，當然也有對應的生命周期方法:iAseClieiatEffect$(()=>{conso/e./og("初始化：useClientEffecti");!)；這個鉤子可以監(jiān)控組件是否展示在屏幕上，也就是說只有當組件可以被用戶看到時才執(zhí)行，那么我們就來實驗一下，我們把home組件頂出屏幕外，觀察useCIientEffect$是否執(zhí)行:

sty/e={{ha”電，八Bott0M：42OOpx'}}>We/cokv\etoQwikCitg〈/h［〉<Hokv\e></Hokv\e>C。localhost5173QwikCityBBlogDocsAPIAboutUsSignInWelcometoQwikCityNowamtnQa?Analytics!/當前室現(xiàn)■已安越埋點■跡■傳true??2Wo?82VWtXJMGEJ?EhmentsConsoleRecorder▲PerIH0top,OAfter沒有執(zhí)行但是當我們滾動屏幕后展示出home組件:C。localhost5173Q。?Bemont*ConcotoRecorder▲P?dormanc?r?Analytics)/當?shù)诤崱鲆寻?0點?使?件trueVJttft：useCUentEffectl■7messaQM07uwrmes.^ONoenoryANowammg*??3vifo。4vartxMa8199PoetAboutUsSjgoJnHonw其實他是利用了/ntersectionObserver這個方法監(jiān)聽「Wom的狀態(tài)，所以如果我們的某些組件里面需要展示請求到的數(shù)據(jù)，那么我們可以當這個組件出現(xiàn)在屏幕上時再請求。之所以他可以提供這樣的方法是因為Qwik框架的特性，后續(xù)講到H。黨組件的時候大家就明白了。useWatch$訂閱值的變化侑大坑）下面我們寫一下，每當Count變化的時候，就會觸發(fā)這個watM：useWatckf((track)=>{constcount=track^torCj'count1);stov'C.doubleCouv^t=2*count;))；這里有個大坑，就是當你的組件代碼里面有〃seSe~"Mou?方法并且其在u^eVJatck下方時，useVJatch只能執(zhí)行一次，也就是只在server端執(zhí)行一次，后續(xù)不執(zhí)行。這里是錯誤的用法：//錯誤示范//書寫在上方useWatch$((track)=>{constcount=track^tatCj"count");state.doubleCou^t=count+2;!)；//書寫在下方useServerMou八塊〃sg八cQ=>{const八：Hunaber=a\A/aitnewProkvuMe("eso"e)=>{$etTi^eout(0=>{resof，)；)>5。。)；1)；state.couiat=h;));所以當我們需要持續(xù)監(jiān)聽某個值的變化時，需要把usewatch放在//正確寫法//書寫在上方use$eKverMoui^tf(async0->{const八：nuMAfaer=a\A/aitnewProi^ise((resolve.)=>{setTikv\eout(0->{%so/3e(q);}>SOO);!)；state.cou^t=八；));//書寫在下方useWatckf((track)=>{constcou^t=track(statej"count11);state.doubleCouiat=count+2;1)；六、dick事件有大坑從頭看完伊汝的官網(wǎng)后發(fā)現(xiàn)，他舉的例子全部都是內連函數(shù)，像是圖里這樣:<buttoi^onClick$={()=>state.count+=1}>howe組件：{sate.cotmt}</buttoH>但是其實我們更常用的是下面這種形式:consthaiadleClick=()=>{$tate.count4-=1return<buttoi^。八C〃ckf={Ka八山eC〃ck}>組件：｛state.c?！霭双k</button>consthandleClick=()=>{state.count+=1;}；return(<Host><buttononClick$={handleClick}>home組件：{state.count}</button><p>{state.doubleCount}</p></Host>})；'nt=track(***** *"'?ibleCount=consthandleclick:()=>voidconsthandleClick=()=><state.count+=1;eClick=()}；mt?=1;JSXattributesthatendwith$canonlytakeaninlinedarrowfunctionofaQRLidentifier.Makesurethevalueiscreatedusing$()eslint(查看問JB快速修復一(X.)onClick$={handleCVick}home組件：{state.count}</button>te.doubleCount}</p>好家伙，我直呼好家伙，這是不讓我復用方法么？沒辦法我是沒有嘗試成功,最后只好變成下面這種形式:consthandleClick=()=>{state.count+=1;}；return(<Host><buttononClick$={()=>{handleClick();^/\z\z\^^z\^z\z\z\zxzi\/^zs}}>home組件：{state,count}</button><p>{state.doubleCount></p></Host>)；})；const-***"*- ”一?…八?state,consthandleClick:()=>void})；()=><state.county1;constha}state.Identifier(MhandleClickM)cannotbecapturedinsidethescope(onClick$)becausei.isafunction,whichisnotserializable.Checkoutreturn(14cL.https://qwik.buil.der.io/docs/advanced/optiniizerformoredetails.eslint(<nosi>on■?間?ttiMS...(X.)iJia吸KU刎);>home組件：{state.count}</button><p><state.doubleCount}</p></Host>這里大概得意思就是說，這個函數(shù)不可序列化，所以不能使用，我又想到那只要可序列化的方法就可以放在這里么？就有了下面的第三種寫法：0 consthandleClick =()=>{console.log(l);}；return(<Host><buttononClick$={()=>口handleClick();>0 home組件：{state.count}</button><p>{state.doubleCount}</p></Host>)；放在組件的作用域內就不行，那么我放在組件外，但是下方使用處依舊報錯:consthandleClick=()=>{console.log(l);}；exportconstHome=component$(()=>{但是除非我們將方法導出，就不會再報錯了:exportconsthandleClick=()=>{console.log(l);}；所以至少外界導入的方法仍然是可以使用的，當前組件作用域內的方法只能寫在Wof內聯(lián)的方法里，并且關鍵點事這些在他的官網(wǎng)文檔里都沒有詳細說明，都是靠開發(fā)者自己去探索，這就讓我使用體驗非常差。七、code模版來助力

Qwik本身組件代碼有點特殊，所以他也提供了幾個代碼模版幫用戶生成代碼,就在VSCOde的qwik.code-snippets文件里:rvscooeirqwiccooe-snippexsiti/mkcomponenT\joooyOWIK.APP1(9.vscodo2 MQwikco?ponentN:{()qwik.cocisnippets3*scope0:*typescriptreact*f>■dist4-prefix":"components”,>■nod?_fnodu*es5"description":"Zikcounterco?ponentMf6-body*:i>?public7,,exportinterface${l:MyCnp}Props{*,>fserver8"step:nuober;*.>?src9丁，?eslinbgnoreieMM■??siintfc.cisiiMexportconst${l:MyCnp)■co?ponent$((props:${l:Ry<iap}Prop$).gibgnore12*conststate=useStored**,P.pretti?rignore13Hcount:8”,Oaek>g?<lockj$on14packageJson15*README.md16Hreturn17*<H0St>Mt?isconfig.json18〈buttononClick$s{()*>state.count*?props.step>>M,(}tsconfig.tsbuikHnfo19* {state.count)*,?vite.config.ts26</button>H,使用:口component!Qcomponents[?)components口component!Qcomponents[?)components口ccMiponentlbasiccoaponentQwikcountercomponent(工作區(qū)代碼片皎)0builder.lo/qwikOwikcomponent(basic)exportinterfaceHyCmpProps{step:number;}exportconstMyCmp?components(props:conststate?useStore({state.coustate.cou</button></Host>八、用法的改革真的好么

從Qwik框架的各種用法上看得出，他們團隊的野心，并且官網(wǎng)中也提到了為什么不沿用react的語法，他們給出的理由是react當前的架構無法做到Qwik想要的效果，所以只能通過推翻并重構的方式才能實現(xiàn)Qwik。但是他們提到的所有困難都是實現(xiàn)‘過程’中遇到的問題，而最終的用法應該是屬于‘結果'，在沒有10倍好的情況下，開發(fā)者為什么要去學習心的寫法？并且這些寫法還處處是bug當然啦，所有的創(chuàng)新都值得鼓勵，哪怕做出一點改變都有可能改變這個單調的世界，但是如果用著不爽也可以大方說出來就是九、$緩存了什么?上面我們簡單介紹了下用法，那么接下來我們就主要聊一聊原理吧，就從點的結構是這樣的：WelcometoQwikCity擊事件這個維度來舉例，當我們在縱ttM的結構是這樣的：WelcometoQwikCity<?**??*?tvU>WU?a?t?-ff - - ?? -_ */(><??Ziv*</?u??，w?r>可以看到o^-.click事件竟然對應著一串字符中，點擊事件為啥不是函數(shù)?其實這里是因為Qwik的點擊事件機制，首先Qwik會在全局監(jiān)聽點擊事件，然后當點擊某個dom時Qwik會檢測dom的身上是否有onclick事件并讀取相應的字符串，然后按照字符串的地址去加載對應的文件，加載好文件后執(zhí)行對應的方法。那我們寫的0件是如何轉化成字符串的那？這里就涉及到了一個叫做”的概念：//轉換前<button0n=>{^tate.couiat4-=1；)1//轉換后。n叫'./ck(mk-cJs「H0kv\e_onC"ck)[store,props])]所以可以理解為初方法是專門負責將一些邏輯轉換到對應的需要異步加載的js文件的方法，所以這里我們就理解了為什么組件的。八Click事件的寫法有那么多限制，因為這些邏輯比如符合可以單獨抽象到獨立的Js文件里面才行，如果沒法抽象則無法做到異步加載。十、緩存是分塊的：Host標簽Host標簽是幾乎每個組件的最外層，也就是如下圖所示，任何組件都要包裹一層Host：return(//</Host>);之所以要額外包裹一層Host我們來看看官網(wǎng)給出的解釋：宿主元素用于標記組件邊界。如果沒有宿主元素，Qwik將不知道組件在哪里開始和結束。需要此信息，以便組件可以獨立且無序地呈現(xiàn)，這是Qwik的一個關鍵特性。我之前寫過幾篇關于的文章，對這方面也有些了解，在react內如果do伍沒有渲染到確定的位置，那么后續(xù)再插入子組件是沒有響應式的，具體的不是一兩句說的清楚的，大家可以看看我以前的文章：一些關于react的keep-alive功能相關知識在這里既然官方說‘必須有個Host'標簽，那么就代表我們每個組件的渲染都會多出一層W?！奔热粵]法避免那就盡可能的使用它吧，首先我們可以指定Host標簽是什么do^屬性：要注意的是,tagNakvu是co3Po方法的第二個參數(shù):

return(<Host>return(<Host><buttononClick$={()=>state.count-fhandleClick()home組件：{state.count}</button><p>{state.doubleCount}</p></Host>tagName:"xxxxx?<tMMlyq:host>▼“Avq:key3Mh?iwfuvnx79:*q:host>WelcometoQwikCityhomelfl件911??dlvq:keysWelcometoQwikCityhomelfl件911?deaderq:key3MXavV>MitSrf:aq:bostcl4is>_</be?<Ser>grid*?aaln>—”r?q:slotq:?ref?"$?->▼“AvQ：kcy?"buH6QebiUM:"q:host><hls”le*Wek8CtoQwikClty</hl>?<m?>xkQ：hey>-X)t7izutKxY:*q:hoston:qvlsIblea^/src/hOBC-COfiponent.usecIlentef1?/div??<footerq:keyaMFTJ^IDnxFgw:"q:hoit>.</footer?</dlv?</dlv><$criptld?Mqwlklo?OerM>.</script>?dAvid?Ma?-118n_key_$how-tip->-</dlv></bodv>所以現(xiàn)在你這道為什么Qwik里面，可以使用useGientEffec好方法監(jiān)控組件是否在可視區(qū)了吧，因為組件的外層基本都有個Host元素，所以哪怕是下面這種寫法也可以檢測元素的顯隱：<Host><><div>l</div><div>Z</div><div>3</div></><div>4</div>〈/Host〉H-\Qwik如何處理延遲？prefetch我最開始看這個框架就一直有一個疑問，點擊事件延遲加載可能會導致微微的卜頓吧，至少也是增加了點擊事件的處理時間啊，萬一這個點擊事件的代碼有點大并且用戶的網(wǎng)不好，豈不是一首涼涼?Qwik團隊當然早已想到這些問題，至少我是被他們給出的理由說服了，官網(wǎng)的英文版本有點難懂我就用我的語言來解釋一下吧：傳統(tǒng)的W框架是需要全量加載js文件的，并且要等Js文件加載完畢并且注水完畢才是頁面可交互，也就是說這些事件是串行的，但是Qwik將其變成了并行模式，比如或ck事件本身只對應字符串那么它的渲染速度當然很快，同時Qwik會開啟webWorkcr將代碼的預取發(fā)生在主線程以外的其他線程上，并且不是一次請求全部，而是當前使用的幾個組件的代碼，這樣的話后續(xù)只要監(jiān)聽到點擊事件請求某個文件，則webWork”會將對應的文件直接傳遞過來，而不用請求網(wǎng)絡。并且Qwik還表明：加載js文件與執(zhí)行js邏輯相比，后者可能更費時間。并且不是一個Js文件里面只有一個方法，而是會用多個相關的方法，比如觸發(fā)了某個點擊事件那么其他的一下方法也會被加載過來的，不用逐一去加載。十二、可恢復性可恢復性是Qwik推出的一個招牌概念，我們從三個方面聊下這個特性：.減少注水：之前也說過，全局設置點擊監(jiān)聽事件，這樣就不用每次加載組件都注水一遍才能交互。.組件樹：在傳統(tǒng)的如模式下，由于服務端渲染完成后可能一些結構已經(jīng)改變，此時就需要重新注水，但Qwik可以做到在組件代碼實際不存在的情況下重建組件層次結構信，組件代碼可以保持惰性，我的理解這里就有Host組件的功勞，比如某個dom的位置被調整了，那么僅需調整Host即可。3.Qwik允許在沒有父組件代碼的情況下恢復任何組件，我理解的是當前的如框架里需要父組件來創(chuàng)建子組件，但是Qwik里將很多狀態(tài)都內置了,所以可以做到獨立延遲渲染，比如A是父組件,a是子組件，那么我加載a組件的時候，并不需要加載A組件的所有js邏輯。十三、延遲加載的演示，埋點等事件接下來一起來看看什么時候會去加載react代碼，因為react的源代碼運行起來還是有點慢的，下圖展示的是一個沒有任何交互時的頁面請求記錄：6COlocelbMt5173可以看出加載的文件非常的小，當時第一眼看到我以為他不依賴react,當時當我們點擊一下按鈕:locamost5173QwikBlogDocsAPIAboutUsSignInOtyBG歸?(lament*ConeoiaRecor?ar&P?Hormanc?vwtgNaaScatomQwikBlogDocsAPIAboutUsSignInOtyBG歸?(lament*ConeoiaRecor?ar&P?Hormanc?vwtgNaaScatomNatara^ Apple.?0VQORwerwiooQOuMcatfi*Rlar

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論