【React】归纳篇（六）组件对象的生命周期 | 实例 | 虚拟DOM与DOM Diff算法

前端修罗场

发布于 2023-10-07 18:14:00

20100

代码可运行

文章被收录于专栏：Web 技术Web 技术

运行总次数：0

代码可运行

组件对象的生命周期

组件对象的生命周期，指的是从组件对象产生到销毁的过程。

如下图所示:

生命周期的回调函数：你定义了，你没有调用，但是这个函数却执行了。如render()函数。也称为生命周期的“钩子函数”。

透明度改变动画-实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="test1"></div>


    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>

    <script type="text/babel">
    //1、定义类组件
    class Life extends  React.Component {
        constructor(props) {
            super(props);
            //初始化状态
            this.state = {
                opacity: 1
            }
            this.distroyComponent = this.distroyComponent.bind(this);
        }
        distroyComponent() {
            ReactDOM.unmountComponentAtNode(document.getElementById('test1'));
            
        }
        
        componentDidMount() {
            //启动循环定时器
            this.id_interval = setInterval(function(){
                console.log(1);
                let {opacity} = this.state;
                opacity -= 0.1;
                if(opacity<=0){
                    opacity = 1;
                }
                this.setState({opacity});
            }.bind(this),200)
        }
        componentWillUnmount() {//组件将被卸载前触发
            clearInterval(this.id_interval);
        }
        render() {
            const {opacity} = this.state;
            //{{对象}}与{JS代码}的区别
            return (
                <div>
                    <h2 style={{opacity:opacity}}>{this.props.msg}</h2>
                    <button onClick={this.distroyComponent}>Click Me to unmount the component</button>
                </div>
            )
        }
    }
    //2、渲染组件
    ReactDOM.render(<Life msg="组件对象的生命周期"/>,document.getElementById('test1'));
    </script>
</body>
</html>

小结下，组件对象的生命周期流程分为3个阶段：

1、第一次初始化渲染显示：ReactDOM.render() ，只会执行一次