React阶段 - 生命周期函数

最新推荐文章于 2024-08-04 13:48:08 发布

Mrqin-shen

最新推荐文章于 2024-08-04 13:48:08 发布

阅读量463

点赞数 1

分类专栏： React 文章标签： react reactjs

本文链接：https://blog.csdn.net/qinshensx/article/details/107101602

版权

React 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

React 生命周期函数

生命周期函数的存在，就是为了能够将页面加载的过程分割开来
便于开发和后期维护，提高效率

16.3版本前的 `React` 生命周期函数

挂载阶段

componentWillMount
会有警告，该生命周期函数会被废弃
看他不顺眼可以写为UNSAFE_componentWillMount
组件挂载时触发

    toHappen(){
        console.log(1+"开始加载...")
    }
    UNSAFE_componentWillMount(){
        window.addEventListener("isHappen",this.toHappen())
    }

render
渲染时触发

    render(){
        console.log(2+"渲染中...")
        return (
            <div> 123 </div>
        )
    }

componentDidMount
渲染结束触发

    componentDidMount(){
        console.log(3+"渲染完成")
    }

执行结果

数据更新阶段

修改数据前只会触发render()方法
在这里插入图片描述
修改数据后全部触发

父组件更新导致子组件更新时，触发的特殊生命周期函数

componentWillReceiveProps(nextProps)
父组件更新引起子组件更新
会有提醒的警告，该生命周期函数会被废弃
看他不顺眼可以写为UNSAFE_componentWillReceiveProps

	componentWillReceiveProps(nextProps){
		console.log(0+"父组件更新了，子组件需要更新的数据", nextProps)
	}

无论是父组件更新，引起子组件更新
还是子组件，自身更新都会触发的函数

shouldComponentUpdate(nextProps, nextState)
确认是否要更新数据，需要返回值
返回值为true时，允许继续更新，返回值为false时，阻断更新

    shouldComponentUpdate(nextProps, nextState){
        // nextProps是父组件传给子组件的值，
        // nextState是数据更新之后的值
        console.log(1 + "是否渲染")
        console.log(nextProps,"是否渲染为",nextState)
        // 返回值决定是否 重新渲染
        return true
    }

componentWillUpdate(nextProps, nextState)
即将更新数据，如果之前的确认更新返回值为false，这里将不会执行
同样的问题会报警告，即将被废弃
安排UNSAFE_componentWillUpdate

	componentWillUpdate(nextProps, nextState){
        console.log(2 + "预备渲染")
        console.log(nextProps,"开始渲染为",nextState)
    }

render()
修改数据便会触发 render，页面渲染都是在这里执行的

    render(){
        return (
			<div> 唯一容器 </div>
		)
    }

componentDidUpdate(nextProps, nextState)
数据更新完成

    componentDidUpdate(nextProps, nextState){
        console.log(4+ "渲染完成")
        console.log(nextProps,"已经渲染为",nextState)
    }

卸载阶段

componentWillUnmount
组件卸载时触发

    toOver(){
        console.log(4+"开始卸载...")
    }
    componentWillUnmount(){
        window.removeEventListener("isHappen",this.toOver())
    }

页面效果

完整的更新阶段子组件代码

import  React,{Component} from "react";
export default class Kids  extends Component{

    state={
        age:24
    }

    // 父组件更新引起子组件更新
    UNSAFE_componentWillReceiveProps(nextProps){
        console.log(0+"父组件更新了，子组件需要更新的数据", nextProps)
    }

    //1. 确认是否要更新数据
    shouldComponentUpdate(nextProps, nextState){
        // nextProps是父组件传给子组件的值，
        // nextState是数据更新之后的值
        console.log(1 + "是否渲染")
        console.log(nextProps,"是否渲染为",nextState)
        // 返回值决定是否 重新渲染
        return true
    }

    //2. 即将更新数据
    UNSAFE_componentWillUpdate(nextProps, nextState){
        console.log(2 + "预备渲染")
        console.log(nextProps,"开始渲染为",nextState)
    }
    
    //4. 数据更新完成 
    componentDidUpdate(nextProps, nextState){
        console.log(4+ "渲染完成")
        console.log(nextProps,"已经渲染为",nextState)
    }


    ageAdd=()=>{
        // 仍然需要解构赋值一次
        let {age} = this.state;
        age++;
        this.setState({
            age:age
        })
    }

    //3. 修改数据便会触发 render 方法
    render(){
        console.log(3 +"渲染中...")
        let {age} = this.state;
        let {name,changeMessage} = this.props;
        return (
            <div>
                <div className="name">姓名：{name} </div>
                <div className="age">年纪：{age} </div>
                <button onClick={changeMessage}>
                    中文名
                </button>
                <button onClick={()=>{
                    this.ageAdd()
                }}>
                    年龄增加
                </button>
            </div>
        )
    }

}

