react筆記

回顧基礎:
react 組件 ,class組件 function 組件，接受任意入參props,返回用于描述展示內容的react元素。
class組件
繼承于component.
hook
useState 獲取狀態
const {date,setData} = useState(new Date());
useEffect 可以看成是 componentDidMount，componentDidUpdate 和 componentWillUnmount三者的結合體。
useEffect(()=>{

},[]) 第二個參數不依賴于任何一個state或者是prop，不用重復執行。

正確使用setState.

state更新可能是異步的，也可能是同步的。
setState在合成事件中是異步的，這里說的異步是批量更新。最后一起更新上去。
在生命周期中也是異步的。
setState在setTimeout和原生事件中是同步的。
state更新可能會被合并，因為是批量更新。
setState((state)=>{
return {counter:state.counter + v}
})
setState傳入函數能轉變為鏈式調用。

生命周期

生命周期包括
初始化Init 掛載 更新 銷毀
shouldWillMount render shouldDidMount

state改變之后執行shouldComponentUpdate ->重新掛載
prop改變之后執行receiveProps，再通過改變之后執行shouldUpdateComponent -> willUpdate -> render ->didUpdate

17之后componentWillMount componentWillUnMount。
willReceiveProps 初次渲染的時候不會執行，只有在已掛載的組件接收新的props的時候，才會執行。

componentWillMount
componentWillReceiveProps
componentWillUpdate

17出現

getDerivedStateFromProps 更新state 返回新的state
getSnapshotBeforeUpdate

為什么要廢除?

因為componentWillMount 很多人會把ajax異步加載放在這里執行。為了解決沒有數據短暫白屏的問題。
實際上放在ComponentDidMount也一樣。 react是在 componentDidMount之后才開始渲染。 同時，服務器端渲染有時候不會執行componentWillMount.

總結

以上是生活随笔為你收集整理的react视频笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。