生存周期圖
- 從組件創(chuàng)建到銷(xiāo)毀的整個(gè)過(guò)程
生存周期圖.png
完整的生命周期鉤子函數(shù)
- 鉤子函數(shù)就是一個(gè)事件掘鄙，在相應(yīng)的階段觸發(fā)的對(duì)應(yīng)的函數(shù)院究。
創(chuàng)建階段(mount)
-
constructor:構(gòu)造函數(shù)洽瞬，這個(gè)時(shí)候還不算時(shí)個(gè)組件本涕，只是class自身的初始化 -
getDerivedStateFromProps:檢查需要更新的狀態(tài) -
render:初始渲染 -
componentDidMount:組件創(chuàng)建完成，并已掛載到DOM上,比較常用伙窃。
class Cmp extends React.Component{
constructor(...args){
super(...args)
this.state={
a:1
}
console.log('constructor');
}
componentDidMount() {
console.log('創(chuàng)建了')
}
render(){
console.log('渲染了');
return (
<div><p>{this.state.a}</p></div>
)
}
}
ReactDOM.render(<Cmp></Cmp>,document.getElementById('root'))
// 輸出：
// constructor
// 渲染了
// 創(chuàng)建了
更新階段(updata)
- getDerivedStateFeomProps:檢查組件需要更新的狀態(tài)
- shouldComponentUpdate:確定組件是否需要更新菩颖，需要使用return值，ture或者false;沒(méi)有返回值的話(huà)會(huì)報(bào)錯(cuò)为障；
Warning: Cmp.shouldComponentUpdate(): Returned undefined instead of a boolean value. Make sure to return true or false.
- render渲染
- componentDidUpdate:組件渲染完成
class Cmp extends React.Component{
constructor(...args){
super(...args)
this.state={
a:1
}
console.log('constructor');
}
componentDidMount() {
console.log('創(chuàng)建了')
}
componentDidUpdate() {
console.log('didUpdate')
}
shouldComponentUpdate(nextProps, nextState) {
console.log(nextProps, nextState);
//這里可以寫(xiě)相關(guān)的判斷晦闰，決定是否進(jìn)行渲染；
return true
}
fn(){
this.setState({
a:this.state.a +1
})
}
render(){
console.log('渲染了');
return (
<div>
<p>{this.state.a}</p>
<input type="button" value="按鈕" onClick={this.fn.bind(this)}></input>
</div>
)
}
}
ReactDOM.render(<Cmp></Cmp>,document.getElementById('root'))
結(jié)合父子組件鳍怨、組件傳值鹅髓、componentDidMount、componentDidUpdate京景、shouldComponentUpdate的應(yīng)用實(shí)例
class Parent extends React.Component{
constructor(...args){
super(...args)
this.state={
id:1
}
}
fn(){
this.setState({
id:this.state.id +1
})
}
render(){
return (
<div>
<p>{this.state.id}</p>
<input type="button" value="按鈕" onClick={this.fn.bind(this)}></input>
<Child id={this.state.id}></Child>
</div>
)
}
}
class Child extends React.Component{
constructor(...args){
super(...args)
this.state={
name:'',
age:''
}
}
componentDidMount() {
console.log('componentDidMount')
this.updata(this.props.id)
}
componentDidUpdate(prevProps, prevState) {
console.log('componentDidUpdate')
if(prevProps.id != this.props.id){
this.updata(this.props.id)
}
}
shouldComponentUpdate(nextProps, nextState) {
return (nextProps.id != this.props.id || nextState.name != this.state.name)
}
updata(id){
fetch(`../data/data${id}.txt`).then(res=>{
res.json().then(data=>{
this.setState({
name:data.name,
age:data.age
})
})
})
}
render(){
return (
<div>
<p>ID：{this.props.id}</p>
<p>姓名：{this.state.name} 年齡：{this.state.age}</p>
</div>
)
}
}
ReactDOM.render(<Parent></Parent>,document.getElementById('root'))
銷(xiāo)毀階段(Unmount)
-
componentWillUnmount組件銷(xiāo)毀的回調(diào)函數(shù)
class Parent extends React.Component{
constructor(...args){
super(...args)
this.state={
id:true
}
}
fn(){
this.setState({
id:!this.state.id
})
}
render(){
return (
<div>
<p>{this.state.id}</p>
<input type="button" value="按鈕" onClick={this.fn.bind(this)}></input>
{this.state.id?(<Child></Child>):''}
</div>
)
}
}
class Child extends React.Component{
constructor(...args){
super(...args)
}
componentDidMount() {
console.log('didmount')
}
componentWillUnmount() {
console.log('Unmount');
}
render(){
return (
<div>子組件</div>
)
}
}
ReactDOM.render(<Parent></Parent>,document.getElementById('root'))
