1.onClick
在給onClick綁定事件時,注意不要執(zhí)行函數
onClick = { onValue(text) } 錯誤
onClick = { () => onValue(text) } 正確
2.Capture事件
在事件名后加Capture就能在
事件捕獲階段注冊事件缓窜,進行函數處理哮笆,如 onClickCapture
3.高階組件ref
高階組件無法傳遞refs,且不包含被包裹組件的靜態(tài)方法
不過可以將被包裹組件的靜態(tài)方法復制一份給高階組件
也可使用“hoist-non-react-statics”并且可用“轉發(fā)Ref”傳遞ref
4.React.lazy
在一個組件內加載另一組件B叹誉,該組件B加載時間過長且并不需要立刻呈現弱贼,可考慮使用懶加載
React.lazy(); 它與【React.Suspense】一起使用
5.高階組件使用場景
(1)操縱props
(2)通過ref訪問組件實例
(3)組件狀態(tài)提升
(4)用其他元素包裹組件
6.Portals
通常融求,render方法返回一個元素扁藕,會掛在到離其最近的父節(jié)點上
Portals提供了將子節(jié)點渲染到其他節(jié)點的方式(Modal組件就是使用了該方法)
//原,children掛載在最近的節(jié)點墨吓,也就是div上
render(){
return(
<div>
{this.props.children}
</div>
);
}
//現,children掛載在body上
render(){
return ReactDOM.createPortal(
this.props.children,
document.body
);
}