很多情況下,我們是通過props來定制組件實(shí)例的外觀及行為,這樣的組件我們稱之為無狀態(tài)/stateless的組件辙售,因?yàn)樵谌魏螘r(shí)刻,組件 實(shí)例的表現(xiàn)都僅僅取決于外部傳入的props屬性肃晚,與 它自身之前的表現(xiàn)毫無關(guān)系秽荤,即,它本身沒有任何記憶
讓一個(gè)組件擁有記憶能力,根據(jù)自身的狀態(tài)對同樣的刺激做出 不同的反應(yīng),React的組件的確引入了狀態(tài)機(jī)的概念state
setState 尖端使用的方法 callback
//默認(rèn)初始化close為false
this.setState({close : true},() => {
//setstate 不會及時(shí)修改state , 可以在回調(diào)中才能得到true
//得到的為true
console.log(this.state.close)
})
//還是為false
console.log(this.state.close)
設(shè)置組件初始狀態(tài),可以在constructor 中
constructor(props){
super(props)
this.state= {
tag : _tag
}
}
看下面清晰的圖片吧,順序是
1.componentWillMount
2.componentDidMount
3.componentWillReceiveProps
4.shouldComponentUpdate
5.componentWillUpdate
6-componentDidUpdate
(3-6一直重復(fù))
7.componentWillUnmount
解釋下
componentWillMount 組件實(shí)例即將掛接(初次渲染)時(shí)被調(diào)用
這個(gè)方法在整個(gè)生命周期中只會被調(diào)用一次
componentDidMount() - 組件實(shí)例掛接(初次渲染)后被調(diào)用
這個(gè)方法在整個(gè)生命周期中只會被調(diào)用一次
componentWillUnmount() - 組件實(shí)例即將從DOM樹移除時(shí)被調(diào)用
這個(gè)方法在整個(gè)生命周期中只會被調(diào)用一次黄鳍。
上面3個(gè)方法是只會觸發(fā)一次
componentWillReceiveProps(nextProps) - 組件實(shí)例即將設(shè)置新屬性時(shí)被調(diào)用
參數(shù)nextProps表示即將應(yīng)用到組件實(shí)例上的新屬性值推姻。
shouldComponentUpdate(nextProps, nextState) - 組件實(shí)例即將重新渲染時(shí)被調(diào)用
參數(shù)nextProps傳入即將應(yīng)用到組件實(shí)例上的新屬性值,需要return 布爾值 际起,return true 表示 需要渲染 拾碌,false 表示不需要渲染
componentWillUpdate(nextProps, nextState) - 組件實(shí)例即將重新渲染時(shí)被調(diào)用
注意:不能在此方法內(nèi)調(diào)用setState()。
componentDidUpdate(prevProps, prevState) - 組件實(shí)例重新渲染后被調(diào)用
React 組件 通信
react是單向數(shù)據(jù)流
父組件 =>> 子組件
父組件 =>> 子組件: 通過 props
子組件 =>> 父組件
子組件 =>> 父組件 : 通過 callback
子組件 =>> 子組件
子組件 =>> 子組件 : 子組件 =>> 父組件 =>> 子組件 (callback 和props 組合) 也就是· 子組件通過回調(diào)改變父組件中的狀態(tài)街望,通過props再修改另一個(gè)組件的狀態(tài)