React生命周期

react生命周期.png

普通DOM操作

import "./styles.css";

//create
let app = document.getElementById("app")
let div = document.createElement('div')
let state = 0

// UNSAFE_componentWillMount

//render == update
div.innerHTML = `
<div>
  <p id="number">${state}</p>
  <button id="plus">+1</button>
  <button id="die">die</button>
</div>
`
//mount
app.appendChild(div)

let number = document.getElementById("number")
let plus = document.getElementById('plus')
plus.onclick= () => {
  state += 1
  //update div == render
  number.innerText = state
}
let die = document.getElementById('die')
die.onclick  = () => {
  plus.onclick = null
  die.onclick = null
  div.remove()
  div = null // destroy div
}

生命周期使用場景

constructor

1. 用于初始化內(nèi)部狀態(tài)
2. 唯一可以直接修改state的地方

getDerivedStateFromProps

1. 當state需要從props初始化時使用
2. 盡量不要使用：維護兩者狀態(tài)一致性會增加復雜度
3. 每次render都會調(diào)用
4. 典型場景：表單控件獲取默認值

componentDidMount

1. UI渲染完成后調(diào)用
2. 只執(zhí)行一次
3. 典型場景：獲取外部資源、數(shù)據(jù)

componentWillUnmount

1. 組件移除時被調(diào)用
2. 典型場景：資源釋放

getSnapshotBeforeUpdate

1. 在頁面render之前調(diào)用，state已更新
2. 典型場景：獲取render之前的DOM狀態(tài)

componentDidUpdate

1. 每次UI更新時被調(diào)用
2. 典型場景：頁面需要根據(jù)props變化重新獲取數(shù)據(jù)

shouldComponentUpdate（手動判斷更新）

1. 決定Virtual DOM是否要重繪
2. 一般可以由PureComponent自動實現(xiàn)
3. 典型場景：性能優(yōu)化

常用?？?/h2>

1. 請求數(shù)據(jù) ajax constructor onClick 任何步驟都可以 componentDidmount()
2. 更新數(shù)據(jù) onClick componentDidmount()只會掛載一次
3. 事件監(jiān)聽
4. 初始化state constructor

?？?/h3>

1. shouldComponentUpdate(){ return false; } 阻止更新，允許我們手動的判斷是否要進行組件的更新，根據(jù)組件的應用場景設(shè)置函數(shù)的合理返回值能夠幫我們避免不必要的更新。性能優(yōu)化

2. 在生命周期的哪一步你應該發(fā)起AJAX請求

   componentDidMount（）