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 地址

还有体验地址