美文网首页
React生命周期函数

React生命周期函数

作者: 路人_Ding | 来源:发表于2019-01-09 16:28 被阅读0次

    生命周期函数

      //组件挂载之前执行
      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')})
      }
    

    相关文章

      网友评论

          本文标题:React生命周期函数

          本文链接:https://www.haomeiwen.com/subject/sasgrqtx.html