摘要：前言上次初學(xué)用寫了個(gè)后臺(tái)管理，這次便尋思寫個(gè)移動(dòng)端的項(xiàng)目。便有了這次的這個(gè)項(xiàng)目。然后通過來判斷如何動(dòng)畫具體處理異步用來書寫跟配置還有一些零零散散的知識(shí)點(diǎn)，就不介紹了，具體可以到上查看。個(gè)人博客在線觀看地址

上次初學(xué)用 react 寫了個(gè)后臺(tái)管理，這次便尋思寫個(gè)移動(dòng)端的項(xiàng)目。便有了這次的這個(gè)項(xiàng)目。

這個(gè)項(xiàng)目以前寫了個(gè) vue 的版本。有興趣的可以 點(diǎn)擊進(jìn)入

模擬數(shù)據(jù)用的是 Easy Mock
用的是我以前寫 vue-toutiao 用到的數(shù)據(jù)

賬號(hào): vue-toutiao
密碼： 123456

react + react-redux + react-router + webpack

build: webpack配置

config: 項(xiàng)目配置參數(shù)

src
actions: 存放 action 方法
assets: 靜態(tài)資源文件，存放圖片啥的
components: 常用組件
reducers: 存放 reducer
router: 路由管理
store: 狀態(tài)管理 redux
styles: 樣式文件
utils: 常用封裝
views: 視圖頁(yè)面

static: 靜態(tài)文件： 存放 favicon.ico 等等

通過 import() 方法加載組件， 在通過高階組件處理 import 返回的 Promise 結(jié)果。

// asyncComponent.js
import React from "react"

export default loadComponent => (
    class AsyncComponent extends React.Component {
        state = {
            Component: null,
        }
        async componentDidMount() {
            if (this.state.Component !== null) return
            try {
                const {default: Component} = await loadComponent()
                this.setState({ Component })
            }catch (err) {
                console.error(`Cannot load component in `);
                throw err
            }
        }

        render() {
            const { Component } = this.state
            return (Component) ?  : null
        }
    }
)

如下使用

import asyncComponent from "./asyncComponent"
const Demo = asyncComponent(() => import(`views/demo.js`))

統(tǒng)一配置路由，及路由狀態(tài)

import asyncComponent from "./asyncComponent"
const _import_views = file => asyncComponent(() => import(`views/${file}`))
export const loyoutRouterMap = [
    { 
        path: "/", 
        name: "首頁(yè)", 
        exact: true,
        component: _import_views("Home")
    },
    { 
        path: "/video", 
        name: "視頻",
        component: _import_views("Video")
    },
    { 
        path: "/headline", 
        name: "微頭條",
        component: _import_views("Headline")
    },
    { 
        path: "/system", 
        name: "系統(tǒng)設(shè)置",
        auth: true, 
        component: _import_views("System")
    }
] 

通過路由配置中 auth 屬性來判斷是否需要登錄
如以下配置

{ 
    path: "/system", 
    name: "系統(tǒng)設(shè)置",
    auth: true, 
    component: _import_views("System")
}

登陸配置及判斷

// authRoute.js
import React from "react"
import store from "../store"
import { Route, Redirect } from "react-router-dom"

export default class extends React.Component {
    render () {
        let {component: Component, ...rest} = this.props
        // 是否登錄
        if (!store.getState().user.user.name) {
            return 
        }
        return 
    }
}


// 生成route
const renderRouteComponent = routes => routes.map( (route, index) => {
    if (route.auth) { // 需要權(quán)限登錄
        return 
    }
    return 
})

通過 react-router-transition 做的切換動(dòng)畫。

然后通過 history.slideStatus 來判斷如何動(dòng)畫

react-router-transition 具體API

用 redux-actions 來書寫 action 跟 reducer

// action.js
import { createAction } from "redux-actions"
import axios from "utils/axios"
export const getHeadlineList = (params) => dispatch => {
    return new Promise( (resolve, reject) => {
        axios.get("headline/list", params)
            .then( res => {
                const list = res.data.list
                dispatch(createAction("GET_HEADLINE_LIST")(list))
                resolve(list)
            }).catch( err => {
                reject(err)
            })
    })
}

// reducer.js
import { handleActions } from "redux-actions"
import { combineReducers } from "redux"
const state = {
    headlineList: []
}
const headline = handleActions({
    GET_HEADLINE_LIST: (state, action) => {
        let list = action.payload
        state.headlineList = state.headlineList.concat(list)
        return {...state}
    }
}, state)
export default combineReducers({
    headline
})

// store.js  
// redux-thunk配置
import { createStore, compose, applyMiddleware  } from "redux"
import reducer from "../reducers"
import thunk from "redux-thunk"
const configureStore => createStore(
    reducer,
    compose(
        applyMiddleware(thunk)
    ) 
)
export default configureStore()

還有一些零零散散的知識(shí)點(diǎn)，就不介紹了，具體可以到 github 上查看。

github
個(gè)人博客
在線觀看地址