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

2023-10-07 18:14:01 浏览数 (2)

组件对象的生命周期

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

如下图所示:

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

透明度改变动画-实例

代码语言：javascript复制
<!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() ，只会执行一次

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

2、每次更新：state.this.setState() ，可以执行N次

  • componentWillUpdate() 将要更新回调
  • render() 更新，进行重新渲染
  • componentDidUpdate() 已经更新回调

3、移除组件：ReactDOM.unmountComponentAtNode(containerDOM)，只会执行一次

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

总的来说，有4个钩子比较重要：

  • render
  • componentDidMount
  • componentWillUnmount
  • componentWillReceiveProps

联想下 人的生命周期，从“出生-成长-死亡”，其实很类似这样的过程。

虚拟DOM与DOM Diff算法

DOM Diff 算法：只更新需要更新的部分。 虚拟DOM：在操作界面的过程中，界面是不会变的。

组件初始化过程：

  • 1、创建虚拟DOM树
  • 2、生成真实DOM树
  • 3、绘制界面显示

思考：更新时，如何做到最小化重绘：

  • 1、setState()更新状态
  • 2、重新创建虚拟DOM树
  • 3、新/旧树比较差异
  • 4、更新差异对应真实DOM
  • 5、局部进行重绘
diff dom 对象 生命周期 算法

0 人点赞