• React dva Model案例 2020-01-14 09:05:55
    1、路径: /src/routes/...import React from 'react'; import { connect } from 'dva'; // 引入接口 import * as apis from '../services/example'; import styles from './IndexPage.css'; class IndexPage ext...
    1、路径: /src/routes/IndexPage.js
    
    ```js
    import React from 'react';
    import { connect } from 'dva';
    // 引入接口
    import * as apis from '../services/example';
    import styles from './IndexPage.css';
    
    class IndexPage extends Component {
      constructor(props) {
        super(props);
        this.state = { 
          
         };
      }
    
      handleSetName=()=> {
        console.log(this.props)
        this.props.dispatch({
          //调用Model 中的方法 (setName)
          type:"indexTest/setName", // 命名空间加上方法名
          data: {
            name: "zhuzhuxia"
          }
        })
      }
    
      handleSetNameAsync=()=> {
         this.props.dispatch({
          type:"indexTest/setNameAsync",
          data: {
            name: "zhuzhuxia"
          }
        })
      }
    
      componentDidMount() {
        apis.testCnode().then((res) => {
          console.log(res);
        })
      }
      testCnode=()=> {
        this.props.dispatch({
          type:"indexTest/testCnode"
        })
      }
    
    
      render() {
        console.log(this.props.msg)
        console.log(this.props.cnodeData);
    
        return (
          
            我是首页 
            {this.props.msg}
            {this.props.name}
          
          setName
          setNameAsync
          testCnode
        );
      }
    }
    const mapStateToProps =(state)=> {
      // mapStateToProps 是一个函数 用于建立组件跟store 和state 的映射关系
        console.log(state);
        return {
          msg: "" ,
          name:state.indexTest.name,
          cnodeData:state.indexTest.cnodeData
        }
    
    }
    export default IndexPage;
    
    export default connect()(IndexPage);
    
    
    
    ```
    
    2、/src/models/indexTest.js
    
    ```js
    
    
    export default {
      namespace: "indexTest", // model的命名空间 
      state: { //初始值
        name: "",
        cnodeData:{}
      },
      reducers: { 
        //  以key/value 格式定义的reducer 用于处理同步操作 
        // 唯一可以修改 state 的地方  由action 触发 
        setName(state, payload) {
          // payload组件返回来的参数
          // state 保存数据到state 
          let state = JSON.parse(JSON.stringfy(state));
    
          console.log("我被IndexPage调了 ");
          console.log(payload.data.name);
    
          _state.name = payload.data.name;
          return _state;
        },
        setCnodeDataList(state, payload){
            let state = JSON.parse(JSON.stringfy(state));
    
            return _state;
        },
    
        testPath(state, ) {
    
        },
    
        effects: {
          // 用于处理异步操作和业务逻辑  不直接修改state 由action 触发 
          //  可以触发 action  可以和服务器交互  可以获取全局 state 数据
          *setNameAsync({payload},{put, call}) {
           yield put({
              type: "setName",
              data: {
                name: "超人强"
              }
            })
    
             yield  console.log("run");
    
          }
    
          *testCnode({payload},{put, call}) {
          let rel = yield call(apis.testCnode)
          if (rel.data) {
            console.log(rel.data.data);
            yield put({
              type: "setCnodeDataList",
              data:rel.data.data
            })
          }
          console.log(rel);
          },
          subscriptions: {
            // 订阅一个数据源 然后根据需要dispatch 相应的action 
            test({dispatch, history}) {
              //  监听history 变化  当进入 `/` 时触发
             history.listen(({pathname})=> {
               if (pathname === "/user") {
                 console.log("用户页")
                 dispatch({
                   type:"testPath"
    
                 })
               }
             })
            }
          }
        }
      }
    }
    ```
    3、[这篇是实例](https://blog.csdn.net/weixin_45416217/article/details/103514013)
    看上面这篇连我自己都看不懂 比较教材化 不是实例
    
    
    展开全文
  • Dva最佳实践 -- 循序渐进理解 dva中的model概念一. 序二. 在create-react-app中使用redux1. 开始2. 安装redux三.异步action四. Dva中的model五. subscriptions属性 作者: DocWhite白先生 一. 序 在dva框架中model的...
  • React最初来自Facebook内部的广告系统项目,项目实施...React带来了很多开创性的思路来构建前端界面,虽然选择React的最重要原因之一是性能,但是相关技术背后的设计思想更值得我们去思考。React发布的0.13版,开始提供
  • 编者按:自2013年Facebook发布以来,React吸引了越来越多的开发者,基于它的衍生技术,如React Native、React Canvas等也层出不穷。InfoQ精心策划“深入浅出React”系列文章,为读者剖析React开发的技术细节。 ...
  • React的起源 React来自于Facebook,是的,就是那个你们听说过但是打不开的网站。Facebook的开发者当时在开发一个广告系统,因为对当前所有的MVC框架不满意,所以就自己写了一个UI框架,于是就有了React。后来因为...
  • React 图解 超详细 2018-08-16 17:44:03
    React、ReactJS、React.js、React Native… 这些有些相似的名词你最近听过多少遍了?对于它们究竟是什么你是否感到困惑? 如果你是一名设计师,你所在的团队使用(或正在考虑使用)的技术是 React ,或者你只是单纯对...
  • 解释mvc的设计模式,以及react 与mvc的关系(仅代表个人观点) mvc模式 mvc是一种使用mvc(model view controller 模型-视图-控制器)设计创建web应用程序的模式 model(模型)表示应用程序核心(比如数据记录列表...
  • React和Vue区别 2019-06-26 15:04:35
    1.监听数据变化的实现原理不同 Vue通过getter/setter以及一些函数的劫持,能精确...这是因为Vue和React设计理念上的区别,Vue使用的是可变数据,而React更强调数据的不可变,两者没有好坏之分,Vue更加简单,而Rea...
  • React 修炼之 Model篇详解 2019-10-07 09:55:43
    import * as usersService from '../services/users'; export default { /* ...整个应用的 State,由多个小的 Model 的 State 以 namespace 为 key 合成 */ namespace: 'users', ...
  • React设计思想 2019-09-21 08:32:42
    React的官方博客中明确阐述了React不是一个MVC框架,而是一个用于构建组件化UI的库,是一个前端界面开发工具。所以顶多算是MVC中的V(view)。React并没有重复造轮子,而是有很多颠覆性的创新...
  • React Native弹框封装 2019-02-28 17:39:51
    在使用RN开发项目时,经常会遇到各种弹框,产品在设计时又是参照iOS来做的,效果如下: 基于此,我们就来封装一个这样的组件,下面是示例代码: import React, {Component} from 'react'; import PropTypes from '...
  • React-Native设计理念总结 2018-05-27 19:11:52
    1.-分层:common + expand dao + model + navigators +page +util common 中放常见的公共组件,如标题栏,列表每一行组件expand dao 持久层公共组件 , 在类中用不同常量标示,从而实现复用model 模型层navigator ...
  • react刚刚推出的时候,讲react优势搜索结果是几十页。 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文。 今天,再谈一遍react优势,WTF? React的收益有...
  • React 框架解析 2015-01-19 18:07:03
    最近我对一些 JavaScript 框架有了兴趣, 包括 Facebook 的 React. 我最近阅读的文章, 特别是 The Future of JavaScript MVC Frameworks, 让我相信在 React 当中有一些深入的强大的想法在里边, 然而我没找到文章或者...
  • 本文从属于笔者的React入门与最佳实践系列,推荐阅读GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean Communication React组件一个很大的特性在于其拥有自己完整的生命周期,因此我们可以将React组件...
  • react 中发布订阅模式使用 2019-04-15 22:32:33
    怎么能将设计模式应用到我们的 React 项目中?以前一直在思考这个问题。 场景一 模块 A 模块 B 需要用到同一个数据 data,A 和 B 都会修改这份数据,且这两个模块会同时存在;这时我们如何做到数据公用与各个模块...
  • 最近在做项目的过程中,遇到了一个需求,在一个list中,当鼠标移动到某一项上的时候,为该项设置一个遮罩层,显示对该项的操作。 废话不多说,直接上效果: 对于鼠标移入后显示遮罩层的操作...import React from '...
  • React Native概述什么是React NativeReact Native是Facebook在React.js Config 2015 大会上推出的一个用于开发Android和iOS App的一个框架。主要编程语言是JavaScript,UI使用JSX(一种语法类似于XML的UI描述语言)...
  • React、ReactJS、React.js、React Native… 这些有些相似的名词你最近听过多少遍了?对于它们究竟是什么你是否感到困惑? 如果你是一名设计师,你所在的团队使用(或正在考虑使用)的技术是 React ,或者你只是单纯对...
1 2 3 4 5 ... 20
收藏数 6,352
精华内容 2,540