现阶段的 `React` 生命周期函数

挂载阶段

static getDerivedStateFromProps(props, state)
新增一个生命周期函数static getDerivedStateFromProps(props, state){}取代componentWillMount(){}
该生命周期函数执行时，更新阶段的生命周期函数componentWillUpdate(){}不能存在
必须返回 state，同时this在这里是没有的

    static getDerivedStateFromProps(props, state){
        // 组件接收的数据 props 记录当前组件的 state
        // 让组件在 props 变化时更新 state
        console.log(props)
        console.log(0+" static getDerivedStateFromProps 方法")
        // 必须返回 state
        return state
    }

数据更新阶段

首次加载
在这里插入图片描述
修改后渲染

componentWillUpdate
该生命周期函数执行时， static getDerivedStateFromProps(){} 不能存在
getSnapshotBeforeUpdate
该方法在 render() 之后，但是在输出到 DOM 之前执行
该函数的返回值将作为参数传递给下个生命周期函数
必须有返回值 prevState

    getSnapshotBeforeUpdate(prevProps, prevState){
        // 该函数的返回值将作为参数传递给下个生命周期函数
        console.log(3+" getSnapshotBeforeUpdate ",prevState)
        console.log(prevProps,prevState)
        // 必须有返回值 prevState
        return prevState
    }

componentDidMount
首次加载时触发

    componentDidMount(){
        console.log(4+ "仅在首次加载触发")
    }

componentDidUpdate
修改后组件加载完成

    componentDidUpdate(nextProps, nextState){
        console.log(4+ "修改后组件加载完成")
        console.log(nextProps,"已经渲染为",nextState)
    }

static getDerivedStateFromError
错误处理函数

    static getDerivedStateFromError(error, info){
        console.log(error)
        console.log(info)
    }

卸载阶段

componentWillUnmount

    componentWillUnmount(){
        console.log("卸载组件")
    }

完整的更新阶段子组件代码

import  React,{Component} from "react";
export default class Kids  extends Component{

    state={
        age:24
    }

    //1. 父组件更新引起子组件更新 
    // 该生命周期函数执行时， componentWillUpdate(){} 不能存在
    static getDerivedStateFromProps(props, state){
        // 组件接收的数据 props 记录当前组件的 state
        // 让组件在 props 变化时更新 state
        console.log(props)
        console.log(this)
        console.log(0+" static getDerivedStateFromProps 方法")
        // 必须返回 state
        return state
    }
    
    //2. 确认是否要更新数据
    shouldComponentUpdate(nextProps, nextState){
        // nextProps是父组件传给子组件的值，
        // nextState是数据更新之后的值
        console.log(1 + "是否渲染"," shouldComponentUpdate 方法")
        // console.log(nextProps,"是否渲染为",nextState)
        // 返回值决定是否 重新渲染
        return true
    }

    //2. 即将更新数据 
    // 该生命周期函数执行时， static getDerivedStateFromProps(){} 不能存在
    // componentWillUpdate(nextProps, nextState){
    //     console.log(2 + "预备渲染")
    //     // console.log(nextProps,"开始渲染为",nextState)
    // }

    // ❀ 该方法在 render() 之后，但是在输出到 DOM 之前执行
    getSnapshotBeforeUpdate(prevProps, prevState){
        // 该函数的返回值将作为参数传递给下个生命周期函数
        console.log(3+" getSnapshotBeforeUpdate ",prevState)
        console.log(prevProps,prevState)
        // 必须有返回值 prevState
        return prevState
    }

    ageAdd=()=>{
        // 仍然需要解构赋值一次
        let {age} = this.state;
        age++;
        this.setState({
            age:age
        })
    }

    //2. 修改数据便会触发 render 方法
    render(){
        console.log(2 +"渲染中...","组件开始挂载 rener 执行")
        let {age} = this.state;
        let {name,changeMessage} = this.props;
        return (
            <div>
                <div className="name">姓名：{name} </div>
                <div className="age">年纪：{age} </div>
                <button onClick={changeMessage}>
                    中文名
                </button>
                <button onClick={()=>{
                    this.ageAdd()
                }}>
                    年龄增加
                </button>
            </div>
        )
    }

    //4. 修改后组件加载完成
    componentDidUpdate(nextProps, nextState){
        console.log(4+ "修改后组件加载完成")
        console.log(nextProps,"已经渲染为",nextState)
    }
    //4. 首次加载时触发
    componentDidMount(){
        console.log(4+ "仅在首次加载触发")
    }
    
    //5. 卸载组件 
    componentWillUnmount(){
        console.log("卸载组件")
    }

    // 6 错误处理
    static getDerivedStateFromError(error, info){
        console.log(error)
        console.log(info)
    }
}