todo-list 項目問題總結（使用 react 進行開發）

todo-list 項目問題總結

這個 todo-list 項目，很簡單，前端使用 react，後端 nodejs 使用 koa2 進行開發。數據庫使用 Mysql。之因此要選擇這些框架、數據庫，是由於我都不會這些技術，爲了學習，因此就使用這些技術進行開發。

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

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

使用的框架、庫

前端

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

• react
• react-router
• redux

後端

後端用的是 nodejs

• koa2
• mysql

前端開發遇到的問題

create-react-app

css module 問題

用 create-react-app 生成的項目後，再用 npm run eject 把 webpack 配置文件生成出來（由於要修改配置）。本來打算使用 css module + scss 進行開發的。可是我在配置完 webpack 以後，css module 有個問題解決不了

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

不知道是我配置哪裏出現了問題，因此就暫時使用 scss 進行開發，後面再找下有沒有現成的配置，看看是如何作的。

其餘添加的配置

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

使用 postcss-px2rem，在 css 中寫 px，會根據配置參數，轉譯後變成 rem。方便移動端開發。

其餘暫時沒有什麼大的問題，create-react-app 和 vue-cli 相比，功能也挺完整的。可是開發和打包的是兩個配置文件，其中公共部分沒有抽出來，感受這點就比 vue-cli 很差了。

react

由於我有 vue 的基礎，因此感受學習 react 的時候並不以爲很難，固然還沒真正在工做項目中使用 react 開發，因此不少問題都沒遇到。

react 是用 jsx 進行編寫模板的。我本身從 vue 的 template 轉到 react 的 jsx 感受仍是沒什麼問題。

react 自帶的 api 並很少，不少都要去看看有什麼庫能夠用，而選擇庫的時候，要看看其餘開發者的介紹、評價等，再去選擇使用，還有 github 的 star 數。

動畫庫選擇

像要實現動畫效果時，vue 能夠直接自帶的 <transition> 的組件就行了，很容易實現：

<transition name='className'>
  <div v-if='isShow'>test</div>
</transition>

再編寫 css 動畫類就行了。而 react 能夠找一些庫去實現，沒有什麼約束，選擇更多。

我這裏就使用了 react-motion 這個動畫庫。能夠實現更多物理效果的的動畫。

import {Motion, spring} from 'react-motion';
// In your render...
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {value => <div>{value.x}</div>}
</Motion>

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

當動畫結束後，有一個鉤子函數可使用 onRest

其餘一些功能組件，都是本身嘗試去編寫的，像日曆組件、picker 組件、toast 組件等。由於項目簡單，因此須要的組件很少。

react-router

剛開始看的時候，知道 react-router (後面直接說 router 了) v4 版本和以前的版本區別有點大。而後選擇了 v4 版本。v4 版本的 router，是沒有任何的鉤子函數，我就感受懵逼了。。。攔截器功能要怎麼實現。。。路由權限要怎麼實現。一個 2.8W star 數的庫，確定有解決方法。

關於 React Router 4 的一切

你們能夠看下上面這篇文章，幫助很大。

實現攔截器和路由權限功能

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

const AuthRoute = ({ component: Component, redirect, loginStatus, ...rest }) => (
  <Route {...rest} render={props => (
    loginStatus ? (<Component {...props} />) : (
      <Redirect to={redirect || {
        pathname: '/home'
      }} />
    )
  )} />
)

根據傳進去的 loginStatus ，判斷是要重定向仍是輸出原組件。這種作法就是「高階組件」，接受一個組件參數，返回一個組件。

使用的時候就是這樣：

<AuthRoute path='/group/:id' component={GroupPage} loginStatus={loginStatus} />

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

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

react-router-dom 庫是有依賴 history 這個庫的。在組件裏，用 withRouter （這個組件是在 react-router-dom 裏面的）包住當前組件，就會在 props 出現 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 (
      <div>
        
      </div>
    )
  }
}

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(
  <Provider store={store}>
    <Router history={history}>
      ...
    </Router>
  </Provider>,
  document.getElementById('root'),
)

把 history 傳到 Router 組件裏。而後其餘地方就可使用了。但這裏有個問題，Router 組件是沒法用 BrowserRouter 其餘的一些功能，像 basename。這個感受仍是很必要，Router 組件是沒有這個屬性的選項的。我如今作的項目，基本上每一個都要配置 basename（用的是 vue 開發的項目）。雖然能夠用其餘一些方法去添加這個 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 <Router history={this.history} children={this.props.children} />
  }
}

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 也沒什麼好說的，教程網上搜搜或者看文檔就行了。 redux 剛開始用的時候，感受有別扭。。。轉不過去，只能照搬複製粘貼用。可能用着用着，才明白，額。。原來是這麼回事，而後再去刷文檔。。。

主要是如何在 axios 裏，更新 store 的數據。這個也很簡單

store.dispatch(setToast({ status: true, title: '請從新登陸' }))

react 和 vue 開發時的區別

感受作一樣的事情，react 須要寫的代碼稍微會多點，感受也麻煩點，不知道是否是還沒熟悉，用 vue 感受寫起來很爽。

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

前端總結

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

後端開發遇到的問題

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

後端主要要作的是提供接口，進行簡單的增刪改查。數據庫使用 Mysql。nodejs 框架就使用 koa2（由於沒學過，就決定用它了）。

項目使用 koa2-generator 生成的。開箱既用。再本身添加一些庫就行了。

鏈接 mysql 的話，用 npm 的一個 mysql 包就行了。

其餘的話，後續更新吧~~

最後附上 項目 github 地址

還有體驗地址