對(duì)生命周期的理解:
1, 組件從創(chuàng)建到死亡,它會(huì)經(jīng)歷一些特定的階段
2, React組件包含一系列鉤子函數(shù)(生命周期回調(diào)函數(shù)),會(huì)在特定的時(shí)刻被調(diào)用
3, 我們?cè)诙x組件時(shí),會(huì)在特定的生命周期回調(diào)函數(shù)中,做特定的工作
頁(yè)面最后有對(duì)生命周期使用的總結(jié):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | //1. 創(chuàng)建類式組件 //生命周期回調(diào)函數(shù) <=> 生命周期鉤子函數(shù) <=> 生命周期函數(shù) <=> 生命周期鉤子 //對(duì)生命周期的理解: //1, 組件從創(chuàng)建到死亡,它會(huì)經(jīng)歷一些特定的階段 //2, React組件包含一系列鉤子函數(shù)(生命周期回調(diào)函數(shù)),會(huì)在特定的時(shí)刻被調(diào)用 //3, 我們?cè)诙x組件時(shí),會(huì)在特定的生命周期回調(diào)函數(shù)中,做特定的工作 class Life extends React.Component{ //初始化狀態(tài) state = {opacity:1} //組件掛載完畢 componentDidMount(){ this .timer = setInterval(()=>{ let {opacity} = this .state opacity -= 0.1 if (opacity <= 0) { console.log(opacity); opacity = 1 } console.log(opacity); this .setState({opacity:opacity}) },1000) } componentWillUnmount(){ clearInterval( this .timer); } //調(diào)用時(shí)機(jī): 初始化渲染,狀態(tài)更新之后 render() { //render 調(diào)用幾次 1 + n(第一次渲染,然后當(dāng) state狀態(tài)更新時(shí),所以這里每當(dāng)state更新一次,就會(huì)再次一次) //所以把setInterval放在這里不合適 /* setInterval(()=>{ let {opacity} = this.state opacity -= 0.1 if(opacity <= 0) { console.log(opacity); opacity = 1 } console.log(opacity); this.setState({opacity:opacity}) },1000) */ return ( <div> <h1 style={{opacity: this .state.opacity}}>學(xué)不會(huì), 怎么辦</h1> <button onClick={ this .die}>不活了</button> </div> ) } die = (event)=>{ //console.log(event.target); //卸載組件 ReactDOM.unmountComponentAtNode(document.getElementById( "test" )); } } ReactDOM.render(<Life/>,document.getElementById( "test" )) |
舊的生命周期的調(diào)用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | class Count extends React.Component{ state = {count:0} //生命周期函數(shù) 掛載時(shí)如下 //1, constructor(構(gòu)造器) //2, componentWillMount(組件將要掛載) //構(gòu)造器 constructor(props){ console.log( "Count---constructor" ); super (props) } //組件將要掛載的鉤子 componentWillMount(){ console.log( "Count---componentWillMount" ); } //組件掛載完畢的鉤子 componentDidMount(){ console.log( "Count---componentDidMount" ); } componentWillUnmount(){ console.log( "Count---componentWillUnmount" ); } //組件是否應(yīng)該更新(true---go,false---stop) 默認(rèn)返回true shouldComponentUpdate(){ console.log( "Count---shouleComponentUpdate" ); return true //如果是false, 就不再往下走了 } //組件將要更新的鉤子 componentWillUpdate(){ console.log( "Count---componentWillUpdate" ); } //組件更新完畢 componentDidUpdate(){ console.log( "Count---componentDidUpdate" ); } render(){ console.log( "Count---render" ); return ( <div> <h1>當(dāng)前的統(tǒng)計(jì)總數(shù)為: { this .state.count}</h1> <button onClick={ this .add}>點(diǎn)擊+1</button> <button onClick={ this .die}>卸載組件</button> <button onClick={ this .force}>不更改任何狀態(tài)值,強(qiáng)制更新一下</button> </div> ) } add = ()=>{ const {count} = this .state this .setState({count:count+1}) } //卸載組件按鈕的回調(diào) die = ()=>{ ReactDOM.unmountComponentAtNode(document.getElementById( "test" )) } force = ()=>{ this .forceUpdate(); } } ReactDOM.render(<Count/>,document.getElementById( "test" )) |
父子組件的調(diào)用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | class Parent extends React.Component{ //初始化狀態(tài)值 state = {carName: "寶馬" } //更換車 changeCar = () =>{ this .setState({carName: "奧拓" }) } render(){ return ( <div> <h1>我是父組件</h1> <button onClick={ this .changeCar}>換車</button> <Child carName={ this .state.carName} /> </div> ) } } class Child extends React.Component{ //componentWillReceiveProps 第一次接收 屬性值 不執(zhí)行 componentWillReceiveProps(props){ console.log( "子組件" , 'componentWillReceiveProps' ,props); } shouldComponentUpdate(){ console.log( "是否Ok" , 'shouldComponentUpdate' ); return true ; } componentWillUpdate(){ console.log( "子組件" , 'compoentWillUpdate' ); } componentDidUpdate(){ console.log( "子組件" , "componentDidUpdate" ); } render(){ console.log( '子組件渲染' ); return ( <div> 我是子組件,接收到汽車是 { this .props.carName} </div> ) } } ReactDOM.render(<Parent/>, document.getElementById( "test" )) |
新版本的生命周期
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | class Count extends React.Component{ state = {count:0} //生命周期函數(shù) 掛載時(shí)如下 //1, constructor(構(gòu)造器) //2, componentWillMount(組件將要掛載) //構(gòu)造器 constructor(props){ console.log( "Count---constructor" ); super (props) } //組件掛載完畢的鉤子 componentDidMount(){ console.log( "Count---componentDidMount" ); } componentWillUnmount(){ console.log( "Count---componentWillUnmount" ); } //組件是否應(yīng)該更新(true---go,false---stop) 默認(rèn)返回true shouldComponentUpdate(){ console.log( "Count---shouleComponentUpdate" ); return true //如果是false, 就不再往下走了 } //派生的狀態(tài):不是從state得到,是從props得到 //此方法適用于罕見(jiàn)的用例,即 state 的值在任何時(shí)候都取決于 props, 可以使用此方法,但也可以完全不使用,即從地球上消失,沒(méi)有作用 static getDerivedStateFromProps(props,state){ console.log( "getDerivedStateFromProps" ,props,state); //this.setState({count:props.count}) // return props return null } //組件更新完畢 componentDidUpdate(preProps,preState,snapShot){ console.log( "Count---componentDidUpdate" ,preProps,preState,snapShot); } //getSnapshotBeforeUpdate (信息狀態(tài)在更新之前來(lái)個(gè)快照) //同樣,此用法很不常見(jiàn) getSnapshotBeforeUpdate(){ console.log( "更新快照" , "getSnapshotBeforeUpate" ); //快照值: 任何值都可以做為快照值 字符串,數(shù)組,對(duì)象 return "莊子" //想傳什么就傳什么,傳給componentDidUpdate } render(){ console.log( "Count---render" ); return ( <div> <h1>當(dāng)前的統(tǒng)計(jì)總數(shù)為: { this .state.count}</h1> <button onClick={ this .add}>點(diǎn)擊+1</button> <button onClick={ this .die}>卸載組件</button> <button onClick={ this .force}>不更改任何狀態(tài)值,強(qiáng)制更新一下</button> </div> ) } add = ()=>{ const {count} = this .state this .setState({count:count+1}) } //卸載組件按鈕的回調(diào) die = ()=>{ ReactDOM.unmountComponentAtNode(document.getElementById( "test" )) } force = ()=>{ this .forceUpdate(); } } //ReactDOM.render(<Count count = {10}/>,document.getElementById("test")) const e = React.createElement; const domContainer = document.querySelector( '#test' ); const root = ReactDOM.createRoot(domContainer); root.render(e(Count)); |
1. 初始化階段: 由ReactDOM.render()觸發(fā)--初次渲染
1. constructor()
2. componentWillMount
3. render()
4. componentDidMount() =====> 常用
一般在這個(gè)鉤子中做一些初始化的事, 例如:開(kāi)啟定時(shí)器,發(fā)送網(wǎng)絡(luò)請(qǐng)求,訂閱信息
2. 更新階段: 由組件內(nèi)部this.setState()或父組件render觸發(fā)
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() =====> 必須使用的一個(gè)
4. componentDidUpdate()
3. 卸載組件: 由ReactDOM.unmountComponentAtNode()觸發(fā)
1. componentWillUnmount() ===> 常用
一般在這個(gè)鉤子中做一些收尾的事, 例如:關(guān)閉定時(shí)器,取消訂閱消息
新的生命周期:
即將廢棄:componentWillMount,componentWillUpdate(),componentWillReceiveProps
增加:
getDervedStatefrorProps(得到派生的狀態(tài)從props),
getsrapchotEeloreUpdate
(以上兩個(gè)用法極其罕見(jiàn), 即使完全不會(huì)也沒(méi)有關(guān)系)