摘要：項(xiàng)目問題總結(jié)這個(gè)項(xiàng)目，很簡(jiǎn)單，前端使用，后端使用進(jìn)行開發(fā)。方便移動(dòng)端開發(fā)。當(dāng)動(dòng)畫結(jié)束后，有一個(gè)鉤子函數(shù)可以使用其他一些功能組件，都是自己嘗試去編寫的，像日歷組件組件組件等。版本的，是沒有任何的鉤子函數(shù)，我就感覺懵逼了。。。

這個(gè) todo-list 項(xiàng)目，很簡(jiǎn)單，前端使用 react，后端 nodejs 使用 koa2 進(jìn)行開發(fā)。數(shù)據(jù)庫(kù)使用 Mysql。之所以要選擇這些框架、數(shù)據(jù)庫(kù)，是因?yàn)槲叶疾粫?huì)這些技術(shù)，為了學(xué)習(xí)，所以就使用這些技術(shù)進(jìn)行開發(fā)。

在這次的小項(xiàng)目開發(fā)中，大概用了1個(gè)月的時(shí)間吧，平時(shí)有空就開始開發(fā)或者學(xué)習(xí)。

而這篇文章，主要是記錄了在學(xué)習(xí)開發(fā)過程，遇到的一些問題，是如何解決的。

項(xiàng)目腳手架是用 create-react-app 生成的

react

react-router

redux

后端用的是 nodejs

koa2

mysql

用 create-react-app 生成的項(xiàng)目后，再用 npm run eject 把 webpack 配置文件生成出來（因?yàn)橐薷呐渲茫Ｔ敬蛩闶褂?css module + scss 進(jìn)行開發(fā)的。但是我在配置完 webpack 之后，css module 有個(gè)問題解決不了

通過 composes 引用的類，在源文件使用了變量或者 @include 都是沒有效果的，還有使用了 postcss-px2rem 這個(gè)插件，也是無(wú)法轉(zhuǎn)成 rem 的。

不知道是我配置哪里出現(xiàn)了問題，所以就暫時(shí)使用 scss 進(jìn)行開發(fā)，后面再找下有沒有現(xiàn)成的配置，看看是如何做的。

只是簡(jiǎn)單得添加了 scss-loader 和 postcss-px2rem 插件進(jìn)行使用。

使用 postcss-px2rem，在 css 中寫 px，會(huì)根據(jù)配置參數(shù)，轉(zhuǎn)譯后變成 rem。方便移動(dòng)端開發(fā)。

其他暫時(shí)沒有什么大的問題，create-react-app 和 vue-cli 相比，功能也挺完整的。但是開發(fā)和打包的是兩個(gè)配置文件，其中公共部分沒有抽出來，感覺這點(diǎn)就比 vue-cli 不好了。

因?yàn)槲矣?vue 的基礎(chǔ)，所以感覺學(xué)習(xí) react 的時(shí)候并不覺得很難，當(dāng)然還沒真正在工作項(xiàng)目中使用 react 開發(fā)，所以很多問題都沒遇到。

react 是用 jsx 進(jìn)行編寫模板的。我自己從 vue 的 template 轉(zhuǎn)到 react 的 jsx 感覺還是沒什么問題。

react 自帶的 api 并不多，很多都要去看看有什么庫(kù)可以用，而選擇庫(kù)的時(shí)候，要看看其他開發(fā)者的介紹、評(píng)價(jià)等，再去選擇使用，還有 github 的 star 數(shù)。

像要實(shí)現(xiàn)動(dòng)畫效果時(shí)，vue 可以直接自帶的 的組件就好了，很容易實(shí)現(xiàn)：

  
test

再編寫 css 動(dòng)畫類就好了。而 react 可以找一些庫(kù)去實(shí)現(xiàn)，沒有什么約束，選擇更多。

我這里就使用了 react-motion 這個(gè)動(dòng)畫庫(kù)。可以實(shí)現(xiàn)更多物理效果的的動(dòng)畫。

import {Motion, spring} from "react-motion";
// In your render...

  {value => 
{value.x}
}

官方 demo 看起來也感覺挺簡(jiǎn)單的。用起來感覺還行。

當(dāng)動(dòng)畫結(jié)束后，有一個(gè)鉤子函數(shù)可以使用 onRest

其他一些功能組件，都是自己嘗試去編寫的，像日歷組件、picker 組件、toast 組件等。因?yàn)轫?xiàng)目簡(jiǎn)單，所以需要的組件不多。

剛開始看的時(shí)候，知道 react-router (后面直接說 router 了) v4 版本和之前的版本區(qū)別有點(diǎn)大。然后選擇了 v4 版本。v4 版本的 router，是沒有任何的鉤子函數(shù)，我就感覺懵逼了。。。攔截器功能要怎么實(shí)現(xiàn)。。。路由權(quán)限要怎么實(shí)現(xiàn)。一個(gè) 2.8W star 數(shù)的庫(kù)，肯定有解決方法。

關(guān)于 React Router 4 的一切

大家可以看下上面這篇文章，幫助很大。

實(shí)現(xiàn)攔截器和路由權(quán)限功能

這個(gè)其實(shí)挺簡(jiǎn)單的，想一下就可以了，在每個(gè) Route 組件，包多一層父級(jí)組件，每次匹配 Route 時(shí)，都要先經(jīng)過那層父級(jí)組件，判斷要輸出什么。

const AuthRoute = ({ component: Component, redirect, loginStatus, ...rest }) => (
   (
    loginStatus ? () : (
      
    )
  )} />
)

