《React16免费基础视频教程》【2】

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

不return true 会报错

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

componentWillMount和componentDidMount这两个生命周期函数，只在页面刷新时执行一次，而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