基本使用
? ??React基本使用
? ? 直接渲染 html陈醒，相當(dāng)于 vue 中的 v-html
React 事件
? ? bind this
? ? event
? ? 總結(jié)：react 中的 事件的 event 不是原生的 Event，是 React 封裝了的 SyntheticEvent冤荆，它模擬出 DOM 事件所有能力， event.nativeEvent 是原生事件對(duì)象康聂；所有的事件 都被掛載到 document 上，和 DOM 事件不一樣辑鲤，和 Vue 事件也不一樣纹因。
父子通信
? ? 傳遞自定義參數(shù)
? ? ????props 傳遞參數(shù)喷屋；
????????props 傳遞 函數(shù)；
? ? ? ? ? ? （vue 中 是 @自定義函數(shù) = XXX瞭恰； 子組件 this.$emit 來觸發(fā)父組件事件實(shí)現(xiàn)的）
????props 類型檢查
setState
? ? 不可變值（重要）
? ????不要直接修改 State
? ? ? ? ? ? 數(shù)字類型屯曹， 不能 this.state.XX ++;
? ? ? ? ? ? 數(shù)組類型，不能直接對(duì) this.state.arr 進(jìn)行 push 惊畏、pop恶耽、splice 等，這個(gè)違背不可變值颜启， 可以進(jìn)行如 concat偷俭、 [...this.state.arr, newvalue]、slice 截取缰盏、 filter 篩選涌萤、另外做個(gè)副本等操作，不能改變老的對(duì)象的值口猜。
? ? ? ? ? ? 對(duì)象類型负溪， {...this.state.obj, newKey: value}， Object.assign({}, this.state.obj)暮的，不能直接對(duì) this.state.obj 進(jìn)行屬性設(shè)置笙以，這樣違反不可變值。
? ? state的更新可能是異步更新
? ? ? ? setState 直接使用 是異步的冻辩；
? ? ? ? setTimeout 中的 setState 是同步的，自定義的DOM 事件拆祈， setState是同步的（比如document.body.addEventListener('click', () =>{? this.setState()})）
????state 的更新可能會(huì)被合并
? ??????????出于性能考慮恨闪，React 可能會(huì)把多個(gè)?setState()?調(diào)用合并成一個(gè)調(diào)用；多次 setState 會(huì)被合并 放坏，執(zhí)行結(jié)果只一次咙咽。
? ? ? ? ????傳入函數(shù) ，不會(huì)被合并淤年。
組件生命周期
? ? ? ? 單個(gè)組件生命周期
? ? ? ? 父子組件生命周期 和? Vue 一樣
高級(jí)特性
? ? ? ? 函數(shù)組件
? ? ? ? ? ? 組件的兩種形式 class 和 function Component
? ? ? ? ? ? 函數(shù)組件：純函數(shù) 輸入 props 輸出 JSX; 沒有實(shí)例钧敞， 沒有生命周期，沒有 state; 不能擴(kuò)展其他的方法（hooks 另外介紹）
? ? 非受控組件? ? ? ? ? ? ? ? ?
? ? ? ? ? ? 非受控組件的 ref 的 三種創(chuàng)建方式（其中一種被淘汰）：
? ? ? ? ? ? ? ? 1.??React.createRef() 麸粮； 2.?回調(diào) Refs 溉苛； 3. string ref （淘汰）。
? ??????????? ? defaultValue / defaultChecked：非受控組件 使用這兩個(gè)作為初始值
? ? ? ? ? ? 函數(shù)組件使用 ref
????????????手動(dòng)操作 DOM 元素
? ? ? ? ? ? ? ? 使用場(chǎng)景 ：必須收到操作 DOM 元素弄诲， setState 實(shí)現(xiàn)不了愚战； 文件上傳<input type='file'>; 某些富文本編輯器，需要傳入 DOM 元素；管理焦點(diǎn)寂玲，文本選擇或媒體播放塔插；觸發(fā)強(qiáng)制動(dòng)畫；集成第三方 DOM 庫(kù)拓哟。
? ? ? ? ? ? 注意 ：優(yōu)先使用受控組件想许，符合 React 設(shè)計(jì)原則； 必須操作 DOM 時(shí)断序， 再使用 非受控組件伸刃。
? ? ? ? Portals
? ? ? ? ? ? 如何讓組件渲染到父組件以外？Portal 提供了一種將子節(jié)點(diǎn)渲染到存在于父組件以外的 DOM 節(jié)點(diǎn)的優(yōu)秀的方案逢倍。
? ??????????ReactDOM.createPortal(child,container)
????????????第一個(gè)參數(shù)（child）是 React 元素捧颅，例如一個(gè)元素，字符串或 fragment较雕。第二個(gè)參數(shù)（container）是一個(gè) DOM 元素碉哑，把這個(gè)組件渲染到哪個(gè) 節(jié)點(diǎn)上，比如 document.body亮蒋。
????????????使用場(chǎng)景： 比如 modal 是全局彈窗扣典， fixed需要放在 body 第一層級(jí)； overflow:hidden慎玖，父組件是 BFC贮尖，會(huì)限制子組件在超出部分隱藏，可以讓子組件脫離父組件趁怔，在外面現(xiàn)實(shí)湿硝； 父組件 z-index 值太小， 讓它脫離 父組件润努。
? ? ? ? ? ? 總結(jié)：一個(gè) portal 的典型用例是當(dāng)父組件有?overflow: hidden?或?z-index?樣式時(shí)关斜，但你需要子組件能夠在視覺上“跳出”其容器。例如铺浇，對(duì)話框痢畜、懸浮卡以及提示框。
? ? context
? ??????????React.createContext()
? ??????????Context 提供了一個(gè)無需為每層組件手動(dòng)添加 props鳍侣，就能在組件樹間進(jìn)行數(shù)據(jù)傳遞的方法丁稀。
? ??????????在一個(gè)典型的 React 應(yīng)用中，數(shù)據(jù)是通過 props 屬性自上而下（由父及子）進(jìn)行傳遞的倚聚，但這種做法對(duì)于某些類型的屬性而言是極其繁瑣的（例如：地區(qū)偏好线衫，UI 主題），這些屬性是應(yīng)用程序中許多組件都需要的秉沼。Context 提供了一種在組件之間共享此類值的方式桶雀，而不必顯式地通過組件樹的逐層傳遞 props矿酵。
? ? ? ? ? ? 應(yīng)用場(chǎng)景：公共信息（語(yǔ)言、主題）如何傳遞給每個(gè)組件矗积； 用 props 太繁瑣全肮； 用 redux 小題大作。
? ? ? ? ? ? 函數(shù)組件 和 class 組件 消費(fèi)方式 是不一樣的
? ? 多個(gè) context 的使用 棘捣，但是還不是不推薦這么嵌套辜腺， 可以重新設(shè)計(jì)組件的層級(jí)。
? ? ? ? 異步組件
? ? ? ? ? ? import（）
? ? ? ? ? ? React.lazy
????????????????React.lazy()?允許你定義一個(gè)動(dòng)態(tài)加載的組件乍恐。這有助于縮減 bundle 的體積评疗，并延遲加載在初次渲染時(shí)未用到的組件。
? ? ? ? ? ? React.Suspense
? ??????????????應(yīng)在?Suspense?組件中渲染 lazy 組件茵烈，如此使得我們可以使用在等待加載 lazy 組件時(shí)做優(yōu)雅降級(jí)（如 loading 指示器等）百匆。fallback?屬性接受任何在組件加載過程中你想展示的 React 元素。你可以將?Suspense?組件置于懶加載組件之上的任何位置呜投。你甚至可以用一個(gè)?Suspense?組件包裹多個(gè)懶加載組件加匈。
? ? ? ? 性能優(yōu)化
? ? ? ? ? ? shouldComponentUpdate (簡(jiǎn)稱 SCU)
? ? ? ? ? ? 基本用法
? ? ? ? ? ? 為什么 react 可以定制這個(gè)生命周期 而不去硬規(guī)定 ??
? ? ? ? ? ? React 默認(rèn) ：SCU 默認(rèn)返回true ，即父組件更新仑荐，子組件會(huì)無條件的更新雕拼。
? ? ? ? ? ? SCU 一定每次都要用嗎？ ------ 可以先不用SCU粘招，需要性能優(yōu)化的時(shí)候才優(yōu)化并且使用 SCU啥寇； SCU 要配合不可變值使用。
????????????PureComponent 和 React.memo??
? ??????????????PureComponent洒扎， SCU 中 實(shí)現(xiàn)了淺比較（深度比較消耗性能）
? ? ? ? ? ? ? ? memo 函數(shù)組件中的?PureComponent
? ? ? ? ? ? ? ? 淺比較已經(jīng)適用大部分情況（盡量不要做深度比較）
? ? ? ? ? ? ? ? 注意：如果 props 相等辑甜，areEqual?會(huì)返回?true；如果 props 不相等逊笆，則返回?false栈戳。這與?shouldComponentUpdate?方法的返回值相反。
高階組件 HOC
? ? ?高階組件（HOC）是 React 中用于復(fù)用組件邏輯的一種高級(jí)技巧难裆。HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設(shè)計(jì)模式镊掖。
? ? ?高階組件是參數(shù)為組件乃戈，返回值為新組件的函數(shù).
? ? ? 具體內(nèi)容 可以看React 高階組件
Render Props
? ??是指一種在 React 組件之間使用一個(gè)?值為函數(shù)的 prop 共享代碼的簡(jiǎn)單技術(shù)。
? ??render prop 是因?yàn)槟Ｊ讲疟环Q為?render?prop 亩进，你不一定要用名為?render?的 prop 來使用這種模式
? ? HOC 和 Render Props
? ? ? ? HOC 模式簡(jiǎn)單症虑，但會(huì)增加組件層級(jí)；Render Props 代碼比較簡(jiǎn)潔归薛；它們都是抽離公共邏輯提升代碼質(zhì)量的方法谍憔，按需使用匪蝙。
