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

這個 todo-list 項目，很簡單，前端使用 react，后端 nodejs 使用 koa2 進行開發(fā)。數(shù)據庫使用 Mysql。之所以要選擇這些框架、數(shù)據庫，是因為我都不會這些技術，為了學習，所以就使用這些技術進行開發(fā)。

在這次的小項目開發(fā)中，大概用了1個月的時間吧，平時有空就開始開發(fā)或者學習。

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

項目腳手架是用 create-react-app 生成的

react

react-router

redux

后端用的是 nodejs

koa2

mysql

用 create-react-app 生成的項目后，再用 npm run eject 把 webpack 配置文件生成出來（因為要修改配置）。原本打算使用 css module + scss 進行開發(fā)的。但是我在配置完 webpack 之后，css module 有個問題解決不了

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

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

只是簡單得添加了 scss-loader 和 postcss-px2rem 插件進行使用。

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

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

因為我有 vue 的基礎，所以感覺學習 react 的時候并不覺得很難，當然還沒真正在工作項目中使用 react 開發(fā)，所以很多問題都沒遇到。

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

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

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

  
test

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

我這里就使用了 react-motion 這個動畫庫?？梢詫崿F(xiàn)更多物理效果的的動畫。

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

  {value => 
{value.x}
}

官方 demo 看起來也感覺挺簡單的。用起來感覺還行。

當動畫結束后，有一個鉤子函數(shù)可以使用 onRest

其他一些功能組件，都是自己嘗試去編寫的，像日歷組件、picker 組件、toast 組件等。因為項目簡單，所以需要的組件不多。

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

關于 React Router 4 的一切

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

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

這個其實挺簡單的，想一下就可以了，在每個 Route 組件，包多一層父級組件，每次匹配 Route 時，都要先經過那層父級組件，判斷要輸出什么。

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

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

使用的時候就是這樣：

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

如何在 js 里進行路由調整？

react-router-dom 庫是有依賴 history 這個庫的。在組件里，用 withRouter （這個組件是在 react-router-dom 里面的）包住當前組件，就會在 props 出現(xiàn) histroy、location、match 這三個對象。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 里面，要如何調整？

請求 api 我是用 axios，我想在 axios 攔截器里，當判斷后端返回你沒有登錄，就要自動跳去登錄頁。

網上有個教程是，使用 history 庫，實例化一個 hisotry 對象，就可以 push 、replace 等。但是那個好像是在 v3 之前的版本才有效。在 v4 中，路由的 url 是變化了，但是內容沒有變。

react-router v4 使用 history 控制路由跳轉

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

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

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

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

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

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

其實 Router 組件，加上 history 對象和 children ，就是一個 BrowserRouter。在里面生成 history 對象，我自己就緩存起來。哪里要用，我就直接調用它就好了。

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

這樣我在 axios 里就可以跳轉路由

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 暫時遇到的問題。

redux 也沒什么好說的，教程網上搜搜或者看文檔就好了。 redux 剛開始用的時候，感覺有別扭。。。轉不過去，只能照搬復制粘貼用?？赡苡弥弥?，才明白，額。。原來是這么回事，然后再去刷文檔。。。

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

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

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

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

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

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

后端主要要做的是提供接口，進行簡單的增刪改查。數(shù)據庫使用 Mysql。nodejs 框架就使用 koa2（因為沒學過，就決定用它了）。

項目使用 koa2-generator 生成的。開箱既用。再自己添加一些庫就好了。

連接 mysql 的話，用 npm 的一個 mysql 包就好了。

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

最后附上 項目 github 地址

還有體驗地址