Боевые статьи React (React имитирует сегодняшние заголовки)

внешний интерфейс JavaScript React.js
Боевые статьи React (React имитирует сегодняшние заголовки)

предисловие

Для начинающихreactнаписалЗакулисное управление, в этот раз задумался о написании мобильного проекта. Отсюда и этот проект.

Этот проект был написан раньшеvueверсия. Заинтересованные могутнажмите, чтобы войти

Смоделированные данныеEasy Mock

я писалvue-toutiaoиспользуемые данные

Аккаунт: vue-toutiao

Пароль: 123456

стек технологий

react + react-redux + react-router + webpack

структура:

  • сборка: конфигурация веб-пакета
  • config: параметры конфигурации проекта
  • src
    1. actions: сохранить метод действия
    2. assets: Статические файлы ресурсов, хранящие изображения или что-то в этом роде.
    3. components: Общие компоненты
    4. reducers: хранить редуктор
    5. router: Управление маршрутизацией
    6. store: сокращение управления состоянием
    7. styles: файл стиля
    8. utils: Общий пакет
    9. views: Просмотр страницы
  • static: статические файлы: хранить favicon.ico и т. д.

Демонстрация эффекта

图片描述

图片描述

Точка знаний

нагрузка по требованию

пройти черезimport()Метод загружает компонент, который обрабатывается компонентом более высокого порядка.importвернутьPromiseрезультат.

// 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 <AsyncComponent />`);
                throw err
            }
        }

        render() {
            const { Component } = this.state
            return (Component) ? <Component {...this.props} /> : null
        }
    }
)

Используйте следующим образом

import asyncComponent from './asyncComponent'
const Demo = asyncComponent(() => import(`views/demo.js`))
<Route path="/demo" component={Demo}/>

настройки маршрутизации

Унифицированная конфигурация маршрутизации и статуса маршрутизации

import asyncComponent from './asyncComponent'
const _import_views = file => asyncComponent(() => import(`views/${file}`))
export const loyoutRouterMap = [
    { 
        path: '/', 
        name: '首页', 
        exact: true,
        component: _import_views('Home')
    },
    { 
        path: '/video', 
        name: '视频',
        component: _import_views('Video')
    },
    { 
        path: '/headline', 
        name: '微头条',
        component: _import_views('Headline')
    },
    { 
        path: '/system', 
        name: '系统设置',
        auth: true, 
        component: _import_views('System')
    }
]

Перехват входа

Через конфигурацию маршрутизацииauthатрибут, чтобы определить, требуется ли вход в систему как следующая конфигурация

{ 
    path: '/system', 
    name: '系统设置',
    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 <Redirect to='/login' />
        }
        return <Route {...rest}  component={Component}/>
    }
}


// 生成route
const renderRouteComponent = routes => routes.map( (route, index) => {
    if (route.auth) { // 需要权限登录
        return <AuthRoute key={index} {...route}/>
    }
    return <Route key={index} {...route}/>
})

Анимация маршрутизации

пройти черезreact-router-transitionСделайте анимацию переключения.

Затем передайте history.slideStatus, чтобы определить, как анимировать

специфичный для реакции-маршрутизатора API

redux-thunk обрабатывает действия асинхронно

использоватьredux-actionsписать действия и редукторы

// 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()

Также есть разрозненные очки знаний, которые не будут вводиться, подробности можно найти наgithubПосмотреть выше.

github

личный блог

Адрес онлайн-просмотра

Категории