接口
网易云接口 还学要部署和安装才能访问数据 yarn add axios
接口请求到的数据,都是用redux来管理
引入依赖
- yarn add redux react-redux redux-thunk
- 创建store,第一个参数是reducer,第二个参数是加强
- 可以对reducer进行拆分,每个组件就可以单独维护自己的一份数据,再放入到reducer中
- 整个应用程序共享store,到App组件中
<Provide store = {store}>
内容
</Provide>
dispatch(函数-->getTopBannerAction())
const getTopBannerAction = () =>{
return dispatch => {
}
}
- useSelector 默认是不会返回的对象进行浅层比较,进行的是引用的比较吗?但是我们呢每次都是生成新的对象,那么就会每次的渲染,但是相关的依赖也没有发生变化,但是也渲染了,这样是不好的。
useSelector接收两个参数,第二个参数加上shallowEqual。我们是想进行的是浅层的比较
对于请求的数据我们是放到redux里面还是直接放在函数中,这个没有标准的答案,按照我们的想法放到合适的地方是最好的
const [albums,setAlbums] = useState([])
useEffect(() => {
getNameAlbums(10).then(res=>{
setAlbums(res.result)
})
},[])
如何达到项目的扩展性,还有修改的改变最小化,就连常量都要定义在另一个文件中。这样改变的话,都会全部的改变了。
还有就是提高用户体验,交互设计。
播放功能
思路到底是怎么样的呢? audio 的对象属性,对象方法
如何监听播放的进度
这个ref 有意思
什么时候用callback这个个hooks 如果不用的话,我们自定义组件上的一个函数时。当进行重绘的时候,这个组件也会进行重绘的。使用callback去告诉我们依赖谁,只有当我们的依赖改变的时候,我们才进行重绘
完犊子,我现在搞不清楚依赖是啥,组件为啥会更新,是时候会更新
React 项目部署
-
yarn build 比较小的图片会压缩成64base文件 外部的css单独一个文件,.map是映射文件,为防止报错信息
-
如果项目非常的庞大,那下载的东西到浏览器太久了呀。这样就好产生白屏的问题
-
如何进行优化->对我们的包进行拆减 那我们拆减的是哪个包呢?.chunk文件吧 我们希望呢拆减成多个js文件 然后呢?刚开始加载一些需要的js文件,点击组件另外需要的再进行加载 *那如何进行拆减呢?每个路由都对应的打包到独立js文件中,当进入到这个路由的时候再加载对应的文件。
-
一般我们都是这样做的,通过路由的划分,进行拆减。那怎么对路由进行拆分呢?使用路由的懒加载就可以了。用到的时候再加载 chunk 一块块意思 suspense fallbakc(应急措施)
-
打包的文件如何放到服务器里面