todo-list 项目问题总结(使用 react 进行开发)

前端之家收集整理的这篇文章主要介绍了todo-list 项目问题总结(使用 react 进行开发)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

todo-list 项目问题总结

这个 todo-list 项目,很简单,前端使用 react,后端 nodejs 使用 koa2 进行开发。数据库使用 MysqL。之所以要选择这些框架、数据库,是因为我都不会这些技术,为了学习,所以就使用这些技术进行开发。

在这次的小项目开发中,大概用了1个月的时间吧,平时有空就开始开发或者学习。

而这篇文章,主要是记录了在学习开发过程,遇到的一些问题,是如何解决的。

使用的框架、库

前端

项目脚手架是用 create-react-app 生成

  • react
  • react-router
  • redux

后端

后端用的是 nodejs

前端开发遇到的问题

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

还有体验地址

猜你在找的React相关文章