1 axios返回promise对象问题
打印了一下data,是个对象没问题,但是,async返回来的是一个Promise对象,即使你手动写了reutrn data,返回一个对象,async也是会包裹成一个Promise对象返回。故,你在外层想拿到数据时,有两种方法:
(1)
使用Promise对象的.then方法来获取数据。
(2)
因为返回来的是一个Promise对象,故在外层可以继续使用async await去获取。
如果不用async await ,直接LET DATA = 去获取,会拿到一个处于pedding状态的Promise对象,拿不到里面的数据。
2 styled-components结合ts问题
css in js,非常灵活,甚至可以在编写组件时,将变量传进来,利用react组件的state的数据来动态更新我们的样式。如图
如果不懂这个语法的可以去复习下styled-components这个库。
但是当我们用TS编写时,会显示错误,
提示我们这个props上面没有isPlaying属性,我们可以直接编写一个接口,赋予Props,表明,我们里面就是有这么一个属性,
这样编译器救不会报错了。
3传入组件的函数性能优化问题,
useCallback,会对传入的函数返回一个状态值,当依赖不变时,返回的值是一样的,我们知道,以前类组件时,只要调用setState函数,无论返回的state值前后是否相同,组件都会重新渲染,后来我们通过shouldComponentUpdate来比较前后的props和state,只要一样,那么就i返回false阻止渲染。现在函数组件useCallback也是同样道理,只不过该hook主要用于函数的缓存,当依赖的值不变,返回的函数都是一样的。那么这个函数传入给子组件,子组件的props不变,往往结合memo可以阻止子组件刷新,从而达到性能优化的效果.
但是注意,这个依赖的值,得写好,比如如果不写第一个参数,一开始是undefined,后面因为没有依赖,这个函数拿到的currentSong.dt都是undefined等等,所以依赖也得写好。