React学习（八）组件的生命周期（旧）

最新推荐文章于 2024-09-13 17:25:30 发布
最新推荐文章于 2024-09-13 17:25:30 发布
阅读量259 收藏 4
点赞数 4
分类专栏： React学习 文章标签： react.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52551375/article/details/135883568
版权

一.引出生命周期

1.组件生命周期

以下代码实现功能：
页面渲染出来，文字自动更改透明度至完全透明，不断重复，在点击按钮后，组件消失，生命周期结束
在这里插入图片描述

componentDidMount()// 组价挂载完毕调用，只调一次

// 组件将要卸载
componentWillUnmount()

// render调用的时机：初始化渲染，状态更新之后
render()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        // 挂载mount，卸载unmount
        // 生命周期回调函数=生命周期钩子函数=生命周期函数=生命周期钩子
        class Life extends React.Component {
            state={opacity:1}
            death = ()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            // 组价挂载完毕调用，只调一次
            componentDidMount(){
                this.timer = setInterval(()=>{
                    // 获取原状态
                    let {opacity} = this.state
                    // 改变
                    opacity -=0.1
                    if(opacity<=0) opacity = 1
                    // 设置新的透明度
                    this.setState({opacity})
                },200)
            }
            // 组件将要卸载
            componentWillUnmount(){
                // 清除定时器
                clearInterval(this.timer)
            }
            // render调用的时机：初始化渲染，状态更新之后
            render(){
                return (
                    <div>
                        <h2 style={{opacity:this.state.opacity}}>React学不会怎么办</h2>
                        <button onClick={this.death}>不活了</button>
                    
                    </div>


                )

            }
        }
        // 渲染
        ReactDOM.render(<Life/>,document.getElementById('test'))
    </script>
</body>
</html>

2.react生命周期（旧）：

流程图（旧）
在这里插入图片描述

（1）组件挂载时钩子

constructor：构造器，最先调用
componentWillMount:组件将要挂载时调用
render：组件初始化渲染，或状态更新时
componentDidMount:组件挂载完毕时调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        
        // 生命周期回调函数=生命周期钩子函数=生命周期函数=生命周期钩子
        class Count extends React.Component {
            // 1.构造器
            constructor(props){
                console.log("Count-constructor")
                super(props)
            // 初始化状态
                this.state ={count:0}
            }
            // 加1按钮回调
            add=()=>{
                // 获取原状态
                const{count}=this.state
                this.setState({count:count+1})
            }
            // 2.组件将要挂载的钩子
            componentWillMount(){
                console.log("Count-componentWillMount")
            }
            // 4.组件挂载完毕的钩子
            componentDidMount(){
                console.log("Count-componentDidMount")
            }
            //3. render调用的时机：初始化渲染，状态更新之后
            render(){
                console.log("Count-render")
                const {count}=this.state
                return (
                    <div>
                        <h2 >当前求和为:{count}</h2>
                        <button onClick={this.add}>点我加一</button>
                    
                    </div>
                )
            }
        }
        ReactDOM.render(<Count/>,document.getElementById('test'))
    </script>
</body>
</html>

结果：在这里插入图片描述

（2）组件更新时钩子及卸载组件

正常更新时钩子

