react 项目实战(三)记录内容技巧

166 阅读3分钟

接口

网易云接口 还学要部署和安装才能访问数据 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(应急措施)

  • 打包的文件如何放到服务器里面