一、授控組件 【input】--- 表單里面的值和state關(guān)聯(lián)起來了
1、value
2、onChange事件去改變setData

二、非授控組件：【input 的值和 state沒有關(guān)系、常見的有上傳文件 file】

1、ref

2、defaultValue 和 defaultChecked

3、手動操作DOM元素

1.png

ps: 也可以這樣操作

2.png

使用場景：
1、必須手動操作DOM元素、setState實(shí)現(xiàn)不了
2、上傳文件 <input type=“file” />
3、某些富文本編輯器、要基于Dom操作

二、class組建和函數(shù)組件的區(qū)別
1、函數(shù)組件：
a、純函數(shù)、輸入props 輸出JSX
b、沒有實(shí)例、沒有生命周期、沒有state
c、不能擴(kuò)展其他方法

三、React中portals【傳送門】
組件會默認(rèn)按照既定層次嵌套渲染？
如何把組件渲染到父組件以外？
使用場景： overflow: hidden、z-index值太小、fixed需要放在body第一層級

四、異步組件 [組件比較大、路由異步加載等]
1、import()
2、react.lazy
3、react.suspense

3.png

五、context- （上下文）
公共信息（主題顏色、語言）如何傳遞給每個(gè)組件？
props 【太繁瑣】
redux 【小題大做】

5.png

6.png

六、SCU ---- shouldComponentUpdata

  PureComponent 和 React.memo

  不可變值 immutable.js

7.png

React 默認(rèn)： 父組件有更新、子組件則無條件更新--- 所以性能優(yōu)化對于 react更為重要
SCU 也不一定每次都要用

SCU中進(jìn)行淺比較 而不建議深度比較 所以有了 PureComponent

七、關(guān)于組件公共邏輯的抽離

1、mixin ---- 已棄用

2、高階組件---詳見 HOCdemo.js

8.png

9.png

3、render Props

10.png

八、渲染列表、為什么要加key

11.png