dva学习-定义UI组件

我会带着你远行 2022-05-17 13:19 229阅读 0赞

**定义组件有三种方式：**

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

## **1.无状态函数式组件** ##

**            **它是为了创建纯展示组件，这种组件只负责根据传入的`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);

无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利，除此之外无状态组件还有以下几个显著的特点：

1.  **组件不会被实例化，整体渲染性能得到提升**  
    因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。
2.  **组件不能访问`this`对象**  
    无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：`this.ref`、`this.state`等均不能访问。若想访问就不能使用这种形式来创建组件
3.  **组件无法访问生命周期的方法**  
    因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。
4.  **无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用**

无状态组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件，未来React也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化，所以**只要有可能，尽量使用无状态组件**。

## **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;

## **3.带有生命周期的class方式** ##

import {Component} from 'react';
    class InputControlES6 extends Component {
        constructor(props) {
            super(props);
            // 设置 initial state
            this.state = {
                text: “”,
            };
        }
        render() {
            return (
                <div>
                    Type something:
                    <input  value={this.state.text} />
                </div>
            );
        }
    }