继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

react,react-router 4,mobx构建我的移动端web

极客教程
关注TA
已关注
手记 58
粉丝 286
获赞 3794

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

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

1. 开始

克隆我github上的代码:

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

然后

cd geekjc-antd-mobile
npm install
npm start

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

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

2. 路由(react-route 4)

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

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. 最后

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

打开App,阅读手记
4人推荐
发表评论
随时随地看视频慕课网APP

热门评论

不错值得学习,为什么嘛

查看全部评论