umi+dva+react框架快速入手1.

React框架快速入手

简介-

资料
- react官网
- 编辑器VScode
- 源码地址
- umi
- dva
- antd
环境
- node.js
- 淘宝镜像
特性：
- 虚拟dom
- 面向对象
- MVC

与原始HTML的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>hello world</div>
    <button onclick="btnClick()">点击</button>
   
</body>
<script>
    const btnClick = () => {
        alert('hello')
    }
</script>
</html>

react

创建模块并关联路由

const App = () => {
    return (
        <div>hello</div>
    )
}

export default App;

组件存储useState，生命周期，useEffect

import React, { useState, useEffect } from 'react';
const [value,setValue] = useState('')
useEffect(() => {
       //do something
	}, [])

service和model

import request from "@/utils/request"

export async function getList() {
  return request(`/api/hate-service/hate/org/list?type=1`)
}

import {
  getList,
} from "./service"
const Model = {
  namespace: "hello",
  state: {
    list: [],
  },
  effects: {
    *getList(obj, { call, put }) {
      const response = yield call(getList, obj)
      console.log(response,'responseresponse')
    },
    
  },

  reducers: {
    save(state, { payload }) {
      return {
        ...state,
        ...payload,
      }
    },
  },
    
}
export default Model

proxy服务器代理

const proxy = {
  "/api/": {
    target: "http://jxappserver.jiuxiniot.com:8080",
    changeOrigin: true,
    pathRewrite: { "^/api": "" },
  }
}
export default proxy

view层关联model层

connect

import { connect } from "umi"


const App = (props) => {
    console.log(props,'---')
    return (
        <div>hello</div>
    )
}

// export default App;

export default connect(({ hello,  loading }) => ({
    list: hello.list,
    submitting: loading.effects["hello/getList"],
  }))(App)

dispatch调用effects

调用antd，ui组件

import {Button} from 'antd';
const App = (props) => {
    console.log(props,'---')
    const [value,setValue] = useState('')
    useEffect(() => {
       //do something
    }, [])
    return (
        <>
        <div>hello</div>
        <Button>按钮</Button>
        </>
    )

}