组件的生命周期(旧)组件的生命周期(旧) 组件从创建到死亡会经历一写特定的阶段 React组件中包含一系列钩子函数，会在

组件的生命周期(旧)

组件从创建到死亡会经历一写特定的阶段
React组件中包含一系列钩子函数，会在特定的时刻调用
定义组件时，会在特定的生命周期回调函数中，做的特点的工作

    <script type="text/babel">
        // 声明周期回调函数<=>生命周期钩子函数 <=> 生命周期函数 <=>生命周期钩子
        class Life extends React.Component{
            state = {opacity:1}
            death = ()=>{
                // 卸载组件
                ReactDOM.unmountComponentAtNode(document.querySelector('.test'))
            }
            // componentDidMount与render是兄弟
            // 组件挂载完毕
            componentDidMount(){
                this.timer=setInterval(()=>{
                    let {opacity} = this.state;
                    opacity-=0.1;
                    if(opacity<=0) opacity=1
                    this.setState({opacity})
                },200)
            }
            // 组件将要卸载
            componentWillUnmount(){
                // 清除定时器
                clearInterval(this.timer)
            }
            render(){
                return(
                    <div>
                        <h2 style={{opacity:this.state.opacity}}>React学不会怎么办？</h2>
                        <button onClick={this.death}>不活了</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Life/>,document.querySelector('.test'))
    </script>

生命周期的整个过程

初始化阶段：由ReactDOM.render()触发 ---初次渲染
1. constructor()
2. componentWillMount（）
3. render()
4. componentDidMount() ===>常用
  
  一般在这个钩子中做一些初始化的事情：例：开启定时器、发送网络请求、订阅消息
更新阶段：由组件内部this.setState()或父组件render触发
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() ===>必须使用的一个
4. componentDidUpdate()
卸载组件：由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount()
  
  一般在这个钩子中做一些收尾的事：例：关闭定时器、取消订阅消息代码演示：

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

    </div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签属性进行限制 -->
    <script src="./js/prop-types.js"></script>
    <script type="text/babel">
        class Count extends React.Component{
            // 构造器
            constructor(props) {
                console.log('Count---constructor');
                super(props);
                this.state={count:0}
            }
            // 加1按钮的回调
            add = ()=>{
                // 获取原状态
                const {count}=this.state;
                // 更新状态
                this.setState({count:count+1})
            }
            // 卸载组件按钮的钩子
            death = ()=>{
                ReactDOM.unmountComponentAtNode(document.querySelector('.test'))
            }

            // 强制更新按钮的回调
            force = ()=>{
                this.forceUpdate()
            }
            // 组件将要注载的钩子
            componentWillMount(){
                console.log('Count---componentWillMount');
            }
            
            // 组件注载完毕的钩子
            componentDidMount(){
                console.log('Count---componentDidMount');
            }
            
            // 组件将要卸载的钩子
            componentWillUnmount(){
                console.log('Count---componentWillUnmount');
            }
            
            // 控制组件更新的“阀门”
            shouldComponentUpdate(){
                console.log('Count---shouldComponentUpdate');
                return false;
            }
            
            // 组件将要更新的钩子
            componentWillUpdate(){
                console.log('Count---componentWillUpdate');
            }
            
            // 组件更新完毕的钩子
            componentDidUpdate(){
                console.log('Count---componentDidUpdate');
            }

            render(){
                console.log('Count---render');
                const {count}=this.state;
                return(
                    <div>
                    <h2>当前求和为：{count}</h2>    
                    <button onClick={this.add}>+1</button>
                    <button onClick={this.death}>卸载组件</button>
                    <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                    </div>
                )
            }
        }
        
        // 父组件A
        class A extends React.Component{
            state={num:'seven'}
            changeNum = ()=>{
                this.setState({num:'one'})
            }
            render(){
                return(
                    <div>
                        <div>我是A组件</div>    
                        <button onClick={this.changeNum}>切换</button>
                        <B number={this.state.num}/>
                    </div>
                )
            }
        }

        // 子组件B
        class B extends React.Component{
            // 组件将要接收新的props钩子
            componentWillReceiveProps(props) {
                console.log('B---componentWillReceiverProps');
            }

            shouldComponentUpdate(){
                console.log('B---shouldComponentUpdate');
                return true;
            }

            componentWillUpdate(){
                console.log('B---componentWillUpdate');
            }
            
            componentDidUpdate(){
                console.log('B---componentDidUpdate');
            }

            render(){
                console.log('B---render');
                return(
                    <div>我是B组件，我接受到的数字是：{this.props.number}</div>
                )
            }
        }

        ReactDOM.render(<A/>,document.querySelector(".test"))
    </script>
</body>
</html>

react生命周期(旧).png