React技术栈-生命周期

　　　　　　　　　　　　　　　　　　　　React技术栈-生命周期

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

一.生命周期概述

1>.什么是生命周期

　　组件对象从创建到死亡它会经历特定的生命周期阶段

　　React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调

　　我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

2>.生命周期流程图

3>.生命周期详述

　　组件的三个生命周期状态:
　　　　* Mount：
　　　　　　插入真实 DOM
　　　　* Update：
　　　　　　被重新渲染
　　　　* Unmount：
　　　　　　被移出真实 DOM

　　React 为每个状态都提供了勾子(hook)函数
　　　　* componentWillMount()
　　　　* componentDidMount()
　　　　* componentWillUpdate()
　　　　* componentDidUpdate()
　　　　* componentWillUnmount()
 
　　生命周期流程:
　　　　第一次初始化渲染显示: ReactDOM.render()
　　　　　　* constructor(): 
　　　　　　　　创建对象初始化state
　　　　　　* componentWillMount() : 
　　　　　　　　将要插入回调
　　　　　　* render() : 
　　　　　　　　用于插入虚拟DOM回调
　　　　　　* componentDidMount() : 
　　　　　　　　已经插入回调
　　　　每次更新state: this.setSate()
　　　　　　* componentWillUpdate() : 
　　　　　　　　将要更新回调
　　　　　　* render() : 
　　　　　　　　更新(重新渲染)
　　　　　　* componentDidUpdate() : 
　　　　　　　　已经更新回调
　　　　移除组件:ReactDOM.unmountComponentAtNode(containerDom)
　　　　　　* componentWillUnmount() : 
　　　　　　　　组件将要被移除回调

4>.重要的钩子

　　render(): 
　　　　初始化渲染或更新渲染调用

　　componentDidMount(): 
　　　　开启监听, 发送ajax请求

　　componentWillUnmount(): 
　　　　做一些收尾工作, 如: 清理定时器

　　componentWillReceiveProps(): 
　　　　后面需要时讲

二.生命周期案例

1>.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>生命周期</title>
    </head>
    <body>
        <div id="box1"></div>
    </body>
    
    <!--导入 React的核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--导入提供操作DOM的react扩展库-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--导入解析JSX语法代码转为纯JS语法代码的库-->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--导入解析解析props属性的库-->
    <script type="text/javascript" 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("box1"))
            }
                
             //初始化定时器
            componentDidMount(){
                //启动循环定时器
                this.intervalId = setInterval(
                    function(){
                        console.log("定时器执行中......")
                        //解构opacity变量
                        let {opacity} = this.state
                        //修改opacity变量
                        opacity -= 0.1
                        if (opacity <= 0){
                            opacity = 1
                        }
                        //设置opacity变量
                        this.setState({opacity})
                    }.bind(this),
                    200
                )
            }
            
            
             
             //定时器消亡时要执行的操作
             componentWillUnmount(){
                //清理定时器
                clearInterval(this.intervalId)
            }
 
             //渲染
            render(){
                console.log("in render......")
                const {opacity} = this.state
                return (
                    /*注意，"style={{opacity:opacity}}"中的外面的大括号表示里面要写JS代码，而里面的大括号"{opacity:opacity}"表示一个对象哟~*/
                     <div>
                         <h1 style={{opacity:opacity}}>{this.props.msg}</h1>
                         <button onClick={this.distroyComponent}>不活了</button>
                     </div>
                )
            }
        }
        
        //2>.渲染组件标签
        ReactDOM.render(<Life msg="react太难了!"/>,document.getElementById("box1"))
        
    </script>
</html>

2>.浏览器打开以上代码渲染结果