日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當(dāng)前位置:首頁 > 科技  > 軟件

一道字節(jié)面試題,把群友整不會了,關(guān)于 useMemo 用法的另外一個(gè)延伸

來源: 責(zé)編: 時(shí)間:2024-05-27 17:22:37 157觀看
導(dǎo)讀群友在一次字節(jié)的面試中,被要求實(shí)現(xiàn) useToggle。useToggle 表示兩個(gè)狀態(tài)的來回切換。群友一想,這還不簡單,于是就咔咔一頓寫,兩三筆就把該功能實(shí)現(xiàn)了。function useToggle(value: boolean) { const [state, setState] =

群友在一次字節(jié)的面試中,被要求實(shí)現(xiàn) useToggle。NWU28資訊網(wǎng)——每日最新資訊28at.com

useToggle 表示兩個(gè)狀態(tài)的來回切換。NWU28資訊網(wǎng)——每日最新資訊28at.com

群友一想,這還不簡單,于是就咔咔一頓寫,兩三筆就把該功能實(shí)現(xiàn)了。NWU28資訊網(wǎng)——每日最新資訊28at.com

function useToggle(value: boolean) {  const [state, setState] = useState(value)  const toggle = () => {    setState(!state)  }  return {state, toggle}}

NWU28資訊網(wǎng)——每日最新資訊28at.com

搞完之后,面試官看到代碼卻說:NWU28資訊網(wǎng)——每日最新資訊28at.com

不太對,組件重新渲染,導(dǎo)致這個(gè) hook 重新執(zhí)行了,狀態(tài)就變了。NWU28資訊網(wǎng)——每日最新資訊28at.com

這下直接給群友整不會了,咋回事?為什么字節(jié)面試官說的東西跟他理解的不一樣。百思不得其解之下,在面試之后又去研究了很多方案,最后實(shí)在沒想通,又跑到群里來討論。NWU28資訊網(wǎng)——每日最新資訊28at.com

那么問題來了,截圖中,群友口中所說的字節(jié)面試官的這種說法是否靠譜呢?NWU28資訊網(wǎng)——每日最新資訊28at.com

一、很顯然不靠譜

從功能實(shí)現(xiàn)的角度上來說,上面那一段代碼,其實(shí)是沒有任何的問題的。NWU28資訊網(wǎng)——每日最新資訊28at.com

當(dāng)組件重新渲染時(shí),hook 會不會重新執(zhí)行?當(dāng)然會。NWU28資訊網(wǎng)——每日最新資訊28at.com

但是 hook 重新執(zhí)行,狀態(tài)會不會發(fā)生變化?不會。NWU28資訊網(wǎng)——每日最新資訊28at.com

這里我們討論的是由其他狀態(tài)的變化導(dǎo)致組件 re-render,從而導(dǎo)致 toggle 的狀態(tài)被重置或者變化。NWU28資訊網(wǎng)——每日最新資訊28at.com

在 React 中,hook 是基于閉包來實(shí)現(xiàn),因此幾乎每個(gè) hook 理論上都具有緩存能力。我們常用的這些 hook:useState、useRef useReducer useEffect useMemo useCallback 他們都有一些共性,那就是緩存能力。然后在語義上有一些差異。NWU28資訊網(wǎng)——每日最新資訊28at.com

面試官這樣的說法,很明顯是在學(xué)習(xí)的時(shí)候,跟許多人犯了同樣一個(gè)錯(cuò)誤,只關(guān)注了他們差異的部分,而沒有關(guān)注他們共性的部分。NWU28資訊網(wǎng)——每日最新資訊28at.com

因此,在群友的這段實(shí)現(xiàn)中,如果由其他狀態(tài)引發(fā)的 hook 重新執(zhí)行,useToggle 的狀態(tài)會被 useState 緩存,狀態(tài)本身的值不會發(fā)生變化。否則,React 的根基都要被動搖了。NWU28資訊網(wǎng)——每日最新資訊28at.com

那么面試官為什么要這樣說呢?NWU28資訊網(wǎng)——每日最新資訊28at.com

一種可能就是面試官本身在工作實(shí)踐中沒有正確理解 React 的 hook,并且過于依賴了 useMemo useCallback,忽視了其他 hook 的緩存能力導(dǎo)致了錯(cuò)誤的解讀。NWU28資訊網(wǎng)——每日最新資訊28at.com

另外一種情況就是在沒有得到自己想要的答案時(shí),自動切入了壓力測試環(huán)節(jié),試圖通過否定候選人逼問出滿意的答案。或者通過壓力測試觀察候選人的知識面中更多的維度。NWU28資訊網(wǎng)——每日最新資訊28at.com

二、有其他實(shí)現(xiàn)嗎

有的。該群友找到了 ahook 的實(shí)現(xiàn),代碼如下:NWU28資訊網(wǎng)——每日最新資訊28at.com

function useTgoggle2(value: boolean, reverseValue?: boolean) {  const [state, setState] = useState(value)  const actions = useMemo(() => {    const reverseValueOrigin = reverseValue === undefined ? !value : reverseValue;    const toggle = () => {      setState(prev => {        return prev === value ? reverseValueOrigin : value      })    }    return toggle  }, [])  return {state, actions}}

和他寫的版本相比,代碼看上去豐滿了許多。一看就很高端。NWU28資訊網(wǎng)——每日最新資訊28at.com

但是另他想不通的地方在于,使用了 useMemo 之后,和他寫的那個(gè)版本,有什么區(qū)別嗎?或者說,有什么好處嗎?NWU28資訊網(wǎng)——每日最新資訊28at.com

他的第一個(gè)解讀是,useMemo 因?yàn)榫彺媪撕瘮?shù),所以減少了函數(shù)的重復(fù)聲明。NWU28資訊網(wǎng)——每日最新資訊28at.com

