參考地址：Ant Design項目實戰(zhàn)
一起學react (1) 10分鐘 讓你dva從入門到精通
無狀態(tài)組件(Stateless Component) 與高階組件
dva中 connect()()的用法谅摄。
最近正在學習Ant Design，使用的是dva
一個基于 React 和 Redux 的輕量應用框架薇缅，概念來自 elm，支持 side effects、熱替換医舆、動態(tài)加載嗜浮、react-native船逮、SSR 等皿曲，已在生產(chǎn)環(huán)境廣泛應用唱逢。
之前看過一點點的redux，還不是很了解谷饿，剛好一起學習
1. Stateless Component（無狀態(tài)組件）
首先這個寫法之前在了解React時沒有接觸過惶我，具體的介紹和寫法參考鏈接一起學react (1) 10分鐘 讓你dva從入門到精通，這里列出兩段代碼的對比（區(qū)別是箭頭函數(shù)）：
使用箭頭函數(shù)時：
const Products = ({
dispatch,
products
}) => {
function handleDelete(id) {
dispatch({
type: 'products/delete',
payload: id,
});
}
return (
<div>
<h2>List of Products</h2>
<ProductList onDelete={handleDelete} products={products} />
</div>
);
}
不使用箭頭函數(shù)時：
class Products extends React.Component {
constructor() {
super();
this.handleDelete = this.handleDelete.bind(this);
}
handleDelete(id) {
this.props.dispatch({
type: 'products/delete',
payload: id
});
}
render() {
return (
<div>
<h2>List of Products</h2>
<ProductList onDelete={this.handleDelete} products={this.props.products} />
</div>
);
}
}
2. connect的用法
代碼是這么寫的：
export default connect(({ products }) => ({
products,
}))(Products);
解釋可以參考dva中 connect()()的用法博投。
大致可以理解為：
const bindToComponent = connect()
export default bindToComponent(Products)
或者是
function connect(props) {
return function(component) {
return <component ...props/>
}
}
connect主要是將model和component連接起來
