基於React搭建一個簡易版豆瓣

前言

之前寫過一篇基於vue搭建一個簡易版豆瓣的文章，近來接觸到React，於是將該專案用React重寫了一遍，用於體驗兩者在實際開發中的異同。本文會簡述專案情況及構建專案過程中遇到的一些零散的問題，以作記錄，見識淺薄，若有錯漏處還望指正。

專案概述

專案地址：react-douban

專案簡介：基於React搭建簡易版豆瓣，實現將讀書、電影、音樂、同城活動等內容按不同型別顯示的功能。

技術棧：React + Mobx + react-router + axios + Sass + ES6/7等，同時，為保證程式碼質量和風格統一，專案也使用了ESLint，stylelint，prettier等優秀的開源工具對專案進行約束調整。

專案背景：本專案介面風格參考自豆瓣，資料獲取來自豆瓣官方api，由於有請求限制，所以頻繁請求的話會導致請求失敗，還需注意。

開發環境：node v8.1.2，npm 6.1.0，yarn 1.7.0；瀏覽器：Chrome 67.0.3396.99，Firefox 61.0.1。

執行專案

執行專案前，請確保已正確安裝node環境。

• 克隆專案，若沒有安裝git環境，也可直接在react-douban處下載安裝包；

git clone https://github.com/nh0007/react-douban.git
複製程式碼

• 進入專案根目錄，安裝依賴；

npm install 
or 
yarn install
複製程式碼

• 安裝完依賴後，執行專案；

npm start
or
yarn start
複製程式碼

• 等待執行完畢後，瀏覽器會自動彈出訪問頁，即可看到專案執行效果。

專案截圖

本專案主要分為讀書、電影、音樂、同城活動四大模組，以下是各個模組截圖：

開發中需注意的問題

1、專案初始配置

俗話說：好的開始就是成功的一半。專案初期新增檢驗配置，是專案後期發展的基石。因此，在使用create-react-app腳手架構建完專案後，為新增自定義配置，先eject專案，然後新增如下配置：

• 使用airbnb檢驗規則檢查程式碼質量；
• 使用prettier工具統一程式碼風格；
• 使用stylelint檢查樣式程式碼；
• 使用husky、lint-staged對即將提交的程式碼進行校驗。

剛開始接觸這些配置的朋友可能會很彆扭，甚至煩躁，配置完後開發過程總是報錯，影響進度。但這部分成本還是有必要付出的，特別是當你維護過一些“紊亂”的程式碼後就更能體會其中價值~。具體的配置可以檢視提交記錄，裡邊有針對各項配置的提交修改。如果還覺得有點懵，油管上有個不到十分鐘的配置視訊，介紹了初始配置以及與編輯器外掛配套使用過程，感覺挺清晰的，剛接觸的朋友可以看看。

@action
setCurrentBookTags = tags => {
  if (tags.tagName !== this.currentBookTags.tagName) {
    this.currentBookTags = tags;
  }
};
複製程式碼

// 從mobx引入flow
import { observable, action, flow } from `mobx`;

// 非同步獲取資料時需要繫結this，無論你是this.props.bookStore.setTypeBooks(type)呼叫，
// 還是 const { setTypeBooks } = this.props.bookStore; setTypeBooks(type);呼叫都不會出錯；
setTypeBooks = flow(
  function*(type, start, count, isAfresh = false) {
    const oldData = this.typeBooks.get(type);
    if (oldData && !isAfresh) return;
    try {
      const response = yield getCurrentTypeBooks(type, start, count);
      const data = response.data.books;
      this.typeBooks.set(type, data);
    } catch (error) {
      console.log(error);
    }
  }.bind(this)
);
複製程式碼

• Mobx4中observable陣列實際上是物件，不能使用PropTypes.array進行型別檢查，Mobx5中使用Proxy追蹤變化，陣列可直接使用PropTypes.array進行型別檢查；
• Mobx中observable普通物件時新增物件屬性不會觸發更新，可以使用Map，使用Map儘管可以使用PropTypes.object進行型別檢查，但感覺還是mobx-react中的observableMap來檢查更加合適，同時引入prop-types和mobx-react中的PropTypes會有同名問題，可以這樣：

import { observer, inject, PropTypes as mobxPropTypes } from `mobx-react`;
import PropTypes from `prop-types`;
複製程式碼

3、輪播實現

專案中有不少輪播展示內容頁面，在實現過程遇到了些問題，此處記錄一下。

先看看專案中的輪播效果：

雖然有一些優秀的輪播庫，但此處暫不使用專用輪播庫，而是藉助過渡、動畫效果來實現。

可以看看React和Vue在過渡、動畫使用上的一些差異：

• Vue中自帶過渡的封裝元件，React可引入react-transition-group庫協助；
• Vue中可結合v-if、v-show控制顯示隱藏的動畫，在react-transition-group中主要藉助它的in屬性；

import React, { PureComponent } from `react`;
import { TransitionGroup, CSSTransition } from `react-transition-group`;

export default class Slider extends PureComponent {
  ...
  render() {
    ...
    return (
      <TransitionGroup className="slider-list">
        {itemArray.map((item, index) => (
          <CSSTransition
            key={item.id}
            in={currentPage === index}
            timeout={500}
            classNames={`slider-${slideDirection}`}
            unmountOnExit
          >
            ...
          </CSSTransition>
        ))}
      </TransitionGroup>
    )
  }
}
複製程式碼

{bookList.map((bookArray, index) => (
  <ul
    key={bookArray[0].id}
    style={{display: currentPage === index ? `block` : `none`}}
  >
    ...
  </ul>
))}
複製程式碼

{bookList.map((bookArray, index) => (
  <BookTagDisplayItem
    key={bookArray[0].id}
    isShow={currentPage === index}
  />
))}
複製程式碼