dva-定义组件

定义组件有三种方式：

dva里，UI组件一般是放在component文件中，一般在routes文件的路由组件调用这些组件，通过标签的形式，如下第二中方式里调用这个组件需要这样传入<ProductList onDelete={} products={} />

无状态组件

它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作

import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';

function IndexPage(props) {
  return (
    <div className={styles.normal}>
      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
      <div className={styles.welcome} />
      <ul className={styles.list}>
        <li>To get started, edit <code>src/index.js</code> and save to reload.</li>
        <li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
      </ul>
    </div>
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

组件不会被实例化，整体渲染性能得到提升
不能访问this对象
组件不能访问生命周期
组件只能访问输入的props，同样的props会得到同样的渲染结果

2.使用常量的方式，也推荐这种

import React from 'react';
import PropTypes from 'prop-types';
import { Table, Popconfirm, Button } from 'antd';
 
const ProductList = ({ onDelete, products }) => {
  const columns = [{
    title: 'Name',
    dataIndex: 'name',
  }, {
    title: 'Actions',
    render: (text, record) => {
      return (
        <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
          <Button>Delete</Button>
        </Popconfirm>
      );
    },
  }];
  return (
    <Table
      dataSource={products}
      columns={columns}
    />
  );
};
 
ProductList.propTypes = {
  onDelete: PropTypes.func.isRequired,
  products: PropTypes.array.isRequired,
};
 
export default ProductList;

原文链接：https://blog.csdn.net/weixin_40792878/article/details/81606624