摘要：整個(gè)應(yīng)用的，由多個(gè)小的的以為合成該當(dāng)前的狀態(tài)。執(zhí)行異步函數(shù)發(fā)出一個(gè)，類似于取的值通過函數(shù)將需要用到的數(shù)據(jù)合并到中，再在組件中取修改的值通過被的會(huì)自動(dòng)在中擁有方法請(qǐng)求統(tǒng)一講用到所有的接口放到中方便管理函數(shù)柯里化

隨手一個(gè)小star給予動(dòng)力，謝謝！

# install dependencies
npm install

# serve with hot reload at localhost:8000
npm start

# build for production with minification
npm run build

基礎(chǔ)框架：react
UI庫：antd-mobile
腳手架：dva

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

auto close tag （自動(dòng)閉合html標(biāo)簽）
auto rename tag (自動(dòng)修改html標(biāo)簽名)
Bracket Pair Colorizer 2 (代碼括號(hào)嵌套顏色區(qū)分)

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

一. 函數(shù)式定義的 無狀態(tài)組件

function HelloComponent (props) {
    return 
hello {props.name}
}

無狀態(tài)，純展示組件，不涉及到state狀態(tài)的操作；
組件不會(huì)被實(shí)例化，整體渲染性能得到提升；
組件不能訪問this對(duì)象，若要訪問不能通過這種方式創(chuàng)建；
組件無法訪問生命周期的方法；
無狀態(tài)組件只能訪問輸入的props，同樣的props會(huì)得到同樣的渲染結(jié)果，不會(huì)有副作用？？；

tips: 只要有可能，盡量使用無狀態(tài)組件

二. React.createClass (不推薦)

var input = React.createClass({
    propTypes: { // 定義傳入props中的屬性各種類型
        initialValue: React.propTypes.string
    },
    defaultProps: { // 組件默認(rèn)props對(duì)象
        initialValue: ""
    },
    getInitialState: function () {
        return {
            text: this.props.initialValue || "placeholder"
        }
    },
    handleChange: function (event) {
        this.setState({
            text: event.target.value
        })
    },
    render: function () {
        return (
            

                Type something:
                
            
        )
    }
})

要被實(shí)例化，擁有生命周期
有狀態(tài)的

缺點(diǎn)：

React.createClass會(huì)自綁定函數(shù)方法（不像React.Component只綁定需要關(guān)心的函數(shù)）導(dǎo)致不必要的性能開銷，增加代碼過時(shí)的可能性。
React.createClass的mixins不夠自然、直觀；React.Component形式非常適合高階組件（Higher Order Components--HOC）,它以更直觀的形式展示了比mixins更強(qiáng)大的功能，并且HOC是純凈的JavaScript，不用擔(dān)心他們會(huì)被廢棄

三. React.Component (有狀態(tài)組件推薦方式)

class input extends React.Component{
    constructor (props) {
        super(props);
        this.state = {
            text: props.initialValue || "placeholder"
        }
        // ES6類中函數(shù)必須手動(dòng)綁定
        this.handleChange = this.handleChange.bind(this)
    }
    handleChange(event) {
        this.setState({
            text: event.target.value
        })
    }
    render () {
        return (
            

                Type something:
                
            
        )
    }
}
input.propTypes = {
    initialValue: React.PropTypes.string
}
input.defaultProps = {
    initialValue: ""
}

區(qū)別：

函數(shù)this綁定：
createClass中this自動(dòng)綁定，
component中不會(huì)自動(dòng)綁定：三種方式綁定

// 方式一：構(gòu)造函數(shù)中綁定this
consutructor (props) {
  super(props);
  this.handleClick = this.handleClick.bind(this)
}
// 方式二: 使用bind綁定

// 方式三： 使用arrow function綁定
 {this.handleClick()}}>

/*
 *  跳轉(zhuǎn)
**/
 
// 方式1: 標(biāo)簽跳轉(zhuǎn)
import { Link } from "dva/router"


// 方式2: props.history (不推薦)
props.history.push("/result")

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

/*
 *  參數(shù)接收
**/
1. modal/app.js/subscriptions/setup 相當(dāng)于路由守衛(wèi)，中間件
2. 每個(gè)組件中props中l(wèi)ocation

Model 對(duì)象的屬性

namespace: 當(dāng)前 Model 的名稱。整個(gè)應(yīng)用的 State，由多個(gè)小的 Model 的 State 以 namespace 為 key 合成
state: 該 Model 當(dāng)前的狀態(tài)。數(shù)據(jù)保存在這里，直接決定了視圖層的輸出
reducers: Action 處理器，處理同步動(dòng)作，用來算出最新的 State
effects：Action 處理器，處理異步動(dòng)作
subscriptions: 訂閱，相當(dāng)于監(jiān)聽

dva 提供多個(gè) effect 函數(shù)內(nèi)部的處理函數(shù)，比較常用的是 call 和 put。

call：執(zhí)行異步函數(shù)
put：發(fā)出一個(gè) Action，類似于 dispatch

取state的值

通過connect mapStateToProps函數(shù)將需要用到的數(shù)據(jù)合并到props中，再在組件中取

修改state的值

通過dispath (被 connect 的 Component 會(huì)自動(dòng)在 props 中擁有 dispatch 方法)

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

統(tǒng)一講用到所有的接口放到src/services/service.js中(方便管理/函數(shù)柯里化)