DVA知识集合

react与dva

原文地址：https://github.com/dvajs/dva-knowledgemap

1.变量声明

const DELAY = 1000

let count = 0
count = count + 1

2. 模板字符串

const user = 'world'
console.log(`hello ${user}`)

// 多行

const content = `
    hello ${user}
    thanks for you ${user}
`
console.log(content)

3. 默认参数


function logActivity(activity = 'skiing'){
    console.log(activity)
}

logActivity() ;// skiing

4. 箭头函数

[1, 2, 3].map(x => x + 1) // [2,3,4]

// 等同于

[1, 2, 3].map((function(x) {
   return x + 1;
}).bind(this));

5. 模块的Import 和 Export


 import dva from 'dva' 

 import {connect} from 'dva'

 import * as service from './services'

 export default App

 export class App extends Component{}

6. ES6对象和数组

6.1 析构赋值

// 对象
const people = {name:'kk',age:12}
const { name , age } = people
console.log(`${name}:${age}`)

// 数组
const arr = [1,2]
const [foo,bar] = arr
console.log(foo)

// 函数
const add = (state,{payload}) => {
    return state.concat(payload)
}

// alias别名
const plus = (state,{payload:todo}) => {
    return state.concat(todo)
}

6.2 对象字面量

const n = 'kk'
const a = 8

const u = {n , a}

// 定义对象的方法时，可省略去function

app.model({
    reducers:{
        add(){} // <=> add: function() {}
    },
    effects:{
        *addRemote() {} // <=> addRemote: function() {}
    }
})

6.3 展开符 Spread Operator

// 组装数组
const array = ['add']
// [...array,'remove']

// 获取部分项
function directions(first,...rest){
    console.log(rest)
}
console.log(directions('a','b','c'))

// 代替apply

function fun(x,y,z){
    console.log(y)
}
const args = [1,2,3]

fun.apply(null,args)
// 等同于
fun(...args)

// 合成新的object

const old = {
    a:1
}
const change = {
    b:2
}

const ret = {...old , ...change}

6.4 Promises


fetch('/api/todos')
    .then(res => res.json())
    .then(data => ({data}))
    .catch(err => ({err}))

// 定义promise
const delay = (timeout) => {
    return new Promise(resolve => {
        setTimeout(resolve,timeout)
    })
}

delay(1000).then(_ => {
    console.log('executed')
})

6.5 Generators 生成器

/*
概述：dva 的 effects 是通过 generator 组织的。Generator 返回的是迭代器，通过 yield 关键字实现暂停功能。
这是一个典型的 dva effect，通过 yield 把异步逻辑通过同步的方式组织起来。
*/

app.model({
    namespace:'todos',
    effects:{
        *addRemove({payload:todo},{put,call}){
            yield call(addTodo,todo)
            yield put({type:'add',payload:todo})
        }
    }
})

————————————————-重要内容—————————————————

7. React Component

7.1 组件定义的方式

函数

类

7.2 JSX

7.2.1 扩充组件的props


const attrs = {
    href : 'http://exm.org',
    target:'_blank'
}
<a {...attrs}>hello</a>

7.3 Props

7.3.1 propTypes

// 概念：由于js是弱类型语言，声明propTypes对props进行校验是有必要的

function App (props){
    return <div>{props.name}</div>
}

App.propTypes = {
    name:React.PropTypes.string.isRequired
}

7.4 Css Modules


.title {
  color: red;
}
:global(.title) {
  color: green;
}


//然后在引用的时候：
<App className={styles.title} /> // red
<App className="title" />        // green

7.5 classnames Package

/*
概念：在一些复杂的场景中，一个元素可能对应多个 className，而每个 className 又基于一些条件来决定是否出现。
这时，classnames 这个库就非常有用。
*/

import classnames from 'classnames'
const App = (props) => {
    const cls = (props) => {
        btn : true,
        btnLarge:props.type === 'submit',
        btnSmall:props.type === 'edit'
    }
    return <div classNames={cls}>
} 

//这样传入不同的type给App组件，就会返回不同的className组合
<App type='submit'/>
<App type='edit'/>

7.6 Reducer

