1. react 虛擬DOM
- 將代碼轉(zhuǎn)換成JS對(duì)象惨险，然后由JS對(duì)象轉(zhuǎn)換成真實(shí)DOM
- 如果是首次渲染，其實(shí)vitruaDom不具有任何優(yōu)勢(shì)宰衙，甚至更加消耗內(nèi)存平道，但是它的優(yōu)勢(shì)在于diff算法和批量處理策略
- react基于virtialdom自己實(shí)現(xiàn)了一套事件機(jī)制自己模擬事件冒泡，捕獲供炼，采用事件代理，批量更新窘疮，解決兼容性問(wèn)題袋哼，它將virtualdom上的事件映射到真實(shí)的Dom事件，然后將所有的事件都代理到document上闸衫，進(jìn)行統(tǒng)一分發(fā)
- react.createElement 將 props,children , 進(jìn)行批量處理涛贯，傳遞給reactElement
- $$typeof 是一個(gè)symbol類(lèi)型的變量，可以防止xss攻擊蔚出，由于json中是不能存儲(chǔ)symbol對(duì)象的
（xss：它是通過(guò)對(duì)網(wǎng)頁(yè)注入可執(zhí)行代碼且成功地被瀏覽器 執(zhí)行弟翘，達(dá)到攻擊的目的）
2. react 渲染流程
- 使用react.createElement /JSX 編寫(xiě)文件最后都會(huì)通過(guò)babel轉(zhuǎn)換成 createElement
- createElement 對(duì)key和ref等props做了處理虫腋，獲取defaultProps對(duì)默認(rèn)props進(jìn)行復(fù)制，對(duì)傳入的子節(jié)點(diǎn)處理稀余，最后形成虛擬dom
- reactdom.render將生成好的虛擬dom渲染指定容器上悦冀，然后采用了批量處理，事務(wù)機(jī)制等對(duì)指定瀏覽器進(jìn)行性能優(yōu)化睛琳，最后轉(zhuǎn)換成DOM
3.setstate
調(diào)用setstate不用立即更新
setstate本身不是異步的盒蟆，只是在調(diào)用setstate的時(shí)候，如果react處于更新?tīng)顟B(tài)师骗。當(dāng)前更新會(huì)暫停历等，等上一次更新執(zhí)行后在執(zhí)行
BH4JE_KPRLTQ@6RFS{`XG6A.png
4. bind(this)
- 由于在調(diào)用事件過(guò)程中并沒(méi)有指定調(diào)用的組件所以需要手動(dòng)綁定，否則this = undefined
- 箭頭函數(shù)不會(huì)創(chuàng)建自己的this,它只會(huì)從自己作用域上一層繼承this
5. react事件執(zhí)行順序
1.由于react的所有事件都是掛載到document上的辟癌，當(dāng)真實(shí)的dom觸發(fā)冒泡寒屯，到document后才會(huì)對(duì)react事件進(jìn)行處理
- 先執(zhí)行原生的事件
- 然后執(zhí)行react合成事件
- 最后執(zhí)行真正在document上掛載的事件
6. mixin , hook, hoc
- mixin：混入
將一個(gè)對(duì)象的屬性拷貝到另一個(gè)對(duì)象上，可以是多個(gè)黍少，也可以是一個(gè)浩螺，這是extends無(wú)法實(shí)現(xiàn)的。
缺點(diǎn)：1. mixin 可能會(huì)相互依賴(lài)仍侥，相互耦合要出，不利于后期的維護(hù)，2. 不同的mixin中的方法會(huì)沖突 - hoc
- 渲染劫持
- 操作props / state 农渊，獲取refs
- 狀態(tài)管理
hoc實(shí)現(xiàn)功能 - 通過(guò)原組件和其他組件進(jìn)行組合渲染可以達(dá)到樣式布局復(fù)用
- 屬性代理
- 反向代理 -- super.render()
- 根據(jù)特定屬性覺(jué)得原組件是否渲染
基本用途： 日志打點(diǎn) / 權(quán)限控制 / 實(shí)現(xiàn)雙向綁定（利用hoc 代理onchange方法和value屬性）/ 表單校驗(yàn) 患蹂。。砸紊。
- 實(shí)例：
redux中的connect其實(shí)就是將mapStateTOProps 和 mapDispatchToProps分別解構(gòu)后傳遞給原組件传于，這樣就可以在原組件內(nèi)直接通過(guò)props獲取到state和dispatch函數(shù) - 優(yōu)點(diǎn)
高級(jí)組件時(shí)一個(gè)沒(méi)有副作用的純函數(shù)，各個(gè)高階組件不會(huì)互相依賴(lài)耦合
高階組件并不關(guān)心數(shù)據(jù)使用的方式和原因醉顽，而被包裹的組件也不關(guān)心數(shù)據(jù)的來(lái)源 - 缺點(diǎn)
hoc可以劫持props ,在不遵守約定的情況下會(huì)造成沖突
如果大量使用沼溜，對(duì)調(diào)試會(huì)由很多困難由于多層嵌套
- hooks
只能在函數(shù)式中使用
- 優(yōu)勢(shì)：
減少狀態(tài)邏輯復(fù)用的風(fēng)險(xiǎn)
避免地獄式嵌套
使用函數(shù)代替class
7. redux
- redux的可預(yù)測(cè)性：1. 單一的數(shù)據(jù)源，應(yīng)用只能有一個(gè)store. 2. 所有數(shù)據(jù)都是只讀的游添，要想更新數(shù)據(jù)系草，必須dispatch一個(gè)action來(lái)更新3. 當(dāng)處理action的時(shí)候，不得直接修改原始對(duì)象必須生成一個(gè)新的state
- reducer是純函數(shù)：同樣的輸入必定得到同樣的輸出唆涝，就可以保證同樣的state就一定得到童話(huà)貴陽(yáng)的view找都，所以reducer里不能改變state，只能返回一個(gè)權(quán)限的state對(duì)象
- redux設(shè)計(jì)思想：web應(yīng)用是一個(gè)狀態(tài)機(jī)制廊酣，視圖和狀態(tài)是一一對(duì)應(yīng)的能耻。所有的狀態(tài)，保存在一個(gè)對(duì)象里面。
- Redux是如何將state注入到React組件上的： provider組件晓猛，將store傳遞給provider饿幅，通過(guò)connect接受、state和mapDispatchToProps
8. react新特性
- Error Bounday
如果組件發(fā)生錯(cuò)誤戒职，可以通過(guò)error boundary捕獲優(yōu)雅處理 配合使用了以惡新生命周期 componentDidCatch - render新增了返回的值類(lèi)型：支持string / number / boolean / null / portal /fragment
- portals可以把組件渲染到當(dāng)前組件之外栗恩，多用于彈框之類(lèi)的
- setstate傳入null就不會(huì)發(fā)生更新
- 更好的服務(wù)器渲染 ，由于15的三倍
- 采用了新的核心架構(gòu)帕涌，fiber 將原來(lái)的同步更新轉(zhuǎn)變成更新過(guò)程碎片化摄凡，避免長(zhǎng)時(shí)間阻塞主線程使得應(yīng)用渲染更加流暢
- 支持自定義dom
- 減少文件體積，從 161.7kb -> 109kb
- call return (react-call-return npm)
解決了父組件需要跟據(jù)子組件的回調(diào)信息去渲染子組件 - fragment
將一些子元素添加到dom tree蚓曼，不需要為這些元素提供額外的父節(jié)點(diǎn) - createRef / forwardRef
通過(guò)createRef獲取red對(duì)象 forwardRef是ref的轉(zhuǎn)發(fā)可以讓父組件獲得子組件的ref亲澡，從而操作子組件 - 生命周期更新
增加了getDerivedStateFromProps（nextprops,prestate）
9. diff算法
在調(diào)用react renderd 的時(shí)候，會(huì)創(chuàng)建react元素組成的樹(shù)纫版，在下一次床绪，state和props更新的時(shí)候，相同的render會(huì)返回不同的樹(shù)其弊，就需要不叫這兩棵樹(shù)的差別癞己，常規(guī)操作一般需要的算法的復(fù)雜度o(n^3),但是一旦元素過(guò)多則會(huì)開(kāi)銷(xiāo)過(guò)大，造成頁(yè)面卡頓梭伐，所以痹雅，react提出了兩個(gè)假設(shè)：
- 兩個(gè)不停類(lèi)型的元素會(huì)產(chǎn)生不同的樹(shù)
- 開(kāi)發(fā)者可以通過(guò)key，props來(lái)暗示哪些子元素在不同的渲染下保持穩(wěn)定
這樣算法的復(fù)雜度就是o(n)
可以分為： tree diff / component diff /element diff
- tree diff
react為了讓運(yùn)行效率更高糊识，tree diff只對(duì)樹(shù)進(jìn)行同層對(duì)比绩社，不去比較跨層的節(jié)點(diǎn)。 - component diff
同一層只要出現(xiàn)不是同一類(lèi)型的組件赂苗，就替換該組件的所有子節(jié)點(diǎn)愉耙。 - element diff
主要是根據(jù)mountIndex和lastIndex進(jìn)行比較，在確定是否移動(dòng) 拌滋，
https://segmentfault.com/a/1190000010686582
- useEffect 和useLauoutEffect區(qū)別
useEffect和useLayoutEffect的執(zhí)行時(shí)機(jī)不一樣朴沿，前者被異步調(diào)度，當(dāng)頁(yè)面渲染完成后再去執(zhí)行败砂，不會(huì)阻塞頁(yè)面渲染赌渣。 后者是在commit階段新的DOM準(zhǔn)備完成，但還未渲染到屏幕之前吠卷，同步執(zhí)行
