使用React和Node.js制作音乐类App的一次总结

roygbip

2019-07-01

关注关注

一、技术选型

语言选择：
- JavaScript
- TypeScript
- 最终选择了JavaScript作为开发语言，一开始尝试使用TypeScript，但是由于是移动端，antd-mobile的库与TS有那么一些不兼容，官方文档上也没有像PC端那样推荐你使用TS，踩过坑，于是换回了JS。
开发环境 create-react-app 目前最好用的开发React环境
UI组件库的选择：
- Swiper.js 个人认为Swiper在对Vue的支持会更好，官方文档上也没有明确支持React
- antd-mobile阿里旗下的库，PC端的功能强大，但是更多使用场景是 TO-B ，这里只做尝试使用，个人觉得TO-C项目不建议使用，本项目中也仅仅使用到了一点点这个组件库的功能
- 图标库，Echarts Bizcharts G2 选择了 Bizcharts ，因为它对React组件化支持更好。
开发所需的包
- pubsub-js对state的管理的包
- react-router-dom路由
- antd-mobile官方推荐的按需加载配置
- less-loader对less的支持
Node.js端
- express框架(有考虑KOA2框架，但是鉴于express的成熟性没有选择)
- puppeteer爬虫获取数据的包
- ws模块，webSocket的使用
- request-promise-native，使用Node.js的服务器无跨域特性发送请求调用网易云音乐接口
版本控制工具，毫无疑问使用Git
包管理器，这里使用的是yarn，不是npm

技术选型对于后期迭代非常重要，个人建议大项目上TS和React。

二、项目所需要到的知识点

由于是在移动端，H5 , C3 ，事件处理还有性能优化考虑的问题要更多

基础知识点
- 主打音乐类APP,需要使用到的H5标签，<audio> <video>等
- C3技术，canvas,Animation等制作一些动画
- 对移动端的一些特殊情况，比如圆角过圆等的处理。
- JSX语法，比较基本的JSX语法一定是要非常熟练的
- ES5/6 TypeScript,为什么需要TS的知识？为了看懂源码，更好调试代码。
React知识点
- React的事件机制，原生事件和合成事件的触发哪个优先级更高，事件代理，事件派发是什么过程？
- setState的异步同步问题，其实就是上面的事件机制，这个问题遇到的还是非常多的，如果搞不懂，那么调试起来非常困难
- React中追求组件化，个人喜欢组件化到极致，这样方便调试，在使用TS和React配合时，调试真的非常简单
- prop-types限制传入的props的类型（隐约有TS的影子）
- 高阶函数的使用 React中对于大量的重复逻辑函数，使用函数柯里化给予默认参数和封装成高阶函数使用
- 高阶组件也是用得非常多，对于一些重复逻辑的组件，我们可以封装成高阶组件，即传入值是一个组件，返回的是一个新的组件。
- React V16版本的Fiber架构，跟之前的区别？新版本的执行render()时候，是分割成多个小任务，可取消中断的过程，配合原生JS的requestAnimationFrame（高优先级别的任务处理）和requestIdleCallback(低优先级别的任务处理),达到性能优化的目的。
- React的diff算法，三种diff模式：
  - Tree diff是优先对比两棵树的同级别DOM节点，所以尽量不要将DOM节点彻底删除，否则会让React的render()时间变长，具体在操作样式时候这点会非常明显，需要将一个元素隐藏时候如果display:none，如果切换显示和隐藏特别频繁，那么会出现闪屏。
  - Component diff是对组件的diff，其实我们可以通过shouldComponentUpdate的生命周期函数返回值控制组件是否重新渲染，它的两个参数是(nextProps,subState),返回值是ture则重新渲染组件，反之NO。
  - element diff，为什么在React中需要元素要有一个唯一的key值，因为底层的diff算法是四根指针，例如遍历两个元素 old element: A,C,B,D ； new element B,C,A,D 。如果没有唯一的key值，那么diff算法生成新的虚拟DOM节点过程是：发现第一个不一样，那么直接插入B,C,A,D ; 但是如果有唯一的key值，那么React的diff算法会发现，里面有一样的元素，那么：插入B，C不动，插入A，D不动。所以唯一的key值多重要？

三、移动端的不一样

滑动时页面警告

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
解决方法

* {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

事件点击穿透，禁止一个事件的默认行为，对其手指抬起事件绑定逻辑。
antd-mobile的按需加载需要配置更多，图标和功能也更少。
touches targettouches changedtouches的区别,处理一些复杂逻辑会用到
在对制作SPA单页面应用时，频繁切换的一些元素，做性能优化处理，利用上面提到的那些React知识点，不然很可能出现闪屏，用户体验感差。
在http通信时，如果要将返回的数据setState，那么请注意setState的同异步场景，准确把控渲染和设置状态时间差逻辑，特别是多个请求，可以使用`promise.all 或者在setState的回调函数中发送请求，定时器把控时间。

比如下面这段代码，需要发送10个请求并且将返回的数据整合，再把数组中的10个promise对象的值取出，设置成状态重新渲染。

`首先在生命周期函数componentDidMount中  this.createSrc() 调用`
 reqMvList=() => {
        const {data, src}=this.state;
        const MvList=data.map(async item => {
            const result=await reqMv(item.id)
            const {data: {brs}}=result;
            return brs[480]
        })
        return MvList
    }
    `调用createSrc函数后会先调用reqMvList函数，拿到结果`
    createSrc=() => {
        const result=this.reqMvList()
        let arr=[]
        result.forEach(item => {
            item.then(res => {
                arr=[res, ...arr]
                return res
            })
        })
        `上面将得到的10个promise对象中的值全部取出放到数组中`
        setTimeout(() => {
            this.setState({
                src:arr
            })
        }, 1000);
    }
        `如果此时不加定时器，那么会先执行setState的代码，再去执行promise.then里面的逻辑，
        那么其实状态已经更新完了，但是数据是后面添加到arr中的，所以会出现状态里面没有值的情况，
        这里需要加一个定时器解决。`