参考地址：Ant Design项目实战
一起学react (1) 10分钟 让你dva从入门到精通
无状态组件(Stateless Component) 与高阶组件
dva中 connect()()的用法。
最近正在学习Ant Design，使用的是dva
一个基于 React 和 Redux 的轻量应用框架，概念来自 elm，支持 side effects、热替换、动态加载、react-native、SSR 等，已在生产环境广泛应用。
之前看过一点点的redux，还不是很了解，刚好一起学习
1. Stateless Component（无状态组件）
首先这个写法之前在了解React时没有接触过，具体的介绍和写法参考链接一起学react (1) 10分钟 让你dva从入门到精通，这里列出两段代码的对比（区别是箭头函数）：
使用箭头函数时：
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>
);
}
不使用箭头函数时：
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连接起来
