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

桃扇骨 2023-03-05 03:26 5阅读 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() 组件将要被移除回调

### 小案例练习 ###

**需求：**

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

**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>

**总结及注意：**

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