React 初探 [五] React 组件的生命周期-蒲公英云

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

桃扇骨 2023-03-05 03:26 56阅读 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>