react-dva中 export default connect与@connect

介绍connect

dva 官网：https://dvajs.com/guide/

connect的作用是将组件component和models结合在一起。将models中的state绑定到组件的props中。并提供一些额外的功能，譬如dispatch方法，dispatching function 是一个用于触发 action 的函数，action 是改变 State 的唯一途径，但是它只描述了一个行为，而 dipatch 可以看作是触发这个行为的方式，至于怎么引入我就不介绍了。
使用connect有二种方法：export default connect和@connect
export default connect：
一般这种写法，主要是通过一个函数，返回state给组件,如：

import { connect } from 'dva';
import $ from 'jquery';
import { formatMessage, getLocale } from 'umi/locale';
import moment from 'moment';
import { Form, Input, Select, Upload, Icon, message, DatePicker } from 'antd';
import Styles from './index.less';

const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;
class PersonTargetContentMore extends React.Component {
....
....
....
}
function getState({ targetPerson }) {
  return {
    TargetContentMoreResult: targetPerson.TargetContentMoreResult,
    TargetSpaceTimeResult: targetPerson.TargetSpaceTimeResult,
    personImages: targetPerson.personImages,
  };
}
export default connect(getState)(PersonTargetContentMore);

@connect：
与上述方法相比，其也是一个函数处理，返回state值，相对于简化，如：

import { connect } from 'dva';
import $ from 'jquery';
import { formatMessage, getLocale } from 'umi/locale';
import moment from 'moment';
import { Form, Input, Select, Upload, Icon, message, DatePicker } from 'antd';
import Styles from './index.less';

const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

@connect(({ targetPerson }) => ({
  TargetContentMoreResult: targetPerson.TargetContentMoreResult,
  TargetSpaceTimeResult: targetPerson.TargetSpaceTimeResult,
  personImages: targetPerson.personImages,
}))

class PersonTargetContentMore extends React.Component {
....
....
....
}
export default PersonTargetContentMore

总结

对比上述二种方法发现：二者的原理都是一样，只不过@connect是connect的装饰器、语法糖罢了，只是相对简化了一点，其实没有什么差别，有兴趣的朋友可以通过Demo测试一下。