运用Dva+antd-mobile构建一个挪动端web

项目地点:dva-demo

顺手一个小star赋予动力,感谢!

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8000
npm start

# build for production with minification
npm run build

手艺选型

  1. 基本框架:react
  2. UI库:antd-mobile
  3. 脚手架:dva

插件运用

  1. polished (css-in-js css modules)
  2. react-loadable (可用于骨架屏loading)

vs-code 引荐插件

  1. auto close tag (自动闭合html标签)
  2. auto rename tag (自动修正html标署名)
  3. Bracket Pair Colorizer 2 (代码括号嵌套色彩辨别)

vs-code 设置修正

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.triggerExpansionOnTab": true

建立组件的几种体式格局

一. 函数式定义的 无状况组件
function HelloComponent (props) {
    return <div>hello {props.name}</div>
}
  1. 无状况,纯展现组件,不涉及到state状况的操纵;
  2. 组件不会被实例化,团体衬着机能获得提拔;
  3. 组件不能接见this对象,若要接见不能经由过程这类体式格局建立;
  4. 组件无法接见生命周期的要领;
  5. 无状况组件只能接见输入的props,一样的props会获得一样的衬着效果,不会有副作用??;

tips: 只需有能够,只管运用无状况组件

二. React.createClass (不引荐)
var input = React.createClass({
    propTypes: { // 定义传入props中的属性各种类型
        initialValue: React.propTypes.string
    },
    defaultProps: { // 组件默许props对象
        initialValue: ''
    },
    getInitialState: function () {
        return {
            text: this.props.initialValue || 'placeholder'
        }
    },
    handleChange: function (event) {
        this.setState({
            text: event.target.value
        })
    },
    render: function () {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange} value={this.state.text} />
            </div>
        )
    }
})
  1. 要被实例化,具有生命周期
  2. 有状况的

瑕玷:

  1. React.createClass会自绑定函数要领(不像React.Component只绑定须要体贴的函数)致使不必要的机能开支,增添代码过期的能够性。
  2. React.createClass的mixins不够天然、直观;React.Component情势异常合适高阶组件(Higher Order Components–HOC),它以更直观的情势展现了比mixins更壮大的功用,而且HOC是纯洁的JavaScript,不必忧郁他们会被烧毁
三. React.Component (有状况组件引荐体式格局)
class input extends React.Component{
    constructor (props) {
        super(props);
        this.state = {
            text: props.initialValue || 'placeholder'
        }
        // ES6类中函数必需手动绑定
        this.handleChange = this.handleChange.bind(this)
    }
    handleChange(event) {
        this.setState({
            text: event.target.value
        })
    }
    render () {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange} value={this.state.text} />
            </div>
        )
    }
}
input.propTypes = {
    initialValue: React.PropTypes.string
}
input.defaultProps = {
    initialValue: ''
}

区分:

函数this绑定:

createClass中this自动绑定,

component中不会自动绑定:三种体式格局绑定

// 体式格局一:组织函数中绑定this
consutructor (props) {
  super(props);
  this.handleClick = this.handleClick.bind(this)
}
// 体式格局二: 运用bind绑定
<div onClick={this.handleClick.bind(this)}></div>
// 体式格局三: 运用arrow function绑定
<div onClick={() => {this.handleClick()}}></div>

路由跳转

/*
 *  跳转
**/
 
// 体式格局1: 标签跳转
import { Link } from 'dva/router'
<Link to={{
    pathname: '/result',
    search: '?a=1&b=2',
    state: {
        id: 32
    }
}}></Link>

// 体式格局2: props.history (不引荐)
props.history.push('/result')

// 体式格局3: routerRedux
props.dispatch(
    routerRedux.push(
        pathname: '/result',
        search: '?a=1&b=2',
        state: {
            id: 32
        }
    )
)

/*
 *  参数吸收
**/
1. modal/app.js/subscriptions/setup 相当于路由守御,中间件
2. 每一个组件中props中location

Dva Model 数据流:

《运用Dva+antd-mobile构建一个挪动端web》

《运用Dva+antd-mobile构建一个挪动端web》

Model 对象的属性
  1. namespace: 当前 Model 的称号。全部运用的 State,由多个小的 Model 的 State 以 namespace 为 key 合成
  2. state: 该 Model 当前的状况。数据保留在这里,直接决议了视图层的输出
  3. reducers: Action 处置惩罚器,处置惩罚同步行动,用来算出最新的 State
  4. effects:Action 处置惩罚器,处置惩罚异步行动
  5. subscriptions: 定阅,相当于监听

dva 供应多个 effect 函数内部的处置惩罚函数,比较经常使用的是 call 和 put。

call:实行异步函数

put:发出一个 Action,类似于 dispatch

取state的值

经由过程connect mapStateToProps函数将须要用到的数据合并到props中,再在组件中取

修正state的值

经由过程dispath (被 connect 的 Component 会自动在 props 中具有 dispatch 要领)

// model
{
    namespace: 'app',
    reducers: {
        updateState (state, { payload}) {
            return {...state, ...payload}
        }
    }
}
// components event
props.dispatch({
    type: 'app/updateState',
    payload: {
        locale: 'fr'
    }
})

http要求

统一讲用到一切的接口放到src/services/service.js中(轻易治理/函数柯里化)

    原文作者:tigerHee
    原文地址: https://segmentfault.com/a/1190000017232869
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