connect 就是 react-redux 的 connect;它是一个函数,绑定 State 到 View。connect 方法返回的也是一个 React 组件,通常称为容器组件。因为它是原始 UI 组件的容器,即在外面包了一层 State。
简单来说connect是用来连接前端的ui界面和和前端model的一个嫁接桥梁 ,通过使用connect将model里面定义的state,和dispatch,和histoey方法等传递到前端供前端使用
connect常用的写法:
方式一:mapStateToProps,class继承组件和函数组件都能用这种
import React, { Component } from 'react';
import { connect } from 'umi';
class Demo extends Component {
constructor(props){
super(props)
}
render (){
return (
<div>
<span> this.props.example.zddTest</span>
</div>
)
}
}
const mapStateToProps = (state) =>{
return {
example:state.example, //这里的example表示后面用this.props.example获取state(根节点)中exmpale命名空间(model的example.js中的state所有数据)的数据
}
}
export default connect (mapStateToProps)(Demo) //通过这种方式来把model层的数据传递到当前组件了
方式一的变种:
import React, { Component } from 'react';
import { connect } from 'umi';
class Demo extends Component {
constructor(props) {
super(props);
}
render() {
const { columns, data } = this.props.example;
return <Table columns={columns} dataSource={data} />;
}
}
export default connect(({ example }) => ({
example: example,
}))(Demo);
方式二:es6注解方式引入,只能用于class继承组件
import React, { Component } from 'react';
import { connect } from 'umi';
// @connect必须写在class的上面
@connect(({ example }) => ({
...example,
}))
// @connect({ example })//这是上面的简写
class Demo extends Component {
constructor(props) {
super(props);
}
render() {
const { columns, data } = this.props.example;
return <Table columns={columns} dataSource={data} />;
}
}
export default Demo;