本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。
【资料图】
react的生命周期函数有哪些？
react的生命周期函数（超详细）
话不多说，直接进入正题！
先来了解一下react的生命周期函数有哪些：
组件将要挂载时触发的函数：componentWillMount
组件挂载完成时触发的函数：componentDidMount
是否要更新数据时触发的函数：shouldComponentUpdate
将要更新数据时触发的函数：componentWillUpdate
数据更新完成时触发的函数：componentDidUpdate
组件将要销毁时触发的函数：componentWillUnmount
父组件中改变了props传值时触发的函数：componentWillReceiveProps
下面来上代码详细说明一下
一.挂载部分根据官方生命周期图我们可以看到，一个组件的加载渲染，首先是defaultProps和propsTypes，（这两个是什么下一篇会单独说，这里也不是重点） 然后就是constructor及this.state里的初始数据，所以到这里是第一步。接着就是componentWillMount 组件将要开始挂载了，这是第二步。然后组件挂载，render解析渲染，所以第三步呼之欲出，就是render数据都渲染完成，最后componentDidMount 组件挂载完成。
子组件代码，父组件内引入渲染即可（这里先不上代码）
import React ,{Component} from "react"class Smzq extends Component{constructor(props){console.log("01构造函数")super(props)this.state={}}//组件将要挂载时候触发的生命周期函数componentWillMount(){console.log("02组件将要挂载")}//组件挂载完成时候触发的生命周期函数componentDidMount(){console.log("04组件将要挂载")}render(){console.log("03数据渲染render")return(生命周期函数演示) }}export default Smzq登录后复制打开控制台查看
二.数据更新部分数据更新的话第一步是shouldComponentUpdate确认是否要更新数据，当这个函数返回的是true的时候才会进行更新，并且这个函数可以声明两个参数nextProps和nextState，nextProps是父组件传给子组件的值，nextState是数据更新之后值，这两个值可以在这个函数中获取到。第二步当确认更新数据之后componentWillUpdate将要更新数据，第三步依旧是render，数据发生改变render重新进行了渲染。第四步是componentDidUpdate数据更新完成。
代码的话子组件在上一部分的基础上，在this.state中定义一个初始数据，render中绑定一下这个数据，之后再增加一个按钮声明一个onClick事件去改变这个数据。这样可以看到数据更新部分的效果，我这里把第一部分的代码删掉了，看着不那么乱。
import React ,{Component} from "react"class Smzq extends Component{constructor(props){super(props)this.state={msg:"我是一个msg数据"}}//是否要更新数据，如果返回true才会更新数据shouldComponentUpdate(nextProps,nextState){console.log("01是否要更新数据")console.log(nextProps)//父组件传给子组件的值，这里没有会显示空console.log(nextState)//数据更新后的值return true;//返回true，确认更新}//将要更新数据的时候触发的componentWillUpdate(){console.log("02组件将要更新")}//更新数据时候触发的生命周期函数componentDidUpdate(){console.log("04组件更新完成")}//更新数据setMsg(){this.setState({msg:"我是改变后的msg数据"})}render(){console.log("03数据渲染render")return({this.state.msg}
) }}export default Smzq登录后复制三.单独说一下componentWillReceiveProps，父组件中改变了props传值时触发的函数这个函数也就是当我们父组件给子组件传值的时候改变了props的值时触发的函数，刚才在第二部分中也说到shouldComponentUpdate这个函数可以携带两个参数，nextProps就是父组件传给子组件的值 在父组件中定义一个初始title数据，写一个按钮声明一个onClick事件去改变这个title
四.componentWillUnmount组件将要销毁时的函数在父组件中定义一个flag为true的状态值，添加一个按钮声明一个onClick事件去 更改这个flag实现销毁组件。
父组件代码：
import React, { Component } from "react";import Smzq from "./components/Smzq"class App extends Component {constructor(props){super(props)this.state={flag:true,title:"我是app组件的标题"}}//创建/销毁组件setFlag(){this.setState({flag:!this.state.flag})}//改变titlesetTitle(){this.setState({title:"我是app组件改变后的title"})} render() { return ( {this.state.flag?:""} ); }}export default App;登录后复制子组件完整代码：
import React ,{Component} from "react"class Smzq extends Component{constructor(props){super(props)this.state={msg:"我是一个msg数据"}}//组件将要挂载时候触发的生命周期函数componentWillMount(){console.log("02组件将要挂载")}//组件挂载完成时候触发的生命周期函数componentDidMount(){//Dom操作，请求数据放在这个里面console.log("04组件挂载完成")}//是否要更新数据，如果返回true才会更新数据shouldComponentUpdate(nextProps,nextState){console.log("01是否要更新数据")console.log(nextProps)//父组件传给子组件的值，这里没有会显示空console.log(nextState)//数据更新后的值return true;//返回true，确认更新}//将要更新数据的时候触发的componentWillUpdate(){console.log("02组件将要更新")}//更新数据时候触发的生命周期函数componentDidUpdate(){console.log("04组件更新完成")}//你在父组件里面改变props传值的时候触发的函数componentWillReceiveProps(){console.log("父子组件传值，父组件里面改变了props的值触发的方法")}setMsg(){this.setState({msg:"我是改变后的msg数据"})}//组件将要销毁的时候触发的生命周期函数，用在组件销毁的时候执行操作componentWillUnmount(){console.log("组件销毁了")}render(){console.log("03数据渲染render")return(生命周期函数演示--{this.state.msg}--{this.props.title}
) }}export default Smzq登录后复制点击挂载/销毁生命周期函数组件这个按钮的时候 子组件消失，控制台打印：组件销毁了。
当父组件给子组件传值时
这里nextProps这个就有上图划红线的值了。 那么我们再点击改变app组件的title这个按钮
这里可以看到componentWillReceiveProps这个函数被触发了，nextProps这个值也发生了改变。
到这里就全部结束了，可能写的不够清晰，不知道有没有人能看完，over。
推荐学习：《react视频教程》
以上就是react的生命周期函数有哪些的详细内容，更多请关注php中文网其它相关文章！
