React的生命周期函数详解

import React,{Component} from "react";

import SonApp from './sonApp'



class App extends Component{

    state={

		hobby:'爱吃很多好吃的'

    }



    // 是否要更新数据，这里返回true才会更新数据

    shouldComponentUpdate(nextProps,nextState){

        console.log("app.js第一步：这里判断是否要更新数据")

        console.log(nextProps)  // 父组件传给子组件的值，这里没有会显示空

        console.log(nextState)  // 数据更新后的值

        return true             // 返回true，确认更新

    }



    // 更新数据时触发的生命周期函数

    componentDidUpdate(){

        console.log("app.js第四步：组件更新完成")

    }



    // 完成渲染即将被挂载在DOM中, 这会已经生成了新的DOM节点了，不过还有修改文档，你可以在这里去获取更新之前的文档

    getSnapshotBeforeUpdate(){

        console.log("app.js第四步：完成渲染即将被挂载在DOM中")

        return 11

    }



    setData = ()=>{

        this.setState({hobby:"你是猪吗？？？"})

    }



    render(){

        console.log("app.js第三步：数据渲染render")

        return (

                <div>

                    {this.state.hobby}

                    <button onClick={this.setData}>点击更新数据</button>

                    <SonApp value={this.state.hobby}></SonApp>

                </div>

        )

    };

}



export default App;

浏览器反馈

2. 挂载阶段

---

constructor(props)

类的构造函数，也是组件初始化函数，一般情况下，我们会在这个阶段做一些初始化的工作

• 初始化 state

• 处理事件绑定函数的 this(之前有过一篇React踩坑系列，其中的this指向就有用的这里去处理)

    constructor(props){

        super(props)

        console.log("第一步：构造函数")

    }

render

组件生命周期渲染阶段执行的函数

    render(){

        console.log("第三步：渲染render")

        return (

                <div>

                    我喜欢吃各种口味的广式月饼，除了水果味的！！！

                </div>

        )

    };

static getDerivedStateFromProps(props, state)

该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，它的存在只有一个目的：让组件在 props 变化时更新 state

    static getDerivedStateFromProps(props, state){

        console.log(props); // 接收到父组件传递过来的新的props

        console.log(state); // 组件当前的数据

        console.log("第二步：组件将要挂载");

        return state;   // 用户需要在这个函数中返回一个对象, 它将作为 setState() 中的 Updater 更新组件.

    }

componentDidMount()

在组件挂载后调用

    componentDidMount(){

        console.log("第四步：组件挂载完成")

    }

整体代码组成组件加载阶段

import React,{Component} from "react";



class App extends Component{

    constructor(props){

        super(props)

        console.log("第一步：构造函数")

    }

    state={

		hobby:'爱吃很多好吃的'

    }



    /**

     * 每次组件渲染前被调用,该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，

     * 它的存在只有一个目的：让组件在 props 变化时更新 state

     * */ 

    static getDerivedStateFromProps(props, state){

        console.log(props); // 接收到父组件传递过来的新的props

        console.log(state); // 组件当前的数据

        console.log("第二步：组件将要挂载");

        return state;   // 用户需要在这个函数中返回一个对象, 它将作为 setState() 中的 Updater 更新组件.

    }



    // 组件挂在完成时触发的生命周期函数

    componentDidMount(){

        console.log("第四步：组件挂载完成")

    }



    render(){

        console.log("第三步：渲染render")

        return (

                <div>

                    我喜欢吃各种口味的广式月饼，除了水果味的！！！

                </div>

        )

    };

}



export default App;

浏览器反馈

3. 销毁阶段

---

componentWillUnmount()

该方法会在组件卸载及销毁前调用，我们可以在这里做一些清理工作，如：组件内的定时器、未完成的请求等

    componentWillUnmount(){

        console.log("sonApp.js组件被销毁")

    }

完整版销毁组件代码

父组件

import React,{Component} from "react";

import SonApp from './sonApp'



class App extends Component{

    state={

		hobby:true

    }



    setData = ()=>{
#### 算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。



![](https://img-blog.csdnimg.cn/img_convert/c582a01373152bb4cd38bc6ad5cc8027.png)



**写在最后**

**最后，对所以做Java的朋友提几点建议，也是我的个人心得：**

1.  疯狂编程

2.  学习效果可视化

3.  写博客
4.  阅读优秀代码
5.  心态调整