什么是生命周期

在React中，生命周期函数是指在组件的不同阶段自动调用的特定方法，这些方法允许开发者在组件的特定生命周期点执行代码。React的生命周期可以分为几个主要阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting）和错误边界（Error Boundaries）。本次我们主要介绍挂载和更新。

React框架的引入

1. 右键文件打开命令行 输入npm init vite

1. 输入项目名称

1. 上下选择React

2. 选择JavaScript

1. 这是运行和下载React框架需要输入的命令行

1. 输入npm run dev

• 准备工作完成了，基于vite的React框架已经搭好

文件的修改

• 我们直接删除src目录下App.jsx文件的所有内容，因为App.jsx是入口文件，在里面写的内容会直接被获取。

1. 首先在入口文件里写组件的基本内容

这是React组件的基本框架，只要创建了一个新组件，里面就必须有这个语法

const App = () =>{
  return (
    <div className="container">

    </div>
  )
}

export default App

1. 我们创建一个组件，作为App.jsx的子组件

• 这两句代码的意思是在当前文件中，引入当前文件夹中的components文件夹里的AppHeader文件作为子组件，这是组件化中必不可少的。

import AppHeader from './components/AppHeader'
    <AppHeader />

import AppHeader from './components/AppHeader'
const App = () =>{
  return (
    <div className="container">
      <AppHeader />
    </div>
  )
}

export default App

• 给子组件传参

1. 用extends继承React中自带的Component类
2. 从子组件获取name并用 const {name} = this.props;实例化

import {Component} from 'react';
class AppHeader extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        // 不推荐在此处直接修改 state 或调用 setState

    }

    render(){
        const {name} = this.props;
        return(
        <div className="app-header">
            <h1 className="title">{name}</h1>
        </div>
        )
    }
}

export default AppHeader;

• 这是页面的效果

• 我们又学会了获取父组件参数的方法

1. 接下来在this.state 中添加我们想要添加的实例对象，在这里我就添加一个简单的表情

import {Component} from 'react';
class AppHeader extends Component {
    constructor(props) {
        super(props);
        this.state = {
            emoji:'😊'
        };
        // 不推荐在此处直接修改 state 或调用 setState

    }

1. 挂载生命周期函数 componentDidMount(){}

• 里面套用了setState()函数，可以在动态更新状态，利用三元运算符在笑脸和哭脸之间，每过一秒钟换一次

    componentDidMount(){
        setInterval(()=>{
            this.setState({
                emoji:this.state.emoji === '😊' ? '😂' : '😊'
            })
        },1000)
    }

1. 由于性能问题和可读性，我们在全局定义单独的函数用来存放表情的改变方法

import {Component} from 'react';
class AppHeader extends Component {
    constructor(props) {
        super(props);
        this.state = {
            emoji:'😊'
        };
        // 不推荐在此处直接修改 state 或调用 setState
    }
    componentDidMount(){
        setInterval(()=>this.changeEmoji,1000)
    }

    changeEmoji = () => {
        // Component 内置方法
        this.setState({
            emoji:this.state.emoji === '😊'?'😔':'😊',
            count:this.state.count + 1
        })
    }
    render(){
        const {name} = this.props;
        const {emoji} = this.state;
        return(
        <div className="app-header">
            <h1 className="title">{name} + {emoji}</h1>
        </div>
        )
    }
}

export default AppHeader;

1. 添加更新函数componentDidUpdate(){}

• 可以看到状态

    componentDidUpdate(){
      console.log('update',this.state.emoji);
    }

1. 最后添加个数字可以更加直观

import {Component} from 'react';
class AppHeader extends Component {
    constructor(props) {
        super(props);
        this.state = {
            emoji:'😊',
            count:0
        };
        // 不推荐在此处直接修改 state 或调用 setState
    }
    componentDidMount(){
        setInterval(()=>this.changeEmoji(),1000)
    }
    componentDidUpdate(){
        console.log('update',this.state.emoji,this.state.count);
    }
    changeEmoji = () => {
        // Component 内置方法
        this.setState({
            emoji:this.state.emoji === '😊'?'😔':'😊',
            count:this.state.count + 1
        })
    }
    render(){
        const {name} = this.props;
        const {emoji} = this.state;
        const {count} = this.state;
        return(
        <div className="app-header">
            <h1 className="title">{name} + {emoji} +{count}</h1>
        </div>
        )
    }
}

export default AppHeader;

• 非常直观

结语

这就是React中生命周期函数使用方法 可以自己动手操作一下，效果会更好