React - DavJS

1 简单描述

1 它可以搭建一个 CLI 环境  //但目前已经被作者弃用, 推介使用 Umi

2 Dva 核心是一个基于 redux 和 redux-saga 的数据流方案  //就是更好的使用全局状态管理
  
3 为了简化开发体验, 还内置了 react-router 和 fetch  //类似使用 Vue-CLI 时配置了 router, Vuex 这些

4 我们可以不使用它搭建 CLI 来使用它去管理全局数据吗 ??

2 Dva 基本流程

1 公共数据 Models  //放在全局需要被很多组件共享的数据
------------------------------------------------------------------------------
  1 相关理解: 
	1 在全局状态模块中, 又可以分为同步数据和异步数据  //Vuex 中有, 专用的操作同步和异步数据的API
	2 组件内部可以调用同步和异步, 但是异步需要经过同步的处理才可以, 让我们使用
	
	3 同步 Reducer: 
	4 异步 Effect: 
------------------------------------------------------------------------------

2 私有数据 state  //只在当前组件中, 需要的数据
------------------------------------------------------------------------------



------------------------------------------------------------------------------

3 

4 

5 

2 基础项目目录结构

1 mock  //用于模拟一些假数据来使用

2 public  //放置那个html 文件

3 src
  1 models  //放置 redux 部分
  2 routes  //首页显示的部分, 类似 views 文件, 用于存放单文件组件页面的
  3 services  //调用请求的路径配置
  4 utils  //就是配置数据请求的
  5 router.js  //路由配置文件 --> 注意一下使用方式

3 Dva 中定义路由

1 定义路由文件: //新建单文件组件 -> routes/A1.js

2 编辑 router.js  //简单添加一条路由映射表
  + import A1 from "./routes/A1"
  + <Route path="/a1" exact component={A1}/>

4 Dva 中的一些 API

1 React 中的跳转标签
  + import {Link} from 'dva/router'
  + <Link to="/"> 首页</Link>  //跳转到首页

2 高阶组件 -> 被它修饰过的组件内部的 props上, 会增加 history路由跳转功能
  + import {withRouter} from 'dva/router'
  + this.props.history.push("/")  //跳转到首页
  + export default withRouter(A1)  //高阶组件修饰步骤

5 models 全局窗台管理 🔶

// 基于 redux 的简单状态管理应用

1 模块数据配置流程
-----------------------------------------------------------------------------------------
1 新建命名空间: src/models/test

2 index.js -> Model(参照格式) //入口文件中引入要用到的命名模块模块: 
  + app.model(require('./models/test').default);
-----------------------------------------------------------------------------------------


2 单文件组件中如何访问数据
-----------------------------------------------------------------------------------------
  + import {connect} from 'dva'  // +1
  + class A1 extends React.Component{
  +   render() {return (<Fragment>{this.props.name}</Fragment>)}  //+2
  + }
  + const mapStateToProps = state => {  //+3
      console.log(state);  //这个函数内部可以访问到, models 模块中的 state
  	  return {
    	msg: "zhang"  //这个位置定义的数据可以被组件内部所访问
    	name: state.test.name  //获取 state 的数据, 定义在这里, 被组件所使用; test == 命名空间名称
  	  }
	}
  + export default connect(mapStateToProps)(A1)  //+4
-----------------------------------------------------------------------------------------

3 单文件组件中如何调用方法
-----------------------------------------------------------------------------------------
  import {connect} from 'dva'
  class A1 extends React.Component{
    hh() {  //在函数方法中配发任务   ++1
      this.props.dispatch({
        type: "test/setName"  //命名空间名称/函数方法名
      })
    }
    render() {return (<Fragment>
      <button onClick={()=>this.hh()}> setName </button>  // ++2
    </Fragment>)}
  }
  const mapStateToProps = state => {
    return {
	  哈哈
  	}
  }
  export default connect(mapStateToProps)(A1)
-----------------------------------------------------------------------------------------

4