這次趁著學(xué)習(xí)React過(guò)一下生命周期，主要是參考了官網(wǎng)生命周期的內(nèi)容然后加了些自己的理解，做個(gè)學(xué)習(xí)記錄喳篇，后續(xù)可能會(huì)繼續(xù)完善相關(guān)內(nèi)容
1.概覽
React 16:
- 頁(yè)面初始化：constructor-->componentWillMount-->render-->componentDidMount
- 父級(jí)數(shù)據(jù)更新：componentWillReceiveProps-->shouldComponentUpdate-->componentWillUpdate-->render-->componentDidUpdate
- 組件數(shù)據(jù)更新：shouldComponentUpdate-->componentWillUpdate-->render-->componentDidUpdate
- 強(qiáng)制更新：componentWillUpdate-->render-->componentDidUpdate
2.特點(diǎn)：（待完善）
- 綠色：頁(yè)面加載后只走一次
- 藍(lán)紫色：父級(jí)數(shù)據(jù)更新會(huì)引發(fā)render
- 黃紫色：子組件更新數(shù)據(jù)會(huì)引起render
- 黑紫色：強(qiáng)制更新會(huì)跳過(guò)SCU呆细，引發(fā)render
3.生命周期方法：（待完善）
| 生命周期函數(shù) | 函數(shù)參數(shù)及功能 |
|---|---|
| render() | 常用，唯一必須的生命周期 |
| constructor(props) | 常用燕差，非必須，可以不用(不初始化狀態(tài)和方法時(shí)) |
| componentDidMount() | 常用坝冕，請(qǐng)求接口徒探，掛載方法和定時(shí)器 |
| componentDidUpdate(prevProps,prevState,shapshot) | 常用，組件更新后調(diào)用喂窟，按需請(qǐng)求接口 |
| componentWillUnmount | 常用测暗，卸載方法和銷毀定時(shí)器 |
| componentWillUpdate | 更新前 |
| shouldComponentUpdate(nextProps,nextState) | 根據(jù)數(shù)據(jù)不同返回true/false而決定是否render |
| componentWillMount | 設(shè)置定時(shí)器 |
| componentWillUpdate(nextProps,nextState) | 更新發(fā)生前的準(zhǔn)備工作：定時(shí)器，網(wǎng)絡(luò)請(qǐng)求 |
| componentWillReceiveProps(nextProps) | 接受最新的props磨澡，獲取組件狀態(tài) |
常用：
-
render()
- 多種返回值：節(jié)點(diǎn)碗啄，字符串或數(shù)字，數(shù)組
- 純函數(shù)钱贯，不應(yīng)該修改組件狀態(tài)挫掏，不與瀏覽器交互
-
constructor(props)
- constructor是非必須的
- 只有在construcor里可以直接設(shè)置this.state，不能用
this.setState - 避免在構(gòu)造函數(shù)中引入任何副作用或訂閱秩命。
- 不要這樣寫：會(huì)產(chǎn)生bug：props.color更新時(shí)color不變(除非你本意就是不想讓他變)尉共，你可以直接使用this.props.color褒傅，
constructor(props) {
super(props);
// Don't do this!
this.state = { color: props.color };
}
-
componentDidMount()
- 在這里進(jìn)行網(wǎng)絡(luò)請(qǐng)求
- 如果綁定了事件和定時(shí)器等，記得在
componentWillUnmount()中解綁 - 這里可以使用
setState()袄友，雖然會(huì)產(chǎn)生額外的render()但是用戶看不出來(lái)殿托。這樣會(huì)導(dǎo)致性能問(wèn)題所以最好慎用
-
componentDidUpdate(prevProps, prevState, snapshot)
看參數(shù)基本上就能推測(cè)出這是干嘛的了：舊的狀態(tài)和舊的數(shù)據(jù)，比較參數(shù)剧蚣，做一些邏輯梳理支竹，比如接口請(qǐng)求
與componentDidMount一樣，這里也可以使用
setState()鸠按，但是也是會(huì)產(chǎn)生性能損耗礼搁，如果要使用的話一定要做條件判斷，不然死循環(huán)了第三個(gè)參數(shù)：snapshot是生命周期：
getSnapshotBeforeUpdate的返回值
componentDidUpdate(prevProps) {
// 典型用法目尖，不要忘了比較porps
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}
-
componentWillUnmount()
- 取消事件監(jiān)聽(tīng)馒吴、清除定時(shí)器等
- 顯然，這里不應(yīng)該使用
setState()瑟曲，用了也沒(méi)用
不常用：用起來(lái)不難但是通常情況下不太需要饮戳，具體圖示見(jiàn)這里
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
-
shouldComponentUpdate(nextProps,nextState)
- 性能優(yōu)化用，不應(yīng)該作為阻止render的手段
- 別使用JSON.stringify()洞拨，低效并且損耗性能
-
static getDerivedStateFromProps(props,state)
- 在render之前調(diào)用
- 用于props隨著時(shí)間變化而變化的情況扯罐，例如transition
-
getSnapshotBeforeUpdate(prevProps,prevState)
- 獲取DOM快照，返回值給componentDidUpdate的第三個(gè)參數(shù)使用
-
static getDerivedStateFromError(error)
- 組件出錯(cuò)時(shí)調(diào)用
-
componentDidCatch(error,info)
- 子組件引發(fā)錯(cuò)誤時(shí)調(diào)用
舊版生命周期
- UNSAFE_componentWillMount()
- UNSAFE_componentWillReceiveProps(nextProps)
- UNSAFE_componentWillUpdate(nextProps,nextState)
4.使用getDerivedStateFromProps()后的生命周期
- 生命周期：
5.setState(),forceUpdate()
- setState()烦衣，需要說(shuō)的比較多歹河，暫時(shí)不討論
- forceUpdate()，跳過(guò)shouldComponentUpdate強(qiáng)制更新琉挖，不需要定義可以直接調(diào)用启泣，慎用
6.類屬性：defaultProps,displayName,
- defaultProps:
class CustomButton extends React.Component {
// ...
}
CustomButton.defaultProps = {
color: 'blue'
};
如果沒(méi)有 props.color 那么color會(huì)被設(shè)置為 blue
- displayName:用于調(diào)試消息
7.實(shí)例屬性：props,state
這倆篇幅過(guò)長(zhǎng)，暫時(shí)不細(xì)說(shuō)了
下篇文章計(jì)劃：
React生命周期具體使用方法及常見(jiàn)相關(guān)面試題示辈，敬請(qǐng)期待
