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)複製代碼