一阁猜、授控組件 【input】--- 表單里面的值和state關(guān)聯(lián)起來了
1丸逸、value
2、onChange事件去改變setData
二剃袍、非授控組件:【input 的值和 state沒有關(guān)系黄刚、常見的有上傳文件 file】
1、ref
2笛园、defaultValue 和 defaultChecked
3隘击、手動操作DOM元素
ps: 也可以這樣操作
使用場景:
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
五嫌拣、context- (上下文)
公共信息(主題顏色柔袁、語言)如何傳遞給每個組件?
props 【太繁瑣】
redux 【小題大做】
六亭罪、SCU ---- shouldComponentUpdata
PureComponent 和 React.memo
不可變值 immutable.js
React 默認(rèn): 父組件有更新瘦馍、子組件則無條件更新--- 所以性能優(yōu)化對于 react更為重要
SCU 也不一定每次都要用
SCU中進(jìn)行淺比較 而不建議深度比較 所以有了 PureComponent
七、關(guān)于組件公共邏輯的抽離
1应役、mixin ---- 已棄用
2、高階組件---詳見 HOCdemo.js
3燥筷、render Props
八箩祥、渲染列表、為什么要加key