第1.3章:生命周期函数

2019-05-13  本文已影响0人  赵羽珩
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组件即将卸载时,执行')
}
上一篇 下一篇

猜你喜欢

热点阅读