// 增删改 以todo为例

app.model({
    namespace:'todos',
    state:[],
    reducers:{
        add(state,{payload:todo}){
            return state.concat(todo)
        },
        remove(state,{payload:id}){
            return state.filter(todo => todo.id !== id)
        },
        update(state,{payload:updatedTodo}){
            return state.map(todo=>{
                if(todo.id === updatedTodo.id){
                    return {...todo,...updatedTodo}
                }else{
                    return todo
                }
            })
        }
    }
})


// 嵌套数据的增删改

app1.model({
    namespace:'app',
    state:{
        todos:[],
        loading:false,
    },
    reducers:{
        add(state,{payload:todo}){
            const todos = state.todos.concat(todo)
            return {...state,todos}
        }
    }
})

7.7 Effect


app2.model({
    namespace:'todos',
    effects:{
        *addRemove({payload:todo},{put,call}){
            yield call (addTodo,todo)
            yield put({type:'add',payload:todo})
        }
    }
})

7.7.1 put 用于出发action


yield put({ type: 'todos/add', payload: 'Learn Dva' });

// 7.7.2 call 用于调用异步逻辑 支持promise

const result = yield call(fetch, '/todos');

// 7.7.3 select 从state中获取数据

const todos = yield select(state => state.todos)

7.7.3 错误的处理

app.model({
  effects: {
    *addRemote() {
      try {
        // Your Code Here
      } catch(e) {
        console.log(e.message);
      }
    },
  },
});

7.8 异步请求 whatwg-fetch

fetch学习地址: https://github.com/github/fetch

7.8.1 get 和 post

import request from '../util/request'

//get
request('/api/todos')

// post

request ('/api/todos',{
    methods:'post',
    body:JSON.stringify({a:1})
})

7.9 Subscription 订阅异步数据的初始化

app.model({
    subscriptions:{
        setup({dispatch,history}){
            history.listen(({pathname})=>{
                if(pathname === 'users'){
                    dispatch({
                        type:'users/fetch'
                    })
                }
            })
        }
    }
})

7.10 路由基于action进行页面跳转

import {routerRedux} from 'dva/router'
// inside effects
yield put(routerRedux.push('/logout'))
// outside effects
dispatch(routerRedux.push('/logout'))
// with query
routerRedux.push({
    pathname:'/logout',
    query:{
        page:2,
    }
})

8.0 dva的配置

8.1 Redux Middleware 添加中间件


import createLogger from 'redux-logger'

const app = dva ({
    onAction:createLogger() // onAction支持数组，可同时传入多个中间件
})

// history 切换history为browserHistory

import {browserHistory} from 'dva/router'
const ap = dva({
    history:browserHistory
})

//去除 hashHistory 下的 _k 查询参数

import { useRouterHistory } from 'dva/router';
import { createHashHistory } from 'history';
const app2 = dva({
  history: useRouterHistory(createHashHistory)({ queryKey: false }),
});

9.0 工具

9.1 通过dva-cli创建项目


$ npm i dva-cli -g # 安装dva-cli
$ dva new myapp # 创建项目
$ cd myapp
$ npm start # 启动项目

react与dva

1.变量声明

2. 模板字符串

3. 默认参数

4. 箭头函数

5. 模块的Import 和 Export

6. ES6对象和数组

6.1 析构赋值

6.2 对象字面量

6.3 展开符 Spread Operator

6.4 Promises

6.5 Generators 生成器

7. React Component

7.1 组件定义的方式

7.2 JSX

7.2.1 扩充组件的props

7.3 Props

7.3.1 propTypes

7.4 Css Modules

7.5 classnames Package

7.6 Reducer

7.7 Effect

7.7.1 put 用于出发action

7.7.3 错误的处理

7.8 异步请求 whatwg-fetch

7.8.1 get 和 post

7.9 Subscription 订阅 异步数据的初始化

7.10 路由 基于action进行页面跳转

8.0 dva的配置

8.1 Redux Middleware 添加中间件

9.0 工具

9.1 通过dva-cli创建项目

猜你喜欢

7.9 Subscription 订阅异步数据的初始化

7.10 路由基于action进行页面跳转