Question

我是新来的反应者，我注意到组件的两种构建方式，并想知道何时使用哪种方式

这是第一种，似乎是我经常使用的逻辑

import React, { Component } from "react";
import { connect } from "react-redux";

class ConnectedForm extends Component {
    constructor() {
        super();
        this.state = {};
    }

    render() {
        return (
            <form>
              <div> blah blah</div>
            </form>
        );
    }
}
const Form = connect()(ConnectedForm);
export default Form;

但是然后有一个看起来很简单的组件，没有类，并且没有扩展该组件：

import React from "react";
import { connect } from "react-redux";

const mapStateToProps = state => {
    return state.locations;
};

const LocationsList = ({ locations }) => (
    <ul>
        {
             locations.map(el => (
            <li key={el.id}>
               Name - {el.name}, Address - {el.address}, Coordinates - {el.coordinates}, Category - {el.category}
            </li>
        )) }
    </ul>
);
const List = connect(mapStateToProps)(LocationsList);
export default List;

我想知道每种方法的名称是什么，什么时候我应该更喜欢简单的方法而不是类？

Answer 1

通常，对于任何要包含逻辑的内容，您都希望使用“基于类的组件”；如果仅显示数据或进行简单的交互（您将作为道具或使用钩子传入），则要使用“功能性组件”。

希望这会有所帮助。

React，什么时候应该使用类组件，什么时候不使用类组件？

1 个答案: