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测试一下。

原文出处:CSDN【七侠剑客】

原文链接:https://blog.csdn.net/qq_36727756/article/details/105055129

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论