react兩種組件定義方式
一種class定義,利用ES6語法
class定義方式
另一種function定義
function定義
他兩個什么卻別呢
class有局部生命周期以及this指向問題
而function是在16.8版本Hooks才加入了useEffect和useState模擬生命周期和局部狀態
生命周期圖.png
我就說下經常用的時候要注意的
分為三個階段
創建階段
更新階段
銷毀階段
在更新階段不能調用this.setstate,因為我們每次改變,render都會重新執行,會造成死循環。
componentWillMount (掛載完成前)
render (渲染)
componentWillMount (掛載完成后)
componentWillReceiveProps (組件接收到屬性時觸發)
shouldComponentUpdate (只有true/false來控制組件是否需要更新)一般我們通過該函數來優化性能
componentWillUpdate (組件即將被更新時觸發)
render (渲染)
componentDidUpdate (組件被更新完成后觸發,頁面中產生了新的DOM的元素,可以進行DOM操作)
componentWillUnmount (組件被銷毀時觸發。這里我們可以進行一些清理操作,例如清理定時器,取消Redux的訂閱事件等等)