阶段巩固10-12

css3动画

transition属性，它允许我们在限定时间内将元素的某个属性值转换为另一个属性值。

语法：transition: 要变更的属性 持续事件 速度 延迟；

transform属性，它允许我们位移、旋转、缩放、倾斜元素。

它的值分别有：改变位置translate(200px,200px)；改变元素的大小倍数scale(1.6,2)；x轴和y轴的旋转角度skew(-45deg,45deg)；整体旋转角度rotate(45deg)。

div{
     width: 100px;
     height: 100px;
     background: greenyellow;
     transform: rotate(0deg);
     position: absolute;
     left: 100px;
     transition: all 5s ease;
 }
div:hover{
    background: red;
    left: 500px;
    /* translate 位置 scale 大小倍数 skew x轴和y轴的旋转角度 rotate 整体旋转角度 */
    transform: translate(200px,100px) scale(2,2)  skew(-45deg,45deg) rotate(45deg);
}

@keyframes关键帧属性，它定义一个动画名称，比如

@keyframes colorChange{
    0% {background-color: greenyellow;}
    50% {background-color:red ;}
    100% {background-color: greenyellow;}
} 

然后利用animation属性，把这个动画效果绑定到某个元素，或class类。

div{
    width: 100px;
    height: 100px;
    background: greenyellow;
    position: relative; 
    animation: colorChange 5s ease-in 1.5s infinite reverse;
    /* animation-name: colorChange;
    animation-duration: 5s;
    animation-timing-function: ease-in;
    animation-delay: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: reverse; */   
} 

应用：常见的一些用户交互，比如淘宝商品图，移入时，它会产生阴影和位移；页面加载时的动画效果。

vh、vw

length长度是用于表示尺寸的数据类型，vh、vw是length的一种单位。

vh表示视口的初始包含块的高度的1%；vw表示视口的初始包含块的宽度的1%。

自定义Hook

使用自定义Hook，是为了将组件逻辑提取到可复用的函数中。正所谓，重复是代码的一大罪恶之源。

自定义Hook本质上就是一个函式，但是其名称“必须”以use开头，它的内部可以调用其他的Hook。如果这个函数不是以use开头，React无法自动检查你的Hook是否违反了Hook的规则，也会报错：React Hook “useState” is called in function “某个函数名称” which is neither a React function component or a custom React Hook function。

实际开发中，不会一下子就构想出很多的复用逻辑，可能是随着开发进展，发现业务逻辑有重复，不想重复造轮子，便自定义Hook。

Hook规则

只在最顶层使用Hook。

不要在循环、条件或嵌套函数中调用Hook。遵守这条规则，就能确保Hook在每一次渲染中都按照同样的顺序被调用，这让 React 能够在多次的useState和 useEffect 调用之间保持 hook 状态的正确。（useState可以放在定时器里面，亲测有效）。

只在React函数中调用Hook。

可以在React的函数组件中调用Hook，也可以在自定义Hook中调用其他Hook，但不要在普通的JS函数中调用Hook，否则会报错。

JavaScript脑图

https://www.w3cschool.cn/javascript/javascript-skillmap.html#

匿名函数

简单理解就是没有名字的函数，常出现的场景：在js函数内return一个匿名函数，以回调函数的形式出现，将匿名函数赋值给一个变量，让匿名函数自执行。

MVC设计模式

引用一位大神的博客链接：

https://blog.csdn.net/m18718300471/article/details/79926126

个人理解：React常用的redux(并不是React专有)、Vue的Vuex(Vue专有)，其实就是MVC里面的Model，它用于管理一个项目的数据，然后有固定的操作方式去修改数据，比如redux里面的dispatch。

BOM

https://zhuanlan.zhihu.com/p/130995492