react类式组件的生命周期和useEffect实现函数组件生命周期

概念

生命周期是一个组件丛创建,渲染,更新,卸载的过程,无论是vue还是react都具有这个设计概念,也是开发者必须熟练运用的,特别是业务开发,不同的生命周期做不同的事是很重要的.

....
多说两句心得,本人是先接触vue的,无论是vue2还是vue3的生命周期,在理解和学习上都会比react更容易理解,我在学习react的时候,也经常会想着这个api如果在vue里面会和哪个api功能相同.

其实有些本末倒置了,先有react才有的vue,vue是作者做了更多的操作,让你用到更舒适的api,还是那个经典形容,react是手动打,vue是自动挡.

废话不多说,开始说react的生命周期

...

如果想直接死记硬背八股文,直接拉到底看总结就可以了

类式组件

在hooks出来之前,写react基本都是用类式组件

两个原因,一是对this这个东西有特别的喜爱(vue后遗症),二是类式组件可以使用生命周期和state,适合开发业务组件.

测试各个钩子函数的demo

import React, { Component} from 'react'
export default class index extends Component {
 constructor(){
    super()
  console.log(this,'constructor---构造器')
 }

 state = {
    num:1
 }
 add = ()=>{
    let newNum = this.state.num +1
    this.setState({
        num:newNum
    })
 }
 


//生命周期钩子(旧的)
//  componentWillMount =()=>{
//     console.log('componentWillMount---组件将要加载')
//  }

//  componentWillUpdate = ()=>{
//     console.log('componentWillUpdate','组件将要更新')
//  }


//生命周期钩子(新的)
static getDerivedStateFromProps = ()=>{
    console.log(this,'getDerivedStateFromProps---初始化一些基础状态')
    return null
}

getSnapshotBeforeUpdate = ()=>{
    console.log(this,'getSnapshotBeforeUpdate---更新之前的快照')
    return '旧的值'
}





 //新旧都具备的

 shouldComponentUpdate = ()=>{
    console.log(this,'shouldComponentUpdate','组件需要更新')
    return true
 }
 componentDidUpdate = ()=>{
    console.log(this,'componentDidUpdate','组件更新完毕')
 }

 componentDidMount = ()=>{
    console.log(this,'componentDidMount---组件加载完成')
 }

 updateCallBack = ()=>{
  this.forceUpdate()
 }
  render() {
    console.log(this,'render---渲染函数')
    return (
      <div id='index'>
        <h3>生命周期模块</h3> 
        <button onClick={this.add}>修改一下数值</button>
        <p>{this.state.num}</p>
        <button onClick={this.updateCallBack}>手动更新</button>
        <br />
      </div>
    )
  }
   componentWillUnmount = ()=>{
    console.log(this,'componentWillUnmount---组件将要卸载')
 }
}

场景:

1.页面初次加载

constructor > getDerivedStateFromProps > render > componentDidMount

2.点击修改一下数值按钮

getDerivedStateFromProps > shouldComponentUpdate > render > getSnapshotBeforeUpdate >

componentDidUpdate

3.手动更新(forceUpdate函数)

getDerivedStateFromProps > render > getSnapshotBeforeUpdate > componentDidUpdate

4.卸载当前组件

componentWillUnmount

生命周期经典图

解读一下:

好吧,其实没有什么太多好解读的,本人的react内力没有那么深厚,这张图就是刚才我们实验的结果

初始化,自动更新,手动更新,卸载

你只要把这个demo自己写一下,就瞬间知道这个图是干啥的了,除了很长的单词比较难写,其余都好说.

你以为这样就完了吗,不不不,没有没有没有.这里还有两个需要专门说的

两个疑问

1.生命周期连续调用了两次的问题

造成这个原因是因为你的根组件使用了严格模式 React.StrictMode

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    {/* <React.StrictMode> 把它注释掉就可以了*/}   
    <App />
    {/* </React.StrictMode> */}
    
  </Provider>
)

2.父子组件生命周期顺序(测试demo)

初始化

父costructor > 父 getDerviedStateFromProps > 父render >子costructor >子getDerviedStateFromProps > 子render > 子componentDidMount >父componentDidMount

父组件修改值触发更新

父 getDerivedStateFromProps > 父 shouldComponentUpdate > 父 render > 子 getDrivedStateFromprops > 子shouldComponentUpdate > 子 render > 子 getSnaphotBeforeUpdate > 父getSnapshotBeforeUpdate > 子 componentDidUpdate> 父 componentDidUpdate

父组件手动更新

父 getDerivedStateFromProps > 父render > 子 getDerivedStateFromProps > 子 shouldComponentUpdate > 子render > 子getSnapshotBeforeUpdate > 父getSnapshotBeforeUpdate > 子componentDidUpdate > 父componentDidUpdate

组件卸载

父componentWillUnmount > 子componentWillUnmount

函数组件

函数组件实现生命周期是需要借助一个api的,这个api叫做useEffect.