這種理解對不對呢?錯(cuò)。NWU28資訊網(wǎng)——每日最新資訊28at.com

許多人都會有這樣的誤解。事實(shí)卻是,useMemo useCallback 不會減少函數(shù)的聲明。NWU28資訊網(wǎng)——每日最新資訊28at.com

我們把匿名函數(shù),換成一個(gè)有名字的函數(shù),就能快速理解了。NWU28資訊網(wǎng)——每日最新資訊28at.com

function xxx() {  const reverseValueOrigin = reverseValue === undefined ? !value : reverseValue;  const toggle = () => {    setState(prev => {      return prev === value ? reverseValueOrigin : value    })  }  return toggle}const actions = useMemo(xxx, [])

實(shí)際上在 useMemo 執(zhí)行之前,函數(shù) xxx 都會重新聲明。包括 useMemo 傳入的第二個(gè)參數(shù)的空數(shù)組,它也是被重新聲明的。NWU28資訊網(wǎng)——每日最新資訊28at.com

useMemo 控制的是賦值次數(shù),而不是聲明次數(shù)。NWU28資訊網(wǎng)——每日最新資訊28at.com

既然這樣,又不能減少函數(shù)聲明次數(shù),那 useMemo 的作用在哪里呢?NWU28資訊網(wǎng)——每日最新資訊28at.com

在這個(gè)案例中,他的作用就是:保持 actions 的引用穩(wěn)定。當(dāng)組件重新渲染時(shí),actions 的引用不會因?yàn)?nbsp;re-render 而發(fā)生變化。NWU28資訊網(wǎng)——每日最新資訊28at.com

這樣,當(dāng)使用者將 actions 作為參數(shù)傳遞給其他組件時(shí),可以保證 actions 的引用是沒有發(fā)生變化的。NWU28資訊網(wǎng)——每日最新資訊28at.com

const {state, actions} = useToggle(true)...<OtherComponent actinotallow={actions} />

那么這個(gè)時(shí)候,如果我們在聲明 OtherComponent 時(shí)使用了 memo,OtherComponent 就不會因?yàn)楦附M件的 re-render 而重新渲染。NWU28資訊網(wǎng)——每日最新資訊28at.com

這里需要明確的是,單獨(dú)使用 memo 是沒有用的。關(guān)于更具體的細(xì)節(jié),在我們之前的性能優(yōu)化章節(jié)中有詳細(xì)聊到。NWU28資訊網(wǎng)——每日最新資訊28at.com

當(dāng)然實(shí)際上這里就涉及到另外一個(gè)問題的探討,我們是否應(yīng)該在工具庫底層使用 useCallback 或者 useMemo 來緩存函數(shù)的引用呢?NWU28資訊網(wǎng)——每日最新資訊28at.com

實(shí)際上在付費(fèi)群里我們曾經(jīng)對這個(gè)問題也有過爭議。NWU28資訊網(wǎng)——每日最新資訊28at.com

我個(gè)人的觀點(diǎn)是:沒有必要。因?yàn)閷τ谑褂谜叨裕覀兿胍WC性能優(yōu)化的目標(biāo)達(dá)成,那么就必須同時(shí)使用 useMemo/useCallback + memo。他們兩的共同作用下,能減少函數(shù)的 re-render,從而達(dá)到性能優(yōu)化的目的。NWU28資訊網(wǎng)——每日最新資訊28at.com

一種情況是,需要這樣做的場景很少。NWU28資訊網(wǎng)——每日最新資訊28at.com

另外一種情況是,這可能對使用者造成誤解。認(rèn)為只需要 memo 就可以完成性能優(yōu)化了。NWU28資訊網(wǎng)——每日最新資訊28at.com

