React生命周期函数

2019-01-09  本文已影响0人  路人_Ding

生命周期函数

  //组件挂载之前执行
  componentWillMount () {
    console.log("componentWillMount")
  }
  //组件挂载之后执行
  componentDidMount() {
    console.log("componentDidMount");
  }
  //组件更新之前会被执行
  shouldComponentUpdate() {
    console.log("shouldComponentUpdate")
    return true;
  }
 //组件跟新之前,它会自动执行,但是他在shouldComponentUpdate之后
  //如果shouldComponentUpdate返回true它才执行
  //如果shouldComponentUpdate返回false它就不执行
  componentWillUpdate() {
    console.log("componentWillUpdate")
  }
  //组件更新完成之后,才会被执行
  componentDidUpdate() {
    console.log("componentDidUpdate")
  }
  //一个组件要从父组件接受参数
  //如果这个组件第一次存在于父组件中,不会执行
  //如果这个组件之前已经存在于父组件,才会执行
  componentWillReceiveProps() {
    console.log("componentWillReceiveProps");
  }
    //当这个组件从页面中删除才会执行
    componentWillUnmount() {
        console.log("componentWillUnmount");
      }

生命周期函数性能优化

//当父组件的里的render被重新渲染后子组件需要判断要不要被从新渲染
    shouldComponentUpdate(nextProps,nextState) {
        if(nextProps.content !== this.props.content) {
            return true;
        }else{
            return false;
        }
    }

生命周期函数发送Ajax请求

首先先安装依赖
在项目的根目录下 :$ yarn add axios
improt axios from 'axios';
  componentDidMount() {
    axios.get('/app/todolist')
    .then(() => {alert('suscc')})
    .catch(() => { alert('erro')})
  }
上一篇下一篇

猜你喜欢

热点阅读