react+umi+dvajs 实战演练1

引言

随着前端技术的日新月异，React和Umi作为前端领域中的佼佼者，它们的结合为我们提供了一种构建高效Web应用的新思路。React作为Facebook开发的一款JavaScript库，用于构建用户界面，具有声明式、组件化、高效等特点；而Umi则是一款可扩展的企业级前端应用框架，它基于React，提供了路由、构建、部署等一系列开发体验的优化。

一、React基础

React组件是构建应用的基本单元，每个组件负责渲染页面的一部分。组件可以是函数或类，它们接收输入（props）并返回要显示的React元素。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

2. 状态管理

React组件可以拥有内部状态，当状态改变时，组件会重新渲染。状态通常通过setState方法进行更新。

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }
 
  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }
 
  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }
 
  componentWillUnmount() {
    clearInterval(this.interval);
  }
 
  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

二、Umi入门

1. 安装与配置
   通过npm或yarn全局安装Umi：

npm install -g umi
# 或者
yarn global add umi

创建一个新的Umi项目：

umi g

进入项目目录并启动开发服务器：

cd my-project
umi dev

2. 路由配置
   Umi的路由配置非常灵活，支持多种路由模式。在.umirc.js或config/config.js文件中进行路由配置。

export default {
  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/about', component: '@/pages/about' },
  ],
};

三、React与Umi的结合

1. 组件化开发

在Umi项目中，我们可以充分利用React的组件化特性，将页面拆分为多个独立的组件，提高代码的可维护性和复用性。

2. 路由与页面管理

通过Umi的路由配置，我们可以轻松管理项目的页面和路由，实现页面的按需加载和动态渲染。

3. 构建与部署

Umi提供了丰富的构建和部署选项，包括代码压缩、资源优化、多环境配置等，帮助我们构建高效、稳定的Web应用。

四、示例代码与详细解释

以下是一个简单的Umi项目示例，展示了React与Umi的结合使用。

1. 项目结构

my-project/
|-- .umirc.js
|-- src/
|   |-- pages/
|   |   |-- index.js
|   |   |-- about.js
|   |-- components/
|   |   |-- Header.js
|   |   |-- Footer.js
|-- package.json

2. .umirc.js配置

export default {
  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/about', component: '@/pages/about' },
  ],
};

3. src/pages/index.js

import React from 'react';
import { Header, Footer } from '@/components';
 
function IndexPage() {
  return (
    <div>
      <Header />
      <h1>Welcome to the Home Page!</h1>
      <Footer />
    </div>
  );
}
 
export default IndexPage;

4. src/pages/about.js

import React from 'react';
import { Header, Footer } from '@/components';
 
function AboutPage() {
  return (
    <div>
      <Header />
      <h1>About Us</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p >
      <Footer />
    </div>
  );
}
 
export default AboutPage;

5. src/components/Header.js

import React from 'react';
 
function Header() {
  return <h2>My App</h2>;
}
 
export default Header;

6. src/components/Footer.js

import React from 'react';
 
function Footer() {
  return <p>© 2023 My App</p >;
}
 
export default Footer;

在这个示例中，我们创建了一个简单的Umi项目，包含两个页面（首页和关于页面）和两个组件（Header和Footer）。通过Umi的路由配置，我们指定了每个页面的组件对应关系。在页面中，我们使用了React组件化的方式引入了Header和Footer组件，实现了页面的快速构建。

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 }
        }
    }
}

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)

1.dva简化了React的setState跨组件传输数据的耦合，数据通过mapStateToProps就可以共享数据，并且比Redux传输数据操作要更简单，可以自动处理等待状态

2.数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State，所以在 dva 中，数据流向非常清晰简明，并且思路基本跟开源社区保持一致（也是来自于开源社区）。

3.通过URL调用渲染组件初始化dom的时候，会通过connect(mapStateToProps) 加载共享数据，并且调用dispatch会触发action 进行同步或异步操作或者监听地址栏是否传入参数的处理。

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