demo

import React,{useState,useEffect} from 'react'
import {Button} from 'antd'
export default function index(props) {
    const [num1,changeNum1] = useState(0)
    const [num2,changeNum2] = useState(10)
    //单个-----------------------------------------------------
    //首次加载,修改num1,修改num2,卸载当前组件没有
    useEffect(()=>{
        console.log('只传一个函数')
    })
    //首次加载,num1没有,num2没有,卸载当前组件没有
    useEffect(()=>{
        console.log('参数二传一个空数组')
    },[])
    //首次加载,修改num1,num2没有,卸载当前组件没有
    useEffect(()=>{
        console.log('传参数num1')
    },[num1])
    //首次加载,num1没有,修改num2,卸载当前组件没有
    useEffect(()=>{
        console.log('传参数num2')
    },[num2])
    //首次加载,修改num1,修改num2,卸载当前组件没有
    useEffect(()=>{
        console.log('都传')
    },[num1,num2])
    //首次没有,修改num1,修改num2,卸载组件调用
    useEffect(()=>{
        return ()=>{
            console.log('return方法')
        }
    })
    // 总结:
    // 1.参数1:函数:   初始化和每次修改参数都会触发这个函数
    // 2.参树2:空数组: 只有首次加载会触发
    // 3.参数2:某条数据: 首次加载和修改该数据都会触发
    // 4.参数2:多条数据: 首次加载和修改数组内任意一条数据都会触发
    // 5.参数1:函数返回一个函数: 首次不急在,但是修改任意数值和卸载组件时都会调用

  return (
    <div>
      <p>数值1:{num1}<Button onClick={()=>changeNum1(num1+1)}>修改数值1</Button></p>
      <p>数值2:{num2}<Button onClick={()=>changeNum2(num2-1)}>修改数值2</Button></p>
    </div>
  )
}

初始化

修改值1

组件卸载

实现初始化,更新,单独的数据更新,卸载

import React,{useState,useEffect} from 'react'
import {Button} from 'antd'
export default function index(props) {
    const [num1,changeNum1] = useState(0)
    const [num2,changeNum2] = useState(10)

    // 组合------------------------------------------------------
    
    // 场景1: 初始化加载
    useEffect(()=>{
        console.log('初始化加载')
        console.log(num1,'???',props)
    },[])

    //场景2: 任意数据更新,但是初始化不加载
    useEffect(()=>{
        return ()=>{
            console.log('数据发生修改了')
        }

    })
    //场景3: 只有卸载时加载
    useEffect(()=>{
        return ()=>{
            console.log('卸载才会调用')
        }

    },[])
    //场景4: 某一数据发生改变,单独触发
    useEffect(()=>{
        return ()=>{
            console.log('只有修改num1才会调用')
        }
    },[num1])

  return (
    <div>
      <p>数值1:{num1}<Button onClick={()=>changeNum1(num1+1)}>修改数值1</Button></p>
      <p>数值2:{num2}<Button onClick={()=>changeNum2(num2-1)}>修改数值2</Button></p>
    </div>
  )
}

总结

类式组件

各阶段钩子调用顺序

初始化	constructor > getDerivedStateFromProps > render > componentDidMount
自动更新	getDerivedStateFromProps > shouldComponentUpdate > render > getSnapshotBeforeUpdate > componentDidUpdate
手动更新	getDerivedStateFromProps > render > getSnapshotBeforeUpdate > componentDidUpdate
卸载	componentWillUnmount

父子组件生命周期

初始化	父costructor > 父 getDerviedStateFromProps > 父render >子costructor >子getDerviedStateFromProps > 子render > 子componentDidMount >父componentDidMount
父组件自动更新	父 getDerivedStateFromProps > 父 shouldComponentUpdate > 父 render > 子 getDrivedStateFromprops > 子shouldComponentUpdate > 子 render > 子 getSnaphotBeforeUpdate > 父getSnapshotBeforeUpdate > 子 componentDidUpdate> 父 componentDidUpdate
父组件手动更新	父 getDerivedStateFromProps > 父render > 子 getDerivedStateFromProps > 子 shouldComponentUpdate > 子render > 子getSnapshotBeforeUpdate > 父getSnapshotBeforeUpdate > 子componentDidUpdate > 父componentDidUpdate
卸载	父componentWillUnmount > 子componentWillUnmount

钩子函数连续调用两次的问题解决

干掉根组件的 React.StrictMode

函数组件

只在初始化加载调用	useEffect(()=>{ console.log('初始化加载') },[])
初始化不调用但是更新组件会调用	useEffect(()=>{ return ()=>{ console.log('数据发生修改了') } })
单独的数据发生变化进行调用	useEffect(()=>{ return ()=>{ console.log('只有修改num1才会调用') } },[num1])
只在组件卸载时调用	useEffect(()=>{ return ()=>{ console.log('卸载才会调用') } },[])