react,react-router 4,mobx构建个人移动端web

时间 2019-12-08

标签 react router mobx 构建个人移动 web 栏目 React 繁體版

原文原文链接

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

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

1. 开始

克隆我github上的代码:git

git clone https://github.com/cllgeek/geekjc-antd-mobile.git复制代码

而后github

cd geekjc-antd-mobile
npm install
npm start复制代码

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

目录结构
npm

这个结构主要是用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版本redux

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代替reduxbash

4. 最后

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