根據(jù)傳進(jìn)去的 loginStatus ，判斷是要重定向還是輸出原組件。這種做法就是“高階組件”，接受一個(gè)組件參數(shù)，返回一個(gè)組件。

使用的時(shí)候就是這樣：

然而麻煩的是，只要涉及到要權(quán)限判斷的，就要用這層組件包裹。。。沒用到的就不需要。然而大部分頁(yè)面都是需要的。

如何在 js 里進(jìn)行路由調(diào)整？

react-router-dom 庫(kù)是有依賴 history 這個(gè)庫(kù)的。在組件里，用 withRouter （這個(gè)組件是在 react-router-dom 里面的）包住當(dāng)前組件，就會(huì)在 props 出現(xiàn) histroy、location、match 這三個(gè)對(duì)象。history 擁有 push、replace、go 等等多種路由操作的方法。

import React, { Component } from "react"
import { withRouter } from "react-router-dom"

class Com extends Component {
  constructor(props) {
    super(props)
    // this.props.history....
  }
  
  render() {
    return (
      

        
      
    )
  }
}

export default withRouter(Com)

如果我在純 js 里面，要如何調(diào)整？

請(qǐng)求 api 我是用 axios，我想在 axios 攔截器里，當(dāng)判斷后端返回你沒有登錄，就要自動(dòng)跳去登錄頁(yè)。

網(wǎng)上有個(gè)教程是，使用 history 庫(kù)，實(shí)例化一個(gè) hisotry 對(duì)象，就可以 push 、replace 等。但是那個(gè)好像是在 v3 之前的版本才有效。在 v4 中，路由的 url 是變化了，但是內(nèi)容沒有變。

react-router v4 使用 history 控制路由跳轉(zhuǎn)

這個(gè)大家可以看下這位前輩寫的方法。前兩種是在組件里使用的。第三種方法是：

import { Router, Link, Route } from "react-router-dom"
import history from "./history"

ReactDOM.render(
  
    
      ...
    
  ,
  document.getElementById("root"),
)

把 history 傳到 Router 組件里。然后其他地方就可以使用了。但這里有個(gè)問題，Router 組件是無(wú)法用 BrowserRouter 其他的一些功能，像 basename。這個(gè)感覺還是很必要，Router 組件是沒有這個(gè)屬性的選項(xiàng)的。我現(xiàn)在做的項(xiàng)目，基本上每個(gè)都要配置 basename（用的是 vue 開發(fā)的項(xiàng)目）。雖然可以用其他一些方法去添加這個(gè) basename，但覺得很麻煩。

然后我就看了第四種方法。。。直接從 react-router-dom 里面的 BrowserRouter 源碼里 copy 下面，自己封裝了一個(gè)組件：

import React from "react"
import { setHistory } from "@/utils/history"
import { createBrowserHistory as createHistory } from "history"
import { Router } from "react-router-dom"

class BrowserRouter extends React.Component {

  history = createHistory(this.props)

  render() {
    setHistory(this.history)
    return 
  }
}

export default BrowserRouter

其實(shí) Router 組件，加上 history 對(duì)象和 children ，就是一個(gè) BrowserRouter。在里面生成 history 對(duì)象，我自己就緩存起來。哪里要用，我就直接調(diào)用它就好了。

然后使用這個(gè)“假的” BrowserRouter，其他功能和“真的”是一樣的。在里面加 basename 也是可以的。

這樣我在 axios 里就可以跳轉(zhuǎn)路由

import axios from "axios"
import { getHistory } from "@/uitls/history"

axios("http://xxxx.com/api").then(res => {
    if (res.code === 500) {
        getHistory().push("/login")
    }
})

上面就是我在 react-router 暫時(shí)遇到的問題。

redux 也沒什么好說的，教程網(wǎng)上搜搜或者看文檔就好了。 redux 剛開始用的時(shí)候，感覺有別扭。。。轉(zhuǎn)不過去，只能照搬復(fù)制粘貼用。可能用著用著，才明白，額。。原來是這么回事，然后再去刷文檔。。。

主要是如何在 axios 里，更新 store 的數(shù)據(jù)。這個(gè)也很簡(jiǎn)單

store.dispatch(setToast({ status: true, title: "請(qǐng)重新登錄" }))

感覺做同樣的事情，react 需要寫的代碼稍微會(huì)多點(diǎn)，感覺也麻煩點(diǎn)，不知道是不是還沒熟悉，用 vue 感覺寫起來很爽。

vue 提供的功能比較全面，像 computed, watch 這些，react 的話好像是沒有提供的？react 更多需要找現(xiàn)成的庫(kù)。不過自從學(xué)了 react，es6 也要更加熟練了。。。

整個(gè)前端開發(fā)起來，其實(shí)還好。一些公共處理的問題，在后面都解決到了。但還是要看看其他項(xiàng)目， 開發(fā)是如何做好約束，組件是如何分類等等。

相對(duì)前端，后端基礎(chǔ)等于沒有，靠看文檔、搜索、問同事，從而解決一些問題。

后端主要要做的是提供接口，進(jìn)行簡(jiǎn)單的增刪改查。數(shù)據(jù)庫(kù)使用 Mysql。nodejs 框架就使用 koa2（因?yàn)闆]學(xué)過，就決定用它了）。

項(xiàng)目使用 koa2-generator 生成的。開箱既用。再自己添加一些庫(kù)就好了。

連接 mysql 的話，用 npm 的一個(gè) mysql 包就好了。

其他的話，后續(xù)更新吧~~

最后附上 項(xiàng)目 github 地址

還有體驗(yàn)地址