AntDesign(React)学习-15 组件定义、connect、interface

虽然常用的编码习惯一种即可，但是看别人文档或者示例时，有的写法不熟悉的话看着很不习惯，整理几种实现同一功能的不同写法

1、Dva Connect与@Connect

import React, { Props } from 'react';
import { Button, Input } from 'antd';
import { connect } from 'dva';
//@connect(()=>({"age":111}))
class Demo extends React.Component {
  constructor(props) {
    super(props);
  }
  render(){

    return(<div>{this.props.age}</div>);
  }
}
//export default Demo;
export default connect(()=>({"age":111}))(Demo);
//大括号被解释伪代码块，所以如果箭头函数直接返回一个对象，必须在对象外边加上括号,类似一个转义，箭头函数本身默认return

箭头函数：仅仅当箭头函数为单行的形式时，才会出现隐式的return。当箭头函数伴随着{}被声明，那么即使它是单行的，它也不会有隐式return

2、组件定义，主要三种，示例

class Test extends Component {

function Test(props) {

class Test extends PureComponent {

function Test<P>(params?: any){

const Test: React.FC<TestProps> = (props) => {

参考下面两个链接文章

https://www.jianshu.com/p/2d00885a6d59

https://www.cnblogs.com/V587Chinese/p/11520674.html

3、interface用于限定props属性，可以通过它解决编辑器上this.props.dispatch有红线问题

import { AnyAction } from 'redux';

export interface UserProps extends Dispatch<AnyAction> {
  dispatch: Dispatch<AnyAction>;
}

class User extends React.Component<UserProps> 
.......

通过以上三个步骤可解决红线问题