這種優(yōu)化方式不是完全無感的,他需要使用者配合另外一半。因此這就要求使用者必須完全了解工具庫的底層實(shí)現(xiàn)才可以完美的配合你。或者更聰明的使用者也不會關(guān)注你底層是怎么實(shí)現(xiàn),他自己又單獨(dú)包裹一層 useMemo/useCllback。NWU28資訊網(wǎng)——每日最新資訊28at.com

三、面試時(shí)答案被否定

咋說呢,這個(gè)現(xiàn)象其實(shí)非常普遍。NWU28資訊網(wǎng)——每日最新資訊28at.com

很多人在面試的時(shí)候,特別是在面一些好團(tuán)隊(duì)時(shí),遇到這種情況都會很懵逼。被人否定之后就習(xí)慣性地懷疑自己的答案有問題。從而導(dǎo)致后面的回答因?yàn)榫o張和自我懷疑陷入一種惡性循環(huán),給人一種整場表現(xiàn)都很差的感覺。NWU28資訊網(wǎng)——每日最新資訊28at.com

有幾種不同的情況會出現(xiàn)這種局面。NWU28資訊網(wǎng)——每日最新資訊28at.com

有的面試官比較善于抓住候選人的缺點(diǎn)不停拷打,進(jìn)而證明候選人能力不足。這其實(shí)違背了面試的本質(zhì)。好的面試官反而更應(yīng)該懂得如何挖掘候選人的優(yōu)勢,而不是在候選人不擅長的點(diǎn)上反復(fù)糾纏。NWU28資訊網(wǎng)——每日最新資訊28at.com

當(dāng)然,這也可以理解,現(xiàn)在越來越多的面試官會陷入這種困境,很大一部分原因是因?yàn)樘嗟那舐氄咴诤啔v、面試中夸大自己的能力,把本來不屬于自己的項(xiàng)目經(jīng)歷包裝成自己的,面試官與求職者信任關(guān)系的破裂,是主要是的因素之一。NWU28資訊網(wǎng)——每日最新資訊28at.com

當(dāng)然,還有一部分原因是因?yàn)樾枰诰騽e人的優(yōu)勢對面試官本身的個(gè)人能力有非常高的要求,并不是每個(gè)面試官都具備這樣的能力。因此,在這種情況下,一個(gè)比較好的技巧和方式就是主動自己先明確好自己的優(yōu)勢在哪里,并且在聊天過程中主動展示。NWU28資訊網(wǎng)——每日最新資訊28at.com

除此之外,也包括部分求職者,屬于是找了半天,渾身下上就沒可挖掘的優(yōu)勢。NWU28資訊網(wǎng)——每日最新資訊28at.com

壓力測試。或者說,故意在面試過程中給求職者施加壓力。讓求職者認(rèn)為自己在這場面試?yán)锉憩F(xiàn)得不好。哪怕有的面試官對求職者非常欣賞,也不會表現(xiàn)出來。NWU28資訊網(wǎng)——每日最新資訊28at.com

所以很多時(shí)候,有的人雖然自己拿到了 offer,但是自己都感覺非常意外,因?yàn)樽晕腋杏X確實(shí)面試表現(xiàn)不是很好,在這種情況下還能拿到 offer,實(shí)屬是萬萬沒想到。NWU28資訊網(wǎng)——每日最新資訊28at.com

當(dāng)然,為什么要這樣做,不同的團(tuán)隊(duì)有不同的原因,可能是為了看看別人在壓力環(huán)節(jié)下的表現(xiàn),可能是為了更好的打壓薪資,或者是為了讓求職者更加珍惜這個(gè)工作機(jī)會等等。NWU28資訊網(wǎng)——每日最新資訊28at.com

但是壓力測試也不是每個(gè)面試官都能輕松拿捏的,經(jīng)常容易玩崩,讓別人對你這里的面試體驗(yàn)感覺非常差。NWU28資訊網(wǎng)——每日最新資訊28at.com

確實(shí)是求職者思路不對,回答錯(cuò)了。這種情況下最好是能在面試官的引導(dǎo)下快速思考錯(cuò)誤原因,并給出正確的解法。當(dāng)然,如果實(shí)在不行,就直接承認(rèn)自己確實(shí)這方面比較薄弱比較好。但是不少人為了補(bǔ)救,會多說很多不沾邊的內(nèi)容,反而會錯(cuò)得更離譜。NWU28資訊網(wǎng)——每日最新資訊28at.com

四、總結(jié)

許多人雖然掌握了某些知識,但是沒有構(gòu)建完整的知識體系,因此在面對別人反問或者質(zhì)問時(shí)會表現(xiàn)得非常慌亂。NWU28資訊網(wǎng)——每日最新資訊28at.com

完善自己的知識體系,對自己所表達(dá)的觀念和結(jié)論有篤定的判斷,可以避免在這種情況之下讓溝通往更壞的情況發(fā)展。NWU28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-91024-0.html一道字節(jié)面試題,把群友整不會了,關(guān)于 useMemo 用法的另外一個(gè)延伸

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。郵件:2376512515@qq.com

