對生命周期的理解:
1, 組件從創建到死亡,它會經歷一些特定的階段
2, React組件包含一系列鉤子函數(生命周期回調函數),會在特定的時刻被調用
3, 我們在定義組件時,會在特定的生命周期回調函數中,做特定的工作
頁面最后有對生命周期使用的總結:
//1. 創建類式組件 //生命周期回調函數 <=> 生命周期鉤子函數 <=> 生命周期函數 <=> 生命周期鉤子 //對生命周期的理解: //1, 組件從創建到死亡,它會經歷一些特定的階段 //2, React組件包含一系列鉤子函數(生命周期回調函數),會在特定的時刻被調用 //3, 我們在定義組件時,會在特定的生命周期回調函數中,做特定的工作 class Life extends React.Component{ //初始化狀態 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); } //調用時機: 初始化渲染,狀態更新之后 render() { //render 調用幾次 1 + n(第一次渲染,然后當 state狀態更新時,所以這里每當state更新一次,就會再次一次) //所以把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}}>學不會, 怎么辦</h1> <button onClick={this.die}>不活了</button> </div> ) } die = (event)=>{ //console.log(event.target); //卸載組件 ReactDOM.unmountComponentAtNode(document.getElementById("test")); } } ReactDOM.render(<Life/>,document.getElementById("test"))
舊的生命周期的調用
class Count extends React.Component{ state = {count:0} //生命周期函數 掛載時如下 //1, constructor(構造器) //2, componentWillMount(組件將要掛載) //構造器 constructor(props){ console.log("Count---constructor"); super(props) } //組件將要掛載的鉤子 componentWillMount(){ console.log("Count---componentWillMount"); } //組件掛載完畢的鉤子 componentDidMount(){ console.log("Count---componentDidMount"); } componentWillUnmount(){ console.log("Count---componentWillUnmount"); } //組件是否應該更新(true---go,false---stop) 默認返回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>當前的統計總數為: {this.state.count}</h1> <button onClick={this.add}>點擊+1</button> <button onClick={this.die}>卸載組件</button> <button onClick={this.force}>不更改任何狀態值,強制更新一下</button> </div> ) } add = ()=>{ const {count} = this.state this.setState({count:count+1}) } //卸載組件按鈕的回調 die = ()=>{ ReactDOM.unmountComponentAtNode(document.getElementById("test")) } force = ()=>{ this.forceUpdate(); } } ReactDOM.render(<Count/>,document.getElementById("test"))
父子組件的調用:
class Parent extends React.Component{ //初始化狀態值 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 第一次接收 屬性值 不執行 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"))
新版本的生命周期
class Count extends React.Component{ state = {count:0} //生命周期函數 掛載時如下 //1, constructor(構造器) //2, componentWillMount(組件將要掛載) //構造器 constructor(props){ console.log("Count---constructor"); super(props) } //組件掛載完畢的鉤子 componentDidMount(){ console.log("Count---componentDidMount"); } componentWillUnmount(){ console.log("Count---componentWillUnmount"); } //組件是否應該更新(true---go,false---stop) 默認返回true shouldComponentUpdate(){ console.log("Count---shouleComponentUpdate"); return true //如果是false, 就不再往下走了 } //派生的狀態:不是從state得到,是從props得到 //此方法適用于罕見的用例,即 state 的值在任何時候都取決于 props, 可以使用此方法,但也可以完全不使用,即從地球上消失,沒有作用 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 (信息狀態在更新之前來個快照) //同樣,此用法很不常見 getSnapshotBeforeUpdate(){ console.log("更新快照","getSnapshotBeforeUpate"); //快照值: 任何值都可以做為快照值 字符串,數組,對象 return "莊子" //想傳什么就傳什么,傳給componentDidUpdate } render(){ console.log("Count---render"); return ( <div> <h1>當前的統計總數為: {this.state.count}</h1> <button onClick={this.add}>點擊+1</button> <button onClick={this.die}>卸載組件</button> <button onClick={this.force}>不更改任何狀態值,強制更新一下</button> </div> ) } add = ()=>{ const {count} = this.state this.setState({count:count+1}) } //卸載組件按鈕的回調 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()觸發--初次渲染
1. constructor()
2. componentWillMount
3. render()
4. componentDidMount() =====> 常用
一般在這個鉤子中做一些初始化的事, 例如:開啟定時器,發送網絡請求,訂閱信息
2. 更新階段: 由組件內部this.setState()或父組件render觸發
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() =====> 必須使用的一個
4. componentDidUpdate()
3. 卸載組件: 由ReactDOM.unmountComponentAtNode()觸發
1. componentWillUnmount() ===> 常用
一般在這個鉤子中做一些收尾的事, 例如:關閉定時器,取消訂閱消息
新的生命周期:
即將廢棄:componentWillMount,componentWillUpdate(),componentWillReceiveProps
增加:
getDervedStatefrorProps(得到派生的狀態從props),
getsrapchotEeloreUpdate
(以上兩個用法極其罕見, 即使完全不會也沒有關系)