第1.3章：生命周期函数

timg.jpg

生命周期函数：指在某一时刻，会自动执行的函数

生命周期分为四大部分
初始化。加载。更新。卸载

初始化

constructor(props) {
  super(props)

  this.state = {
     inputValue: '',
     list: ['a','b','c','b'],
  }

---

页面初次加载时，只执行一次的生命周期函数

render() {
    console.log('页面加载：render,页面加载时执行')
}


componentWillMount() {
    console.log('页面加载：componentWillMount,页面即将加载的时候，在render之前调用')
}
//例如：在页面加载之前，看看用户有没有登录啊


componentDidMount() {
    console.log('页面加载：componentDidMount,（装载完成）在render之后调用')
}
//例如： 在页面加载，加载一些Ajax网络的请求，3秒倒计时，进入首页啊

---

组件数据更新时执行的生命周期函数

start数据更新是有3个生命周期函数
props子组件数据更改时有4个函数 多一个componentWillReceiveProps函数写在子组件里

shouldComponentUpdate(nextProps, nextState) {
    if(nextProps.content !== this.props.inputValue) {
        return true;
    }else {
        return false;
    }
}
// 做性能优化的生命周期函数
// true就是要更新
// false就是不要更新


componentWillUpdate() {
    console.log('数据更新：如果shouldComponentUpdate返回ture，则执行componentWillUpdate、如果shouldComponentUpdate返回false，则不执行componentWillUpdate') 
}


componentDidUpdate() {
    console.log('数据更新：在组件数据更新之后，她会自动执行componentDidUpdate')
}


componentWillReceiveProps() {
    console.log('数据更新：componentWillReceiveProps函数只能在子组件里执行，执行条件1.改子组件接收了父组件参数、2.父组件的render函数执行，子组件这个函数才能执行')
}
// props子组件数据更改时使用

---

卸载

componentWillUnmount() {
    console.log('卸载：componentWillUnmount组件即将卸载时，执行')
}