React组件生命周期函数

这里我们讲一下React中有哪些生命周期函数，其中就包含了jsx文件执行前中后要执行的方法（也可以叫做函数）。

constructor

constructor函数是构造函数，用来继承父类或者在文件执行前所要执行的操作，例如初始化变量，继承父类的某些数据或方法...

举个例子：

constructor(){
        console.log("HelloWorld constructor")
        super()
        this.state = {
            message:"Hello World"
        }
}

以上代码在构造函数中在控制台打印输出了HelloWorld constructor,然后supper()函数继承了父类中constructor中默认的参数或方法，this.state则是定义了一个状态变量message，就是在每次文件执行时都将message修改为Hello World

render

render函数我们比较熟悉了，前面已经用过，这个函数是渲染的意思，是用来渲染最后生成的页面的。如下面代码所示：

render(){
    console.log("HelloWorld render")
    const { message } = this.state
    return (
            <div>
                <h2>{ message }</h2>
                <p>{message} 是程序员的第一个代码</p>
                <button onClick={e => this.changeText()}>修改文本</button>
            </div>
    )
}

这里的代码还是先在控制台打印输出一段内容：HelloWorld render，然后将在constructor定义的message解构出来，然后用<h2>标签包裹输出到页面上，在react中我们用小胡子语法也就是{}来解析变量,接着还有一个button按钮还可以触发方法changeText,方法的内容如下所示：

changeText(){
        this.setState({message:"你好，世界"})
}

从上面可以看出，在React中我们使用this.setState来修改变量的值。在这里我们要注意this的指向问题，如果有不懂可以看：函数中的this指向

componentDidMount

componentDidMount是表示组件已被渲染到dom中，被挂载到DOM上，这里就不得不提一下在React中如何引入组件相关的内容了。
那么如何引入组件呢？在React中非常简单import HelloWorld from "./HelloWorld";直接导入文件就行，那么我们如何控制组件的显示隐藏呢？

那就非常简单了，如下代码：

{ isShowHW && <HelloWorld /> }

看到了吗？就是这么简单，加一个变量，我们只需要改变isShowHW的值是不是为真就行。是不是比Vue方便多了。像Vue2版本中还要在Components中定义，那样做确实比较容易忘记。虽然Vue3也做了简化，但是忘不了之前的操作！

componentDidUpdate

componentDidUpdate函数是组件的DOM被更新完成，常用在点击按钮方法修改变量上，会有几个参数，其中包括新dom和旧dom，如下面代码：

componentDidUpdate(prevProps,prevState,snapshot){
        console.log("HelloWorld componentDidUpdate:",prevProps,prevState,snapshot)
}

当我们点击修改文本之后，控制台就会打印输出：HelloWorld componentDidUpdate:    {}    {message: 'Hello World'}    {scrollPosition: 1000}

prevProps（上一个状态的props），prevState（上一个状态），以及snapshot（一个可选参数，由getSnapshotBeforeUpdate生命周期方法返回，用于在DOM更新前捕获一些信息）。

componentWillUnmount

componentWillUnmount是组件从DOM中卸载掉或从DOM移除掉才会触发的事件，比如我们这个组件被隐藏或者移除的时候就会触发，代码如下所示：

componentWillUnmount(){
        console.log("HelloWorld componentWillUnmount")
    }

当前组件被隐藏的时候，控制台就会输出HelloWorld componentWillUnmount;

shouldComponentUpdate(不常用)

用于在组件接收到新的props或state之前，决定该组件是否应该重新渲染。这个方法接收两个参数：nextProps（即将接收的props）和nextState（即将更新的state）。

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate是一个生命周期方法，它在最近一次渲染输出（提交到DOM节点）之前被调用。这个方法的主要目的是允许组件在DOM即将发生变化之前捕获一些信息（通常与DOM相关），这个信息随后可以作为第三个参数传递给 componentDidUpdate 方法。

最后我们附上这里面的所有代码，如下所示：
App.jsx

import React from "react";
import HelloWorld from "./HelloWorld";

class App extends React.Component{
    constructor(){
        super()
        this.state = {
            isShowHW:true
        }
    }
    
    switchHWShow(){
        this.setState({ isShowHW:!this.state.isShowHW })
    }
    
    render(){
        const { isShowHW } = this.state
        
        return (
            <div>
                哈哈哈
                <button onClick={e => this.switchHWShow()}>切换</button>
                { isShowHW && <HelloWorld /> }
            </div>
        )
    }
}

export default App

HelloWorld.jsx

import React from "react";

class HelloWorld extends React.Component {
    /* 1.构造方法：constructor */
    constructor(){
        console.log("HelloWorld constructor")
        super()
        
        this.state = {
            message:"Hello World"
        }
    }
    
    changeText(){
        this.setState({message:"你好，世界"})
    }
    
    // 2.执行render函数
    render(){
        console.log("HelloWorld render")
        const { message } = this.state
        
        return (
            <div>
                <h2>{ message }</h2>
                <p>{message} 是程序员的第一个代码</p>
                <button onClick={e => this.changeText()}>修改文本</button>
            </div>
        )
    }
    
    // 3.组件被渲染到DOM：被挂载到DOM
    componentDidMount(){
        console.log("HelloWorld componentDidMount")
    }
    
    // 4.组件的DOM被更新完成：DOM发生更新
    componentDidUpdate(prevProps,prevState,snapshot){
        console.log("HelloWorld componentDidUpdate:",prevProps,prevState,snapshot)
    }
    // 5.组件从DOM中卸载掉：从DOM移除掉
    componentWillUnmount(){
        console.log("HelloWorld componentWillUnmount")
    }
    
    // 不常用的生命周期补充
    shouldComponentUpdate(){
        return true
    }
    
    getSnapshotBeforeUpdate(){
        console.log("getSnapshotBeforeUpdate")
        return {
            scrollPosition:1000
        }
    }
}
export default HelloWorld

感谢大家观看，我们下次见