react,react-router 4,mobx构建我的移动端web-原创手记-慕课网

这几天终于在空余时间把我pc网站的极客教程做了一个简洁的移动web，做得比较简单，看看效果图:

,暂时只有看文章的功能，其余的慢慢的再加。做这个的目的主要是想学习下react相关技术栈的更新。

1. 开始

克隆我github上的代码:

git clone https://github.com/cllgeek/geekjc-antd-mobile.git

然后

cd geekjc-antd-mobile
npm install
npm start

启动就绪后，打开浏览器，输入http://localhost:3000，然后切换到手机浏览模式，就是看到效果了。

目录结构

这个结构主要是用create-react-app再加上自己的需求配置的，UI上搭配了antd-mobile。具体可以看搭建我的网站的mobile版的开发环境

2. 路由(react-route 4)

关于路由，在这个项目中，采用的
写法上也较之前的有很大区别，这里展示一部分

import {BrowserRouter as Router,Route,Link,withRouter} from 'react-router-dom'//导入的方式跟之前有点变化

@observer
class ArticleDetail extends Component{
    componentWillMount(){
        const { props } = this
        const id = props.match.params.id
        const type = props.match.params.type
        newState.initData(`/fetch/post/${id}`,type)
    }
    render(){
        return(
          <div>
            <NavBar
              mode="light"
              icon={<Icon type="left" />}
              onLeftClick={() => this.props.history.push('/')}
              rightContent={[
                <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                <Icon key="1" type="ellipsis" />,
              ]}
            >{newState.type&&newState.type}</NavBar>
            <div className="articleDetailContainer">
              <h2>{newState.data&&newState.data.post.title}</h2>
              <div className="articleDetailInfo">
                <span>{newState.data&&newState.data.post.author}</span>
                <div className="right">
                   <span className="time">{moment(newState.data&&newState.data.post.meta.updateAt).format('MM/DD/YYYY')}</span>
                   <span>{newState.data&&newState.data.post.pv}</span>
                </div>
              </div>
              <div className="articleDetailContent" dangerouslySetInnerHTML={{ __html:newState.data&&newState.data.post.content }} />
            </div>
          </div>
        )
    }
}

export default withRouter(ArticleDetail)

react-router 提供了一个withRouter组件
withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入。
无需一级级传递react-router 的属性，当需要用的router 属性的时候，将组件包一层withRouter，就可以拿到需要的路由信息。上面的代码就是利用withRouter高阶组件包了一层，然后用history的属性实现了路由的跳转,this.props.history.push()。
router-router 4真的很强大，推荐大家学习。
更多关于react-router 4路由的知识，可以查看学习React-router 4.x版本

3. 状态管理(mobx)

这里说说我为什么要弃用redux，写redux比较繁琐，不太喜欢写action和reducer。在工作中，刚开始是用在redux的，写着写着也慢慢弃用了，回到了最初的this.setState，但是用this.setState也会产生很多的弊端，因为React的state是异步的。这的话，就得寻找redux的替代品，发现网上一致认同mobx，慢慢的学习，发现mobx真的很好用，比redux简洁，看看项目中的代码吧，

import React,{ Component } from 'react'
import { NavBar, Icon } from 'antd-mobile'
import {BrowserRouter as Router,Route,Link,withRouter} from 'react-router-dom'

import {observable, action, useStrict, runInAction} from 'mobx'
import { observer } from 'mobx-react'
import moment from 'moment'
import marked from 'marked'

import './ArticleDetail.less'

import request from '../../utils/request'

useStrict(true)

class ArticleDetailState {
  @observable data = null
  @observable type = null
  @action initData = (url,type) => {
    request.get(url)
      .then((response)=>{
        runInAction("获取文章内容",()=>{
          this.data = response.data
          this.type = type
        })
    })
  }
}

const newState = new ArticleDetailState()

@observer
class ArticleDetail extends Component{
    componentWillMount(){
        const { props } = this
        const id = props.match.params.id
        const type = props.match.params.type
        newState.initData(`/fetch/post/${id}`,type)
    }
    render(){
        return(
          <div>
            <NavBar
              mode="light"
              icon={<Icon type="left" />}
              onLeftClick={() => this.props.history.push('/')}
              rightContent={[
                <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                <Icon key="1" type="ellipsis" />,
              ]}
            >{newState.type&&newState.type}</NavBar>
            <div className="articleDetailContainer">
              <h2>{newState.data&&newState.data.post.title}</h2>
              <div className="articleDetailInfo">
                <span>{newState.data&&newState.data.post.author}</span>
                <div className="right">
                   <span className="time">{moment(newState.data&&newState.data.post.meta.updateAt).format('MM/DD/YYYY')}</span>
                   <span>{newState.data&&newState.data.post.pv}</span>
                </div>
              </div>
              <div className="articleDetailContent" dangerouslySetInnerHTML={{ __html:newState.data&&newState.data.post.content }} />
            </div>
          </div>
        )
    }
}

export default withRouter(ArticleDetail)

反正用了mobx，感觉还是蛮好的。
更多关于mobx的知识，可以查看mobx.js 或者用mobx代替redux

4. 最后

学无止进，编程语言也知识工具而已，今后应更注重基础的加深及编程之外的种种。