zoukankan      html  css  js  c++  java
  • 《React16免费基础视频教程》【2】

     
     https://jspang.com/detailed?id=46#toc265

     

     不return true 会报错

     改为 return false ,则 render 函数并不执行

    componentWillMountcomponentDidMount这两个生命周期函数,只在页面刷新时执行一次,而render函数是只要有state和props变化就会执行,这个初学者一定要注意。

     

     

     

     

    而且还执行了两遍

    shouldComponentUpdate函数

    shouldComponentUpdate函数会在组件更新之前,自动被执行。比如写入下面的代码:

    shouldComponentUpdate(){
        console.log('shouldComponentUpdate---组件发生改变前执行')
    }
    

    它要求返回一个布尔类型的结果,必须有返回值,这里就直接返回一个true了(真实开发中,这个是有大作用的)。

    shouldComponentUpdate(){
        console.log('shouldComponentUpdate---组件发生改变前执行')
        return true
    }

    现在就可以在控制台console里看到结果了,并且结果是每次文本框发生改变时都会随着改变。如果你返回了false,这组件就不会进行更新了。 简单点说,就是返回true,就同意组件更新;返回false,就反对组件更新。

    componentWillUpdate函数

    componentWillUpdate在组件更新之前,但shouldComponenUpdate之后被执行。但是如果shouldComponentUpdate返回false,这个函数就不会被执行了。

    //shouldComponentUpdate返回true才会被执行。
    componentWillUpdate(){
        console.log('componentWillUpdate---组件更新前,shouldComponentUpdate函数之后执行')
    }

    componentDidUpdate

    componentDidUpdate在组件更新之后执行,它是组件更新的最后一个环节。

    componentDidUpdate(){
        console.log('componentDidUpdate----组件更新之后执行')
    }

    为了方便我们看出结果,可以在每个函数前加上序号。最后我们可以看到控制台输出的结果如下:

    1-shouldComponentUpdate---组件发生改变前执行
    2-componentWillUpdate---组件更新前,shouldComponentUpdate函数之后执行
    3-render----开始挂载渲染
    4-componentDidUpdate----组件更新之后执行

    结果和我们写的顺序也是相对的,讲到这里,你一定对React的生命周期函数有了比较直观的了解了。

    componentWillReceiveProps 函数

    我们可以先在Xiaojiejie.js组件里写下这个函数,例如下面的代码。

    componentWillReceiveProps(){
        console.log('componentWillReceiveProps')
    }

    这时候会发现函数什么时候都不会被执行,因为Xiaojiejie.js算是一个顶层组件,它并没接收任何的props。可以把这个函数移动到XiaojiejieItem.js组件中。

    凡是组件都有生命周期函数,所以子组件也是有的,并且子组件接收了props,这时候函数就可以被执行了。

    componentWillReceiveProps(){
            console.log('child - componentWillReceiveProps')
        }

    这个时候再预览,就会看到componentWillReceiveProps执行了。那现在可以总结一下它的执行时间了。

    子组件接收到父组件传递过来的参数,父组件render函数重新被执行,这个生命周期就会被执行。

    • 也就是说这个组件第一次存在于Dom中,函数是不会被执行的;
    • 如果已经存在于Dom中,函数才会被执行。

    这个生命周期算是比较复杂的一个生命周期,需要我们花点时间去消化。

    这节课就把updation里的生命周期函数都讲过了,下节课会把剩下的一点Unmounting讲了,然后会讲一下生命周期的实际应用。

     
       

     

     

     

     

     

     

     

     

     

     

     

    keyframes动画介绍

    此属性与animation属性是密切相关的,keyframes译成中文就是关键帧,我最早接触这个关键帧的概念是字flash中,现在Flash已经退出历史舞台了。他和transition比的优势是它可以更加细化的定义动画效果。比如我们设置上节课的按钮隐藏动画,不仅可以设置透明度,还可以设置颜色。

    @keyframes hide-item{
        0% {
            opacity:1;
            color:yellow;
        }
        50%{
            opacity: 0.5 ;
            color:red;
        }
        100%{
            opacity:0;
            color: green;
        }
    }

    这就算是你的动画制作好了,但是动画还没有使用。

    使用动画

    使用动画的关键词是animation,然后后边跟上你的制作的动画名称,如下面这段代码。

    .hide{ animation:hide-item 2s ease-in ; }

    这句的意思就是,使用hide-item动画,持续时间是2秒钟,然后缓动效果是由慢到快(开始的时候慢,之后快)。

    但是你会发现,动画执行一遍后又恢复了原状,这个是因为没设置forwards属性,它是用来控制停止到最后一帧的。 我们把代码改写成下面的样子。

    .hide{ animation:hide-item 2s ease-in forwards; }

    完整代码的实现

    keyframes的动画已经基本学会了,接下来就把所有的代码修改为keyframes的形式吧。所有代码如下:

    .show{ animation:show-item 2s ease-in forwards; }
    .hide{ animation:hide-item 2s ease-in forwards; }
    
    @keyframes hide-item{
        0% {
            opacity:1;
            color:yellow;
        }
        50%{
            opacity: 0.5 ;
            color:red;
        }
        100%{
            opacity:0;
            color: green;
        }
    }
    
    @keyframes show-item{
        0% {
            opacity:0;
            color:yellow;
        }
        50%{
            opacity: 0.5 ;
            color:red;
        }
        100%{
            opacity:1;
            color: green;
        }
    }

    总结:keyframes也是只能实现很简单的动画效果,一些复杂的动画最好还是使用别人造好的轮子,下节课继续学习React中的动画吧。

     
       

    transitionGrop动画略了

    接下来是 Redux

  • 相关阅读:
    刷题总结——table(ssoi)
    算法复习——差分约束(ssoi种树)
    刷题总结——谈笑风生(主席树+dfs序的应用)
    刷题总结——序列操作(权值线段树套树状数组)
    刷题总结——shortest(ssoi)
    算法总结——主席树(poj2104)
    刷题总结——路径(ssoi)
    刷题总结——鸭舌(ssoi)
    刷题总结——电影(ssoi)
    刷题总结——随机图(ssoi)
  • 原文地址:https://www.cnblogs.com/cx2016/p/13177958.html
Copyright © 2011-2022 走看看