1磨取、react中key的作?
2、?命周期柴墩,新舊?命周期的不同
3忙厌、函數(shù)組件和component組件的區(qū)別
4、控制組件和?受控組件的區(qū)別
5江咳、??組件通信
6逢净、state和props的區(qū)別
7、setState的原理
8、虛擬dom,以及使?虛擬dom有什么好處
9汹胃、react diff算法
10、refs的作?
11东臀、redux
12着饥、react的render props的作?
13、?階組件
14惰赋、react hooks的優(yōu)缺點(diǎn)宰掉?
優(yōu)點(diǎn)?:更容易復(fù)?代碼。它通過?定義 hooks 來復(fù)?狀態(tài)赁濒,從?解決了類組件有些時(shí)候難以復(fù)?邏輯的問題轨奄。 具體如下:每調(diào)? useHook ?次都會?成?份獨(dú)?的狀態(tài),函數(shù)每次調(diào)?都會開辟?份獨(dú)?的內(nèi)存空間拒炎。雖然狀態(tài)
( from useState )和副作?( useEffect )的存在依賴于組件挪拟,但它們可以在組件外部進(jìn)?定義。 上?這兩點(diǎn)击你,?階組件和renderProps也同樣能做到玉组。但hooks實(shí)現(xiàn)起來的代碼量更少,以及更直觀(代碼可讀 性)丁侄。舉個(gè)例?惯雳,我們經(jīng)常使?的 antd-table ,我們經(jīng)常需要寫?些狀態(tài): pagination={current:xxx鸿摇,
pageSize:xxx,total:xxx} 石景。但許多場景只是簡單的表格,我們希望封裝?個(gè)?階組件拙吉,?帶這些狀態(tài)潮孽,并可以?動 調(diào)? server 去獲取 remote data 。useTable和tableProps的代碼是分離的庐镐,但?階組件?多恩商,代碼會變得較難 閱讀, 你難以區(qū)分這個(gè)props是來?哪個(gè)?階組件必逆,或者還是來?業(yè)務(wù)的?組件怠堪。 相對??階組件“祖?=>?=>?”的層層嵌套,把" useTable "和輸出的值寫到?起名眉,結(jié)構(gòu)更清晰粟矿,更容易閱讀和 維護(hù)。對??階組件损拢,代碼量更少陌粹。
優(yōu)點(diǎn)?:清爽的代碼?格 函數(shù)式編程?格,函數(shù)式組件福压、狀態(tài)保存在運(yùn)?環(huán)境掏秩、每個(gè)功能都包裹在函數(shù)中或舞,整體?
格更清爽,更優(yōu)雅蒙幻。另外映凳,對?類組件,函數(shù)組件??的unused狀態(tài)和unused-method更容易被發(fā)現(xiàn)邮破。
優(yōu)點(diǎn)三:代碼量更少 向props或狀態(tài)取值更加?便诈豌,函數(shù)組件的取值都從當(dāng)前作?域直接獲取變量,?類組件需要 先訪問實(shí)例引? this 抒和,再訪問其屬性或者?法矫渔,多了?步。更改狀態(tài)也變得更加簡單, this.setState({
count:xxx }) 變成 setCount(xxx) 摧莽。因?yàn)闇p少了很多模板代碼庙洼,特別是?組件寫起來更加省事,?們更愿意去拆分 組件范嘱。?組件粒度越細(xì)送膳,則被復(fù)?的可能性越?。所以丑蛤, hooks 也在不知不覺中改變?們的開發(fā)習(xí)慣叠聋,提?項(xiàng)?的組件復(fù)?率。
缺點(diǎn):
1受裹、響應(yīng)式的useEffect 你必須清楚代碼?和useCallback api的第?個(gè)參數(shù)依賴性數(shù)組的改變時(shí)機(jī),并且掌握上下?的觸發(fā)時(shí)機(jī)碌补。當(dāng)邏輯較復(fù)雜的時(shí)候, 觸發(fā)的次數(shù)棉饶,可能會被你預(yù)想的多厦章。對?componentDidmount componentDidUpdate 帶來的?智負(fù)擔(dān)更?。
2照藻、狀態(tài)不同步 函數(shù)的運(yùn)?是獨(dú)?的袜啃,每個(gè)函數(shù)都有?份獨(dú)?的作?域。函數(shù)的變量是保存在運(yùn)?時(shí)的作?域? ?幸缕,當(dāng)我們有異步操作的時(shí)候群发,經(jīng)常會碰到異步回調(diào)的變量引?是之前的,也就是舊的(這?也可以理解成閉包)发乔。?
useRef 返回的 immutable RefObject ( current 屬性是可變的)來保存 state 熟妓, 怎么
避免 react hooks 的常?問題
不要在 useEffect ??寫太多的依賴項(xiàng),劃分這些依賴項(xiàng)成多個(gè)單?功能的 useEffect 栏尚。其實(shí)這點(diǎn)是遵循了軟 件設(shè)計(jì)的“單?職責(zé)模式”起愈。 如果你碰到狀態(tài)不同步的問題,可以考慮下?動傳遞參數(shù)到函數(shù)。
15抬虽、使?typescript的好處和缺點(diǎn)官觅?泛型的作?及使?場景
什么是TypeScript
TypeScript 是 JavaScript 的?個(gè)超集,主要提供了類型系統(tǒng)和對 ES6 的?持阐污。TypeScript 是
JavaScript 的類型的超集缰猴,它可以編譯成純 JavaScript。編譯出來的 JavaScript 可以運(yùn)?在任何瀏覽器上疤剑。
TypeScript 編譯?具可以運(yùn)?在任何服務(wù)器和任何系統(tǒng)上。TypeScript 是開源的闷堡。
TypeScript的設(shè)計(jì)?的應(yīng)該是解決JavaScript的“痛點(diǎn)”:弱類型和沒有命名空間隘膘,導(dǎo)致很難模塊化,不適合開發(fā) ?型程序
TypeScript優(yōu)點(diǎn):
1杠览、TypeScript 增加了代碼的可讀性和可維護(hù)性弯菊。
2、TypeScript ?常包容:
TypeScript 是 JavaScript 的超集踱阿,.js ?件可以直接重命名為 .ts 即可
即使不顯式的定義類型管钳,也能夠?動做出類型推論
可以定義從簡單到復(fù)雜的?乎?切類型 即使 TypeScript 編譯報(bào)錯(cuò),也可以?成 JavaScript ?件 兼容第三?庫软舌,即使第三?庫不是? TypeScript 寫的才漆,也可以編寫單獨(dú)的類型?件供 TypeScript 讀取
3、TypeScript 擁有活躍的社區(qū) ?部分第三?庫都有提供給 TypeScript 的類型定義?件
Google 開發(fā)的 Angular2 就是使? TypeScript 編寫的
TypeScript 擁抱了 ES6 規(guī)范佛点,也?持部分 ESNext 草案的規(guī)范 使? TS 的缺點(diǎn)
1醇滥、短期內(nèi)增加開發(fā)成本,但是增加類型注釋可減少維護(hù)成本
2超营、集成到構(gòu)建流程需要?些?作量
3鸳玩、可能和?些庫結(jié)合的不是很完美 泛型的作?及使?場景: 泛型:泛型的本質(zhì)是參數(shù)化類型,通俗的將就是所操作的數(shù)據(jù)類型被指定為?個(gè)參數(shù)演闭,這種參數(shù)類型可以?在類不跟、接
?和?法的創(chuàng)建中,分別成為泛型類米碰,泛型接?窝革、泛型?法。
為什么使?泛型
TypeScript 中不建議使? any 類型见间,不能保證類型安全聊闯,調(diào)試時(shí)缺乏完整的信息。
TypeScript可以使?泛型來創(chuàng)建可重?的組件米诉。?持當(dāng)前數(shù)據(jù)類型菱蔬,同時(shí)也能?持未來的數(shù)據(jù)類型。擴(kuò)展靈活∷┟冢可 以在編譯時(shí)發(fā)現(xiàn)你的類型錯(cuò)誤魏身,從?保證了類型安全。
16蚪腐、react fiber的原理
17箭昵、react-thrunk中間件