dva学习记录

参考地址：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连接起来

未完待续