昨天学的hooks的两个函数,
useState
一个是 useState 他有两种初始化方式,1.是直接赋值,2.是通过回调函数来进行赋值,回调函数中可以写上你的逻辑判断,但是切记,回调函数中一定要加上return。 如果要更改值,切记useState是异步获取,如果想同步获取,就在修改的后面再加一个修改函数,里面放个回调函数,然后传递的值就是新改后的值。 代码如下: ` const [index,setIndex]=useState(值)
const [index,setIndex]=useState(()=>{ return 值 }) `
如果问为啥是异步而不是同步? 是因为如果一个事件多次进行修改值的操作,那么就会浪费性能,如果修改一个值多次,那么他就只执行最后一次,如果执行修改两个不同的值,他会合并成一次进行修改。
useEffect
首先,useEffect有两个参数,一个是回调函数,后面一个是依赖, 而useEffect他的主要作用其实就是模拟类组件中的生命周期,通过依赖的不同来模拟不同的生命周期, 例如:
挂载期
useEffect(()=>{
},[])
他模仿的就是componentDidMount,在代码渲染完成后运行,并且这个生命周期只执行一次,后续不再执行,
更新期
useEffect(()=>{
},[x])
他模仿的就是componentDidUpdate,监听x,在x发生改变后运行。并且[]可以存放多个值,如果注意如果后面的[]不加的话,就会每次页面有啥数据变动,他也会跟着运行,极易写成死循环,使用的时候注意。
卸载期
useEffect(()=>{
return ()=>{
}
},[x])
他模仿的就是componentWillUnmount,在x发生改变后运行,注意如果后面的[]不加的话,就会每次页面有啥数据变动,他也会跟着运行,极易写成死循环,使用的时候注意。
es6
多使用const定义因为const比正常的let 和 var运行速度会更快,而且const和let 有块级作用域,并且没有var那样的变量提升
小案例
在不定义第三个变量的情况下交换两个变量的值
let a=1;
let b=2;
[a:b]=[b:a]
这样就可以在不定义第三个值的情况下,交换两个变量的值了
es6数组解构
let arr=[1,2,3,4]
const [a1,...b1]=arr;
a=1,
b1=[2,3,4]
es6数组扁平化
arr.flat()//这个是主要的是降维,降维一级,从二维数组降维成一维数组,一个flat()降一级,如果你想直接无论几维数组都降维成一级数组那就再括号放一个叫 Infinity的属性, 代码如下:
arr.flat(Infinity)
es6如果进行创建数组元素数量为100
let arr=new Array(100); arr2.fill('');
去除空格
去除空格es6有个属性叫trim() 例如:
let str=" 张三 "
str.trim()
常用的数组方法
find
数组.find(()=>{
return true;
//会停止循环然后返回符合条件的这条数据
})
findIndex
数组.findIndex(()=>{
return true;
//会停止循环然后返回符合条件的这条数据的下标
})
forEach
数组.forEach(()=>{
//没有返回值,并且循环会一直进行到底
})
小练习
面试官问你如何让forEach停止循环?
答:1.在代码中添加break,使代码报错,forEach停止 2.使用throw new Error()抛出一个错误
动画
transform
transform:translate3D(x,y,z) scale(1) rotate(900deg) translate:这个是平移 scale:这个是放大缩小 rotate:这个是旋转 旋转单位和其他不太一样 他的单位是deg
transition
transition:名字 运行时间 运行状态