如何分离组件和容器？

Question

我有一个创建卡片滑块（卡片轮播）的要求。我已将组件拆分为 Slider 和 Card。然后我有一个容器“应用程序”。卡片的数据来自redux。还有一个选项可以刷新每张卡。目前，我已经在“App”容器中获取数据、更新数据操作。在 App 容器中，我做了以下事情。

1. 调用获取数据操作。
2. 获取数据作为道具。
3. 通过它进行映射并将必要的信息传递到卡片中。
4. 将这些卡片作为孩子传递给 .
5. 刷新卡片时，我调用更新数据操作。

那么有必要将它们分开吗？还是现在的结构还好？

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

import Slider from "../../Components/Slider";
import Card from "../../Components/Card";
import * as actions from "../../Store/Actions/app";


class App extends Component {
  componentDidMount() {
    this.props.onInitApp(data);
  }


  cardRefreshHandler = (e, countryName, countryId) => {
    this.props.onLoading();
    this.props.onCardRefresh(country, countryId);
  };

  render() {
    let cards = "";
    if (this.props.data && this.props.data.length > 0) {
      cards = this.props.data.map((item, index) => {
        return (
          <Card
            key={index}
            id={index}
            data={item}
            onRefresh={this.cardRefreshHandler}
          />
        );
      });
    }

    return (
      <div class="app-container">
        <Slider>
          {cards}
        </Slider>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    data: state.data,
    loading: state.loading
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onInitApp: country => dispatch(actions.fetchData(country)),
    onLoading: () => dispatch(actions.loadRefreshScreen()),
    onCardRefresh: (country, countryId) => dispatch(actions.refreshData(country, countryId))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

这篇文章可能有助于更好地理解容器和组件之间的结构差异：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

如果您将组件分为两类，您会发现组件更易于重用和推理。我称它们为 Container 和 Presentational components*，但我也听说过 Fat 和 Skinny、Smart 和 Dumb、Stateful 和 Pure、Screens 和 Components 等。这些都不完全一样，但核心思想是相似的。