卸载组件：ComponentwillUnmount
组件是否应该更新：shouldComponentUpdate(返回值为true时更新)
组件将要更新：componentWillUpdate
组件更新完毕：componentDidUpdate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        
        // 生命周期回调函数=生命周期钩子函数=生命周期函数=生命周期钩子
        class Count extends React.Component {
            // 1.1构造器
            constructor(props){
                console.log("Count-constructor")
                super(props)
            // 初始化状态
                this.state ={count:0}
            }
            // 加1按钮回调
            add=()=>{
                // 获取原状态
                const{count}=this.state
                this.setState({count:count+1})
            }
            // 卸载组件
            death=()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            // 1.2组件将要挂载的钩子
            componentWillMount(){
                console.log("Count-componentWillMount")
            }
            // 1.4组件挂载完毕的钩子
            componentDidMount(){
                console.log("Count-componentDidMount")
            }
            // 1.5组件将要卸载的钩子
            componentWillUnmount(){
                console.log("Count-componentWillUnmount")
            }
            // 2.1控制组件更新的阀门，默认返回值为真，返回值为真时可以更新，为假时状态不可以更新
            shouldComponentUpdate(){
                console.log("Count-shouldComponentUpdate")
                return true
            }
            // 2.2组件将要更新钩子
            componentWillUpdate(){
                console.log("Count-componentWillUpdate")
            }
            // 2.3组件更新完毕的钩子
            componentDidUpdate(){
                console.log("Count-componentDidUpdate")
            }
            //1.3 render调用的时机：初始化渲染，状态更新之后
            render(){
                console.log("Count-render")
                const {count}=this.state
                return (
                    <div>
                        <h2 >当前求和为:{count}</h2>
                        <button onClick={this.add}>点我加一</button>
                        <button onClick={this.death}>卸载组件</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Count/>,document.getElementById('test'))
    </script>
</body>
</html>

结果：点击卸载组件：在这里插入图片描述
更新组件
在这里插入图片描述

强制更新时钩子

shouldComponentUpdate返回值为false时也可以更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        
        // 生命周期回调函数=生命周期钩子函数=生命周期函数=生命周期钩子
        class Count extends React.Component {
            // 1.1构造器
            constructor(props){
                console.log("Count-constructor")
                super(props)
            // 初始化状态
                this.state ={count:0}
            }
            // 加1按钮回调
            add=()=>{
                // 获取原状态
                const{count}=this.state
                this.setState({count:count+1})
            }
            // 卸载组件
            death=()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            // 强制更新
            force=()=>{
                this.forceUpdate()
            }
            // 1.2组件将要挂载的钩子
            componentWillMount(){
                console.log("Count-componentWillMount")
            }
            // 1.4组件挂载完毕的钩子
            componentDidMount(){
                console.log("Count-componentDidMount")
            }
            // 1.5组件将要卸载的钩子
            componentWillUnmount(){
                console.log("Count-componentWillUnmount")
            }
            // 2.1控制组件更新的阀门，默认返回值为真，返回值为真时可以更新，为假时状态不可以更新
            shouldComponentUpdate(){
                console.log("Count-shouldComponentUpdate")
                return false
            }
            // 2.2组件将要更新钩子
            componentWillUpdate(){
                console.log("Count-componentWillUpdate")
            }
            // 2.3组件更新完毕的钩子
            componentDidUpdate(){
                console.log("Count-componentDidUpdate")
            }
            //1.3 render调用的时机：初始化渲染，状态更新之后
            render(){
                console.log("Count-render")
                const {count}=this.state
                return (
                    <div>
                        <h2 >当前求和为:{count}</h2>
                        <button onClick={this.add}>点我加一</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Count/>,document.getElementById('test'))
    </script>
</body>
</html>

结果：在这里插入图片描述

(3）父组件更新

 // 组件将要接收新的props的钩子,第一次调用props不算
 componentWillReceiveProps(props){
   console.log('B-componentWillReceiveProps',props)

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        
        // 生命周期回调函数=生命周期钩子函数=生命周期函数=生命周期钩子
        class Count extends React.Component {
            // 1.1构造器
            constructor(props){
                console.log("Count-constructor")
                super(props)
            // 初始化状态
                this.state ={count:0}
            }
            // 加1按钮回调
            add=()=>{
                // 获取原状态
                const{count}=this.state
                this.setState({count:count+1})
            }
            // 卸载组件
            death=()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            // 强制更新
            force=()=>{
                this.forceUpdate()
            }
            // 1.2组件将要挂载的钩子
            componentWillMount(){
                console.log("Count-componentWillMount")
            }
            // 1.4组件挂载完毕的钩子
            componentDidMount(){
                console.log("Count-componentDidMount")
            }
            // 1.5组件将要卸载的钩子
            componentWillUnmount(){
                console.log("Count-componentWillUnmount")
            }
            // 2.1控制组件更新的阀门，默认返回值为真，返回值为真时可以更新，为假时状态不可以更新
            shouldComponentUpdate(){
                console.log("Count-shouldComponentUpdate")
                return false
            }
            // 2.2组件将要更新钩子
            componentWillUpdate(){
                console.log("Count-componentWillUpdate")
            }
            // 2.3组件更新完毕的钩子
            componentDidUpdate(){
                console.log("Count-componentDidUpdate")
            }
            //1.3 render调用的时机：初始化渲染，状态更新之后
            render(){
                console.log("Count-render")
                const {count}=this.state
                return (
                    <div>
                        <h2 >当前求和为:{count}</h2>
                        <button onClick={this.add}>点我加一</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                    </div>
                )
            }
        }
        // 父组件
        class A extends React.Component {
            state = {carName:'奔驰'}
            changeCar=() => {
                this.setState({carName:'奥拓'})
            }
            render() {
                
                return(
                    <div>
                        
                        <div>我是A组件</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName}/>
                    </div>

                )
            }
        }
        class B extends React.Component {
            // 组件将要接收新的props的钩子,第一次调用props不算
            componentWillReceiveProps(props){
                console.log('B-componentWillReceiveProps',props)
            }
            // 组件是否更新的钩子
            shouldComponentUpdate(){
                console.log('B-shouldComponentUpdate')
                return true
            }
            // 组件将要更新的钩子
            componentWillUpdate(){
                console.log("B-componentWillUpdate")
            }
            // 组件更新完毕的钩子
            componentDidUpdate(){
                console.log("B-componentDidUpdate")
            }
            render() {
                console.log("B-render")
                return(
                        <div>我是B组件，接收到的车是：{this.props.carName}</div>
                )
            }
        }
        // 渲染组件
        ReactDOM.render(<A/>,document.getElementById('test'))
    </script>
</body>
</html>

结果：点击换车按钮后
加粗样式

3.总结生命周期（旧）

生命周期的三个阶段(I日)

1.初始化阶段: 由 ReactDOM.render（）触发—初次渲染

  1. constructor()
  2. componentWillMount()
  3. render()（必须使用）
  4. componentDidMount()（常用，一般在这个钩子中做一些初始化的事，例如：开启定时器，发送网络请求，订阅消息）

2.更新阶段: 由组件内部 this.setSate()或父组件重新 render 触发

  1. shouldComponentUpdate()
  2. componentWillUpdate()
  3. render()
  4. componentDidUpdate()
  5. 强制更新少1.

3.卸载组件:由 ReactDOM.unmountComponentAtNode()触发

  1. componentWillUnmount()（常用，一般做一些收尾的事，例如：关闭定时器，取消订阅消息）
qq_52551375
关注
专栏目录
ReactNative中组件的生命周期
02-25
RN组件的生命周期整理如下图：如图，可以把组件生命周期大致分为三个阶段：第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；第二阶段：是组件在运行和交互阶段，如图中左下...
老生常谈js-react组件生命周期
10-19
React组件生命周期是指React组件从创建、挂载到卸载的一个完整过程。在这个过程中，组件会经历不同的阶段，并且会调用一系列的方法，这些方法统称为生命周期方法。理解组件的生命周期对于构建高效、可维护的React...
React 组件生命周期
似水流年QC的博客
12-18 1632
componentDidMount（组件挂载）------ 一般在这个钩子中做一些初始化的工作，比如：开启定时器，发送网络请求，订阅消息。componentWillUnmount（组件销毁） ------ 一般在这个钩子中做一些收尾的工作，比如：关闭定时器，取消订阅消息。3. Unmounting（卸载阶段）------ 销毁一个组件，销毁前暴露出一个事件，让我们可以在组件销毁前做一些逻辑的处理。当子组件自身状态改变时，不会对父组件产生副作用的情况下，父组件不会进行更新，即不会触发父组件的生命周期。
React 组件的生命周期方法
My_wife_QBL的博客
08-04 1017
挂载（Mounting）：组件被创建并插入到 DOM 中。更新（Updating）：组件的状态或属性发生变化，导致组件重新渲染。卸载（Unmounting）：组件从 DOM 中删除。在每个阶段，React 提供了一些特定的生命周期方法，开发者可以在这些方法中执行自定义逻辑。React 组件的生命周期方法是控制组件行为的重要工具。了解这些方法的调用顺序以及如何在每个阶段执行特定操作，可以帮助开发者编写更加高效和可维护的代码。
React组件的生命周期函数
m0_71485750的博客
09-25 1万+
注意这个不常用不是我说的, 实在React官网中, 官方列举的。
React 之组件的生命周期
weixin_50828895的博客
02-24 1253
组件的生命周期一、生命周期概述二、生命周期的三个阶段1、创建阶段2、更新阶段3、卸载阶段 一、生命周期概述 生命周期： 组件从创建到加载运行再到不用卸载的整个过程就是生命周期 （创建 --> 加载运行 --> 卸载） 掌握组件生命周期有助于我们理解组件的运行方式，完成更复杂的功能，分析组件错位u原因以及解决错误 生命周期的每个阶段中都有一些方法调用，这些方法就是生命周期的钩子函数，钩子函数能够实现更多的功能 只有类组件才有生命周期 二、生命周期的三个阶段 1、创建阶段 执行时机：只要页面一经
React 生命周期详解与示例
热门推荐
聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
04-07 7万+
了解并正确使用React的生命周期，对于构建稳定、可维护的React应用具有重要意义。在实际开发中，我们需要根据需求合理选择生命周期方法，并在合适的时机执行相应的操作。同时，我们还需要注意React版本的变化，因为不同版本的React可能会对生命周期方法进行一些调整。
React体系06-React 组件的新旧生命周期
2402_85402030的博客
06-08 828
生命周期含义：从组件出生到更新、改变、销毁（创建\更新\销毁）的整个阶段。生命周期的钩子函数含义：组件的每个阶段都伴随着一些方法，就是生命周期的钩子函数,我们就是通过控制这些生命周期函数从而控制组件。生命周期意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因TIPS只有类组件才有生命周期。
React组件的生命周期
weixin_43512997的博客
05-11 5266
1. 组件生命周期概述 什么是组件的生命周期？ 组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程，这个过程就叫做组件的生命周期。react在组件的生命周期中提供了一系统的钩子函数，可以让开发者在函数中注入代码，这些代码会在适当的时候运行。为开发人员在不同阶段操作组件提供了时机。 注意：只有类组件才有生命周期。函数组件每次都是重新运行函数，旧的组件即刻被销毁 组件的生命周期主要包括哪几个阶段？ 组件的生命周期可以被分为3个阶段：挂载阶段、更新阶段、卸载阶段 以react旧的生命
React类组件的生命周期
qq_60292609的博客
11-09 1252
生命周期 生命周期：一个事物从创建到最后消亡经历的整个过程 组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程 意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等 ...
react中组件的生命周期函数
大口喝脉动的博客
07-27 1630
react中组件的生命周期函数主要分为三个阶段，分别为： 1.初始化阶段:由ReactDOM.render()触发---初次渲染 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount()=====>常用 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅...
React Class组件生命周期详解
qq_43293207的博客
05-23 2550
1. 旧版生命周期（v16.3之前） 组件挂载过程 （1） constructor() constructor 构造方法常用来初始化state constructor是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。 当存在constructor的时候必须手动调用super方法。如果在constructor中想使用this关键字，就必须先调用super方法。在constructor中如果要
浅谈React Native 中组件的生命周期
08-29
React Native 中的组件生命周期是指组件从创建到销毁的整个过程。组件生命周期可以分为三个阶段：组件第一次绘制阶段、组件在运行和交互阶段、组件卸载消亡的阶段。每个阶段都有其对应的生命周期回调函数，以便...
React中组件的生命周期 - 详解.png
08-05
React中组件的生命周期 - 详解
React中forwardRef()的作用？
专研技术的大学生
09-11 555
react中forwardRef( )的作用
Vue3 : ref 与 reactive
最新发布
qq_48597462的博客
09-13 515
1.当你需要响应式的基本数据类型时，使用ref。2.当你需要处理一个包含多个属性的对象，并且希望这些属性都是响应式的，使用reactive。3.ref和reactive都能够触发视图的自动更新，但它们在内部实现和适用场景上有所不同。
React18快速入门
buyue
09-11 298
点击按钮，我们发现页面中的divContent没有发生变化，为了实现这种变化需要引入。，这里以MacOS Node.js v22.6.0为例。使用WebStorm创建React项目，这里命名为。插件后，当访问基于React构建的网站时，将看到。需要先安装并配置React相关的工具和插件。文件，可以看到页面内容部分主要是通过加载。刷新浏览器可以看到新的修改页面。终端命令行检查是否安装成功。下载并安装WebStorm。文件查看如何运行该项目。
React 项目中，如何实现有效的内存管理和防止内存泄漏？
盼盼盼的博客
09-12 926
在 React 项目中，实现有效的内存管理和防止内存泄漏是确保应用性能和用户体验的关键。
React组件生命周期详解与实战经验
"React的生命周期是其核心特性之一，它描述了组件从创建到销毁的各个阶段，包括Mounting（挂载）、Updating（更新）和Unmounting（卸载）三个主要状态。在这些状态中，React提供了多个生命周期方法，允许开发者在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值