项目地点: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
手艺选型
- 基本框架:react
- UI库:antd-mobile
- 脚手架:dva
插件运用
- polished (css-in-js css modules)
- react-loadable (可用于骨架屏loading)
vs-code 引荐插件
- auto close tag (自动闭合html标签)
- auto rename tag (自动修正html标署名)
- Bracket Pair Colorizer 2 (代码括号嵌套色彩辨别)
vs-code 设置修正
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.triggerExpansionOnTab": true
建立组件的几种体式格局
一. 函数式定义的 无状况组件
function HelloComponent (props) {
return <div>hello {props.name}</div>
}
- 无状况,纯展现组件,不涉及到state状况的操纵;
- 组件不会被实例化,团体衬着机能获得提拔;
- 组件不能接见this对象,若要接见不能经由过程这类体式格局建立;
- 组件无法接见生命周期的要领;
- 无状况组件只能接见输入的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>
)
}
})
- 要被实例化,具有生命周期
- 有状况的
瑕玷:
- React.createClass会自绑定函数要领(不像React.Component只绑定须要体贴的函数)致使不必要的机能开支,增添代码过期的能够性。
- 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 数据流:
Model 对象的属性
- namespace: 当前 Model 的称号。全部运用的 State,由多个小的 Model 的 State 以 namespace 为 key 合成
- state: 该 Model 当前的状况。数据保留在这里,直接决议了视图层的输出
- reducers: Action 处置惩罚器,处置惩罚同步行动,用来算出最新的 State
- effects:Action 处置惩罚器,处置惩罚异步行动
- 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中(轻易治理/函数柯里化)