1. 程式人生 > >基於React的仿QQ音樂(移動端)

基於React的仿QQ音樂(移動端)

前言

由於這段時間工作上也是挺忙的,就沒有時間去寫這個專案,中間一直都是寫寫停停,進度也是非常慢的。正好前幾天都還比較空,就趕緊抓著空閒時間去寫這個專案,最後緊趕慢趕地完成了。本專案採用了React的框架,可以幫助那些想學習React的同學們去深入學習React的專案的開發。寫這個專案過程也是非常辛苦的,如果你覺得我寫的還不錯的話,麻煩各位給我一個收藏或者點贊,也或者去github上給我點個星,來當做對我的鼓勵。不勝感激!

原始碼地址

演示地址

技術棧

  1. react
  2. react-router
  3. react-redux
  4. es6
  5. axios
  6. webpack

已實現功能

Tab-我的

Tab-我的

Tab-音樂館

Tab-音樂館

Tab-發現

Tab-發現

側滑欄

Tab-側滑欄

播放列表

Tab-播放列表

播放器

Tab-播放器1
Tab-播放器2

歌曲搜尋

Tab-歌曲搜尋1
Tab-歌曲搜尋2

歌單管理

Tab-歌單管理1
Tab-歌單管理2

專案總結

整個專案採用了React這個框架來構建,之前我都是用Vue用做開發的。正好藉此機會做一個小小的對比,純是個人使用的心得體會。如果你也有一些不一樣的心得交流的話,歡迎交流。

  1. React相比Vue給我感受最深的就是他的優雅的元件化,用起來是非常爽,誰用誰知道,引用即可使用。而Vue在這塊相對來說就要弱一點,引用了元件之後還要註冊一下。
  2. Vue在雙向資料繫結的體驗上要優於React的,React採用的是Flux的單向資料流動。這在實現一些需要雙向資料互動的功能上,Vue是佔有優勢的。
  3. Vue相比React更加輕量級。Vue只需要引用一個Vue.js即可使用,而React則要引用React.js、React-dom.js、babel.js(用於轉換jsx的語法)。
  4. Vue在上手程度上要優於React。Vue學習成本很低,另外官方有比較完善的中文文件。而React官方則只有英文文件,另外學習成本也比較高。我見到網上某人噴只會Vue的是前端小白,我對這種人只能報以呵呵。簡單本身是沒有錯誤,一個東西能以簡單的方式解決難道不好嗎?關於這個中文文件居然還有人噴那些喜歡用Vue的是不是英文能力差,我就再報以呵呵一笑。本身擁有中文文件就是一個優勢,結果還成了被噴的地方。首先,並不是所有人的英文能力都跟某些嘴炮大神那麼牛逼的。其次,就算是英文能力牛逼的人,你敢說你閱讀中文的能力會比你閱讀英文能力差?
  5. 我個人感覺Vue的全家桶(不包括Vue)使用起來,我個人感覺是要比React的全家桶(不包括React)使用起來舒服的。
  6. 雖然Vue在一些細節上要比React好,但是不能覺得React就比Vue差。這種想法是錯誤。特別是大型應用上,使用React專案維護起來肯定是要比Vue要好的。當然這不代表Vue不能構建大型應用。
  7. React在社群生態建設上是比Vue好很多的,而且後面站著FaceBook。不怕遇到問題沒人可以幫你解決的情況,而Vue的話就要稍微擔心一下。

最後強調一下:React和Vue都是非常棒的前端框架,建議大家都去學習一下。採用React或者是Vue還是要結合業務場景和現實情況做選擇的。單純說React還是Vue好,我個人覺得都是耍流氓。