React 函数生命周期

　　　　　　　　　　　　　　　React 函数生命周期基础

1 ,概念

• 在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为组件的生命周期；*

2,组件生命周期分为三部分

　　1,在组件创建阶段

　　　　组件创建阶段的生命周期函数，有一个显著的特点：创建阶段生命周期函数在组件的一辈子中，只执行一次；

　　2,组件运行阶段

　　　　也有一个显著的特点，根据组件的state和props的改变，有选择性的触发0次或多次；

　　3,组件销毁阶段

　　　　也有一个显著的特点，一辈子只执行一次；

在程序运行的过程中，会自动执行的函数，被称为生命周期函数

记住常用的生命周期方法：

　　加载期

　　　　constructor()
​
　　　　componentWillMount()
​
　　　　render()
​
　　　　componentDidMount()

　　　更新期

　　　　componentWilUpdate()
​
　　　　render()
​
　　　　componentDidUpdate()

3，案例部分

 import React, { Component } from 'react'

 export class Demo extends Component {
     // 初始化数据
     constructor(props){
         super();
         console.log('construtor....在这里初始化数据')
         this.state = {
             list:[],//从数据库获取的数据
             num:0,
             isStart:false
         }
     }
     // 获取数据库数据
     componentWillMount(){
         console.log('componentWillMount....在这里使用Ajax获取数据');
     }
     // 向页面渲染数据
     render() {
         console.log('render....在这里生成DOM');
         return (
             <div>
                 <h3>数据展示：</h3>
                 <p>
                 <input type='checkbox' onChange={this.change.bind(this)} />
                 按钮是否可用
                 </p>
                 <button onClick={this.click.bind(this)}>更新数据</button>
                 <p>数据：{this.state.num}</p>
             </div>
         )
     }
     // 渲染后执行
     componentDidMount(){
         console.log('componentDidMount....向DOM中渲染数据');
     }

     //复选框点击事件
     change(e){
         this.setState({
             isStart:e.target.checked
         })
     }

     //按钮点击事件
     click(){
         console.log('更新数据....')
         let i = this.state.num;
         i++;
         this.setState({
             num:i
         });
     }
     // 判断是否更新state数据
     shouldComponentUpdate(){
         return this.state.isStart;
     }

     // 在组件接收到新的props或者state但还没有render时被调用
     componentWillUpdate(){
         console.log('componentWillUpdate....');
     }
     // 在组件完成更新后立即调用
     componentDidUpdate(){
         console.log('componentDidUpdate.....');
     }

 }

 export default Demo