上一篇: Java如何根據(jù)歷史數(shù)據(jù)預(yù)測下個(gè)月的數(shù)據(jù)?

下一篇: localhost 和 127.0.0.1 有什么區(qū)別?

標(biāo)簽:
  • 熱門焦點(diǎn)
  • 俄羅斯:將審查iPhone等外國公司設(shè)備 保數(shù)據(jù)安全

    iPhone和特斯拉都屬于在各自領(lǐng)域領(lǐng)頭羊的品牌,推出的產(chǎn)品也也都是數(shù)一數(shù)二的,但對于一些國家而言,它們的產(chǎn)品可靠性和安全性還是在限制范圍內(nèi)。近日,俄羅斯聯(lián)邦通信、信息技術(shù)
  • Raft算法:保障分布式系統(tǒng)共識的穩(wěn)健之道

    1. 什么是Raft算法?Raft 是英文”Reliable、Replicated、Redundant、And Fault-Tolerant”(“可靠、可復(fù)制、可冗余、可容錯(cuò)”)的首字母縮寫。Raft算法是一種用于在分布式系統(tǒng)
  • 之家push系統(tǒng)迭代之路

    前言在這個(gè)信息爆炸的互聯(lián)網(wǎng)時(shí)代,能夠及時(shí)準(zhǔn)確獲取信息是當(dāng)今社會要解決的關(guān)鍵問題之一。隨著之家用戶體量和內(nèi)容規(guī)模的不斷增大,傳統(tǒng)的靠"主動拉"獲取信息的方式已不能滿足用
  • Temu起訴SHEIN,跨境電商戰(zhàn)事升級

    來源 | 伯虎財(cái)經(jīng)(bohuFN)作者 | 陳平安日前據(jù)外媒報(bào)道,拼多多旗下跨境電商平臺Temu正對競爭對手SHEIN提起新訴訟,訴狀稱Shein&ldquo;利用市場支配力量強(qiáng)迫服裝廠商與之簽訂獨(dú)家
  • 2天漲粉255萬,又一賽道在抖音爆火

    來源:運(yùn)營研究社作者 | 張知白編輯 | 楊佩汶設(shè)計(jì) | 晏談夢潔這個(gè)暑期,旅游賽道徹底火了:有的「地方」火了&mdash;&mdash;貴州村超旅游收入 1 個(gè)月超過 12 億;有的「博主」火了&m
  • 品牌洞察丨服務(wù)本地,美團(tuán)直播成效幾何?

    來源:17PR7月11日,美團(tuán)App首頁推薦位出現(xiàn)&ldquo;美團(tuán)直播&rdquo;的固定入口。在直播聚合頁面,外賣&ldquo;神槍手&rdquo;直播間、美團(tuán)旅行直播間、美團(tuán)買菜直播間等均已上線,同時(shí)
  • AI藝術(shù)欣賞體驗(yàn)會在上海梅賽德斯奔馳中心音樂俱樂部上演

    光影交錯(cuò)的鏡像世界,虛實(shí)幻化的視覺奇觀,虛擬偶像與真人共同主持,這些場景都出現(xiàn)在2019世界人工智能大會的舞臺上。8月29日至31日,“AI藝術(shù)欣賞體驗(yàn)會”在上海
  • 上海舉辦人工智能大會活動,建設(shè)人工智能新高地

    人工智能大會在上海浦江兩岸隆重拉開帷幕,人工智能新技術(shù)、新產(chǎn)品、新應(yīng)用、新理念集中亮相。8月30日晚,作為大會的特色活動之一的上海人工智能發(fā)展盛典人工
  • Meta盲目擴(kuò)張致超萬人被裁,重金押注元宇宙而前景未明

    圖片來源:圖蟲創(chuàng)意日前,Meta創(chuàng)始人兼CEO 馬克&middot;扎克伯發(fā)布公開信,宣布Meta計(jì)劃裁員超11000人,占其員工總數(shù)13%。他公開承認(rèn)了自己的預(yù)判失誤:&ldquo;不僅
Top 主站蜘蛛池模板: 剑阁县| 浦江县| 普定县| 中江县| 德格县| 西充县| 精河县| 武鸣县| 林口县| 读书| 延长县| 赣榆县| 和政县| 彰化县| 通化县| 嘉禾县| 武定县| 榆树市| 株洲市| 莎车县| 丰台区| 错那县| 阿瓦提县| 清流县| 辉县市| 宁南县| 沐川县| 界首市| 茶陵县| 沁源县| 昌江| 东台市| 陈巴尔虎旗| 安平县| 南昌市| 海伦市| 昌平区| 无锡市| 米林县| 龙泉市| 平安县|