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

2024年4月12日 103次阅读 来源: Peter谭金杰

一、手艺选型

  • 言语挑选：

    • 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中的，所以会涌现状况内里没有值的状况，
        这里须要加一个定时器处理。`

本次构建历程当中涉及到的一些面试题

  • http的ajax轮询 长轮询 keep-alive 和webSocket的区分
  • 怎样将一个元素从页面上隐蔽 依据场景需求，合营React的Fiber和diff算法机制运用
  • 高阶函数，高阶组件，函数柯里化的运用
  • 如安在一个要求返来数据而且在设置状况胜利后发送下面的要求（文雅发送要求，平铺数据）？
  • 手写一个promise
  • promise.all的运用
  • pubsub-js的运用
  • React的三大属性
  • 关于高阶组件中的润饰器的运用，比方@withRouter
  • cookie和cors怎样合营运用？ cookie能够跨域吗？
  • requestAnimationFrame和requestIdleCallback的区分，在React的Fiber中
  • Node.js端对request-promise-native的运用
  • 如今的机能优化真的只看 DOMContentLoad和Load的时候吗？ 能够从RASI四个方面去对待。

因为太晚了，面试题的答案会放出来。喜好的朋侪请珍藏，谢谢。 谢谢@xpromise的手艺支撑

    原文作者：Peter谭金杰
    原文地址: https://segmentfault.com/a/1190000018798929
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