携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

一、react项目---插件安装和页面初始化（后台管理的demo）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

图片上右边目录还少了个文件目录：routes/index.js 路由文件

基础文件的初始化书写格式模板

二、react-----umi中的数据流向问题 + 约定式路由 + 路由传参

umi

umi是一个react的企业级开发框架，内置了dva、路由等插件。可以实现零配置的方式开发一个react项目

umijs.org/zh-CN

创建项目

npm create umi first-umi-app # 创建一个first-umi-app项目
cd first-umi-app # 进入目录
npm i
npm start # 启动项目

目录

src 表示源代码

.umirc.js 是配置文件

src/models 此文件夹中的内容是redux数据

model的代码示例

export default {
    namespace: 'book',
    state: {
        list: [],
        page: 1,
        current: {}
    },
    // 所有的redux中的异步操作
    effects: {
        // 此处的redux集成了插件redux-saga来对action和reducers做处理
        // loadData表示加载数据
        *loadData({ payload }, { call, put }) {
            // call用来调用接口 获取数据
            // put 用来派发action,是redux-saga中的一个方法
            // 此种写法是es6中generate生成器函数
            yield put({
                type: 'save',
                payload: {
                    list: [{id: 1, name: '球状闪电'}, {id:2, name: '沙丘'}]
                }
            })
        },
        *getOne({ payload }, { call, put }) {
            
        }
    },
    reducers:{
        save(state, { payload }) {
            return { ...state, ...payload }
        }
    }
}

在组件中映射model

import { connect } from 'umi'


//  List 此处的命名首字母要大写
const List = (props) => {
    // props中就会包含有book中的数据和dispatch方法
    // 如果我们要改变数据 通过dispatch({ type: 'book/save', payload: {} })
    const { list, page, dispatch } = props
    return <h1>我是一个组件</h1>
}

export default connect(state=>state.book)(List)

==大佬写的Dva基本概念和原理==

具体请看链接：大佬写的Dva--易懂

详细的看下图链接
namespace:可以通过空间名找到对应的model下的 viewer.js
state: {cesiumViewer:undefined} 存储共享的数据
subscriptions:常用来监听浏览器地址输入的参数
effects:异步处理
reducers:同步处理
save:自定义方法里的 state为当前的数据，action.payload为传过来要改变的数据