React 初探 [五] React 组件的生命周期

最新推荐文章于 2024-01-16 22:12:03 发布

小智大愚

最新推荐文章于 2024-01-16 22:12:03 发布

阅读量156

点赞数

分类专栏： web 前端 react 文章标签： react

本文链接：https://blog.csdn.net/Sandy_zhi/article/details/107786273

版权

web 前端同时被 2 个专栏收录

90 篇文章 1 订阅

订阅专栏

react

9 篇文章 0 订阅

订阅专栏

说起生命周期，最先接触的是Andorid 开发中 Activity 和 Fragment 的生命周期，再者是Vue 组件，那么今天要梳理的是React 组件的生命周期，可见对生命周期的理解和掌握对组件化开发时非常重要的。

概述

生命周期是什么？生命周期就是指一个对象的生老病死，而此处的对象就是React 组件，组件的生命周期也就是从其创建到销毁的过程，而且在整个过程中，React 组件暴露出来了一些函数，在特定的阶段进行回调，我们称之为生命周期回调函数或者钩子函数，这些回调函数主要是给开发暴露了操作的入口，在某个特定的阶段可以做一些需要的操作。

主要钩子函数

constructor()
componentWillMount()
render()
componentDidMount()
componentWillUpdate()
componentWillUnmount()

主要执行过程

1、第一次初始化渲染显示：ReactDOM.render()

constructor() 创建对象初始化 state
componentWillMount() :将要插入的回调
render(): 用于插入虚拟DOM 回调
componentDidMount() 已经插入回调

2、每次更新state ：this.setState()

componentWillUpdate():将要更新回调
render() : 更新重新渲染

3、移除组件：ReactDOM.unmountComponentAtNode(containerDom)

componentWillUnmount() 组件将要被移除回调

小案例练习

需求：

让指定的文本做显示/隐藏的动画
切换时间为2s
点击按钮从界面中移除组件界面

gif图我还不会弄，所以效果把代码贴出来需要的自己跑起来看效果吧

code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件生命周期</title>
</head>

<body>
    <div id="example"></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.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        /* 
    需求 ：自定义组件 
    1、让指定的文本做显示/隐藏的动画
    2、切换时间为2s
    3、点击按钮从界面中移除组件界面
    */

    class Life extends React.Component{
        constructor(props){
            super(props)
            console.log('===constructor===')
            //初始化化状态
            this.state ={
                opacity:1
            }
            this.distoryComponent = this.distoryComponent.bind(this)
        }
        distoryComponent(){
            // 组件销毁也要把定时器销毁
            ReactDOM.unmountComponentAtNode(document.getElementById('example'))
        }
        render(){
            console.log('===render====')
            const {opacity} = this.state
            return (
                <div>
                    <h2 style={{opacity}}>{this.props.msg}</h2>
                    <button onClick={this.distoryComponent}>不活了</button>
                </div>
            )
        }
        componentWillMount(){
            console.log("===componentWillMount===")
        }
        componentDidMount(){
            console.log("===componentDidMount===")
            // 启动循环定时器
         this.intervalId =  setInterval(() => {
             let {opacity} = this.state
                opacity-=0.1
                if(opacity<=0){
                    opacity=1
                }
                this.setState({opacity})
            }, 200);
        }

        componentWillUpdate(){
            console.log("===componentWillUpdate===")
        }
        componentWillUnmount(){
            console.log('===componentWillUnmount===')
            clearInterval(this.intervalId)
        }
    }

    ReactDOM.render(<Life msg="react 太难了"/>,document.getElementById('example'))
    </script>
</body>

</html>

总结及注意：

代码中打印了钩子函数的调用顺序可以自己打印看效果
在组件对象销毁之前，有些不会销毁的对象要手动销毁，不然很容易造成内存泄漏，如定时器对象
需要公用的属性或者对象，可以定义在全局，定义在全局组件里如代码中的定时器对象。

小智大愚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 初探 [五] React 组件的生命周期

说起生命周期，最先接触的是Andorid 开发中 Activity 和 Fragment 的生命周期，再者是Vue 组件，那么今天要梳理的是React 组件的生命周期，可见对生命周期的理解和掌握对组件化开发时非常重要的。概述生命周期是什么？生命周期就是指一个对象的生老病死，而此处的对象就是React 组件，组件的生命周期也就是从其创建到销毁的过程，而且在整个过程中，React 组件暴露出来了一些函数，在特定的阶段进行回调，我们称之为生命周期回调函数或者钩子函数，这些回调函数主要是给开发暴露了操作.
复制链接

扫一扫

专栏目录