资讯专栏INFORMATION COLUMN

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

edgardeng / 3120人阅读

摘要:在通信时,如果要将返回的数据,那么请注意的同异步场景,准确把控渲染和设置状态时间差逻辑,特别是多个请求,可以使用或者在的回调函数中发送请求,定时器把控时间。

一、技术选型

语言选择:

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-jsstate的管理的包

react-router-dom路由

antd-mobile官方推荐的按需加载配置

less-loader对less的支持

Node.js端

express框架(有考虑KOA2框架,但是鉴于express的成熟性没有选择)

puppeteer爬虫获取数据的包

ws模块,webSocket的使用

request-promise-native,使用Node.js的服务器无跨域特性发送请求调用网易云音乐接口

版本控制工具,毫无疑问使用Git

包管理器,这里使用的是yarn,不是npm

技术选型对于后期迭代非常重要,个人建议大项目上TSReact
二、项目所需要到的知识点
由于是在移动端,H5 , C3 , 事件处理还有性能优化考虑的问题要更多

基础知识点

主打音乐类APP,需要使用到的H5标签,

C3技术,canvas,Animation等制作一些动画

对移动端的一些特殊情况,比如圆角过圆等的处理。

JSX语法,比较基本的JSX语法一定是要非常熟练的

ES5/6 TypeScript,为什么需要TS的知识? 为了看懂源码,更好调试代码。

React知识点

React的事件机制,原生事件和合成事件的触发哪个优先级更高,事件代理,事件派发是什么过程?

setState的异步同步问题,其实就是上面的事件机制,这个问题遇到的还是非常多的,如果搞不懂,那么调试起来非常困难

React中追求组件化,个人喜欢组件化到极致,这样方便调试,在使用TSReact配合时,调试真的非常简单

prop-types限制传入的props的类型(隐约有TS的影子)

高阶函数的使用 React中对于大量的重复逻辑函数,使用函数柯里化给予默认参数和封装成高阶函数使用

高阶组件也是用得非常多,对于一些重复逻辑的组件,我们可以封装成高阶组件,即传入值是一个组件,返回的是一个新的组件。

React V16版本的Fiber架构,跟之前的区别? 新版本的执行render()时候,是分割成多个小任务,可取消中断的过程,配合原生JSrequestAnimationFrame(高优先级别的任务处理)和requestIdleCallback(低优先级别的任务处理),达到性能优化的目的。

Reactdiff算法,三种diff模式:

Tree diff是优先对比两棵树的同级别DOM节点,所以尽量不要将DOM节点彻底删除,否则会让Reactrender()时间变长,具体在操作样式时候这点会非常明显,需要将一个元素隐藏时候如果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中的,所以会出现状态里面没有值的情况,
        这里需要加一个定时器解决。`
本次构建过程中涉及到的一些面试题

http的ajax轮询 长轮询 keep-alive 和webSocket的区别

如何将一个元素从页面上隐藏 根据场景需求,配合React的Fiber和diff算法机制使用

高阶函数,高阶组件,函数柯里化的使用

如何在一个请求回来数据并且在设置状态成功后发送下面的请求(优雅发送请求,平铺数据)?

手写一个promise

promise.all的使用

pubsub-js的使用

React的三大属性

对于高阶组件中的修饰器的使用,例如@withRouter

cookie和cors如何配合使用? cookie可以跨域吗?

requestAnimationFramerequestIdleCallback的区别,在React的Fiber中

Node.js端request-promise-native的使用

现在的性能优化真的只看 DOMContentLoad和Load的时间吗? 可以从RASI四个方面去看待。

由于太晚了,面试题的答案会放出来。喜欢的朋友请收藏,谢谢。 感谢@xpromise的技术支持

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54851.html

相关文章

  • 使用ReactNode.js制作音乐App一次总结

    摘要:在通信时,如果要将返回的数据,那么请注意的同异步场景,准确把控渲染和设置状态时间差逻辑,特别是多个请求,可以使用或者在的回调函数中发送请求,定时器把控时间。 一、技术选型 语言选择: JavaScript TypeScript 最终选择了JavaScript作为开发语言,一开始尝试使用TypeScript,但是由于是移动端,antd-mobile的库与TS有那么一些不兼容,官方文...

    helloworldcoding 评论0 收藏0
  • 使用ReactNode.js制作音乐App一次总结

    摘要:在通信时,如果要将返回的数据,那么请注意的同异步场景,准确把控渲染和设置状态时间差逻辑,特别是多个请求,可以使用或者在的回调函数中发送请求,定时器把控时间。 一、技术选型 语言选择: JavaScript TypeScript 最终选择了JavaScript作为开发语言,一开始尝试使用TypeScript,但是由于是移动端,antd-mobile的库与TS有那么一些不兼容,官方文...

    kviccn 评论0 收藏0
  • 即将立秋的《课多周刊》(第2期)

    摘要:即将立秋的课多周刊第期我们的微信公众号,更多精彩内容皆在微信公众号,欢迎关注。若有帮助,请把课多周刊推荐给你的朋友,你的支持是我们最大的动力。课多周刊机器人运营中心是如何玩转起来的分享课多周刊是如何运营并坚持下来的。 即将立秋的《课多周刊》(第2期) 我们的微信公众号:fed-talk,更多精彩内容皆在微信公众号,欢迎关注。 若有帮助,请把 课多周刊 推荐给你的朋友,你的支持是我们最大...

    ruicbAndroid 评论0 收藏0
  • 即将立秋的《课多周刊》(第2期)

    摘要:即将立秋的课多周刊第期我们的微信公众号,更多精彩内容皆在微信公众号,欢迎关注。若有帮助,请把课多周刊推荐给你的朋友,你的支持是我们最大的动力。课多周刊机器人运营中心是如何玩转起来的分享课多周刊是如何运营并坚持下来的。 即将立秋的《课多周刊》(第2期) 我们的微信公众号:fed-talk,更多精彩内容皆在微信公众号,欢迎关注。 若有帮助,请把 课多周刊 推荐给你的朋友,你的支持是我们最大...

    MRZYD 评论0 收藏0

发表评论

0条评论

edgardeng

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<