如何从小白到熟练掌握 react + antd + dva + umi 实现项目

目前所理解的关于 react 项目的处理，可以解决基本项目操作：

别人的：https://blog.csdn.net/qq_34703156/article/details/82019496

为什么推荐使用 函数式组件：
https://www.zhihu.com/question/343314784/answer/937174224
https://zhuanlan.zhihu.com/p/94030173

1、建议先阅读 https://www.runoob.com/react/react-tutorial.html （菜鸟的关于react基础的写法）
2、使用dva.js   https://dvajs.com/guide/getting-started.html (手把手教学 搭建 dva + antd + react 项目）
	1、关于样式没有实现的问题
	2、函数式组件 和 class 组件的使用区别 （this 指向 和 props 的处理）
	3、注意 解决  moldes 和 组件之间的数据问题 建议参考
	https://dvajs.com/guide/introduce-class.html#connect-%E6%96%B9%E6%B3%95
	4、预见问题最多的就是 数据的 指向 和 引入使用问题 
	（1、props -- class 的
		 2、引入问题 函数组件的）
		 
	5、注意 引入 models 的时候 重复引入也是会报错的
		 
注意以上 文档必须 认真阅读。
下载使用的时候建议使用 cmd （git 可能设计版本升级问题）

3、创建 umi + ts  + antdPro  为主导的项目 dva+umi+antd项目从搭建到使用
	建议阅读：
	1、ts 基础  https://www.runoob.com/w3cnote/getting-started-with-typescript.html
	2、http://ts.xcatliu.com/introduction/what-is-typescript.html


4、搭建项目遇到的问题
	1、无法将"cross-env"识别为内部或外部命令，
	解决方案 ：https://www.it1352.com/1540999.html

个人认为 ：react的 基本操作就是 组件 和 models 以及 路由之前的处理。

组件代码：（其中 注释的为 函数式组件的写法，里面数据 用到的是 antd 的组件）

import React from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';

// const listPage = (state) => {
//   const {dispatch,products} = state; // 解构传入的参数1
//   const {list} = products

//   console.log(state.products.list,'?w zai yem ')

//   function handleDelete(id) {
//     dispatch({
//       type: 'products/delete',
//       payload: id,
//     });
//   }
//   return (
//     <div>
//       <h2>List of Products</h2>
//       <ProductList onDelete={handleDelete} products={list} />
//     </div>
//   );

// };

class listPage extends React.Component {
  render() {
    const {dispatch,products} = this.props; // 解构传入的参数1
    const {list} = products

    console.log(this.props.products,'我是解构后的数据')

    const handleDelete= (id)=> {
      dispatch({
        type: 'products/tabelDelete',
        deleteId: id,
      });
    }
    return (
      <div>
        <h2>List of Products</h2>
        <ProductList onDelete={handleDelete}  products={list}/>
      </div>
    )
  }
}

const listPageProps = (state) => { // 2、此函数必须要有,建立 State 到 Props 的映射关系
  return state;
};
export default connect( listPageProps )(listPage); // 1、connect 绑定 State 到 View。

models：（这个看个人理解，跟 vuex 的数据状态管理很像，都是 统一处理处理）

import { message } from 'antd';
import createHistory from 'history/createBrowserHistory';

export default {
    history: createHistory(),
    namespace: 'products', // 此处的 名字就是传参的all 整体
    state: {
      list:[
        { name: 'dva', id: 1 },
        { name: 'antd', id: 2 },
        { name: 'dva', id: 3 }
      ],
      total: null,
      loading: false, // 控制加载状态
      current: null, // 当前分页信息
      currentItem: {}, // 当前操作的用户对象
      number: 1
    },
    reducers: { // 11-30 只能同步操作，distach 触发 注意： 必须要return 值 ；

      updateState(state, { payload }) {
          console.log(payload ,'????????')

          return {...state, ...payload}; // 对象的合并必须有 key 一致的才能合在一起
      },
      clearParams(state, {...payload}) {
          return {
              ...state
          }
      }

    },
    
    effects: {

      *tabelDelete( { payload }, { call, put ,select}){

        let aa = [ // 假如 aa 是ajax 请求回来的
          { name: 'dva', id: 1 }
        ]
        // const list = call(aa)  // call 用于 异步请求 获取的数据

        yield put({ // put 用于更新数据
          type:'updateState',
          payload:{  // 此处传参的key 值 必须跟 state 里面的保持一致
            list: aa
          }
        })

      }

    },

    //用于订阅某些数据 并根据情况dsipatch某些action 格式为 ({ dispatch, history }, done) => unlistenFunction。
    //监听路由的变化，当路径为todolist时就调用 action
    subscriptions:{

      setup({ dispatch, history }) {
        // 监听路由的变化，请求页面数据
        return history.listen(({ pathname, search }) => {

          console.log(pathname);

          const obj = 
          {
            list: [
                { name: 'dva', id: 1 },
                { name: 'antd', id: 2 }
              ]
          }

          if (pathname === '/list1') {
            dispatch({ type: 'updateState', payload: obj }) // obj -- 对象，里面 数据的 key 值跟 updateState里面 保持一致
          }


        })
      }
      
    }


  };

路由router：（此处的路由我觉得较为不错，注意此处引入之后，index 文件不需要在引入models 不然会报错）

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic';

const routes = [
    //登录页
    {
      path: '/',
      models: () => [import('./models/products')], 
      component: () => import('./routes/IndexPage')
    },
    {
      path: '/home',
      models: () => [import('./models/products')], 
      component: () => import('./home/home')
    },
    {
      path: '/list1',
      models: () => [import('./models/products'),import('./models/example')], // 1、可以直接引入models，2、可以为数组
      component: () => import('./list/list')
    },

    {
      path: '/Myfavorite',
      models: () => [import('./models/products')], 
      component: () => import('./Myfavorite/Myfavorite')
    },
    {
      path: '/calendar',
      models: () => [import('./models/products')], 
      component: () => import('./calendar/calendar')
    },
]


function RouterConfig({ history, app }) {
  return (
      <Router history={history}>
          <Switch>
              {routes.map(({ path, ...dynamics }, key) => (
                  <Route
                      key={key}
                      exact
                      path={path}
                      component={dynamic({
                          app,
                          ...dynamics,
                      })}
                  />
              ))}
          </Switch>
      </Router>
  );
}
export default RouterConfig;