Reactjs 确定在React中何时使用容器。关于：从API获取数据和常见做法

从我从社区和React文档收集的信息来看，似乎有一个共识，即组件应该始终以无状态为目标。鉴于这种想法，我很难以一种感觉正确的方式实现这种方法

总体目标是：拥有一个容器组件，该组件使用Axios向API发出http请求。然后，该数据集将成为组件状态，并传递给使用所述数据构建表的子组件。我还没有反应过来，但我就是这样处理这个问题的：

我有一个

DeploymentsContainer.js

，我认为应该负责获取数据：

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class FetchDeployments extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        deployments: []
    };
}

componentDidMount() {
    axios.get(`API ENDPOINT`)
        .then(res => {
            // Store response data in array
            const fetchedData = res.data._deployments;
        });
}

render() {
    return (
        <div>

        </div>
    )
}
}

export default FetchDeployments;

这就是我挣扎的地方。我对反应和这种类型的框架还不熟悉，所以我尽我所能不让这成为一个愚蠢的问题，开始一场主观的辩论。但是，如果我的总体目标是使用外部React数据表库将数据存储在表中，那么将容器拆分为单独的对象是否合适，然后我猜在装入库时将数据传递给库？我真的不确定我是否理解国家的分离以及这里没有的东西。我需要一个容器吗

---

一个单独的组件如何从同时安装的容器中访问数据？

与往常一样，答案是“视情况而定”。在学习React及其生态系统时，您所能做的最好的事情就是开始学习在采用各种方法时所做的各种权衡。使用HoC（高阶组件）将表示组件与容器组件分开的想法很流行，值得探索。通常，这是一种与单独的状态管理解决方案一起使用的想法，无论是像redux、mobx、graphql之类的解决方案，还是像recompose的

with state

之类的解决方案。没有任何东西可以阻止您与React的setState api一起实现相同的方法。作为一个学习练习，这可能是值得尝试的，但我个人在与我上面提到的一个库结合使用时，大多只是使用了HoC

要更直接地回答您的问题：

将容器拆分成单独的东西是否合适，然后我猜在装入容器时将数据传递给库？我真的不确定我是否理解国家的分离以及这里没有的东西。我需要一个容器吗

如果我要超越React的setState api，我个人只会转向容器组件

setState的优点在于简单，正如Redux的创建者所指出的，有时候简单是最好的。随着应用程序的扩展，更重要的是要有一种可伸缩的方式来处理状态，因此，在哪里划界主要取决于你的决定

根据我的经验，这将是一旦你的应用程序发展到有多个层次的组件层次结构。到那时，你会发现你自己在国家所在地和使用地之间有着多个层次的分离。这将导致通过多个级别的组件传递数据，从而将数据传输到需要的位置，这当然会变得单调乏味，并且还会在传输过程中耦合每个组件。这就是将状态提取出来并能够通过容器组件访问状态的真正开始

一个单独的组件如何从同时装入的容器中访问数据

在React中，父级将在子级之前装入。因此，您的容器将首先被装载，并将有机会准备数据以传递给要装载的子容器。当然，经常发生的情况是，您的容器可能会启动一些异步操作（例如API请求），因此它可能没有子容器需要的数据。在这种情况下，子级可能希望根据数据是否已到达来确定

---

希望这有帮助

答案总是“视情况而定”。在学习React及其生态系统时，您所能做的最好的事情就是开始学习在采用各种方法时所做的各种权衡。使用HoC（高阶组件）将表示组件与容器组件分开的想法很流行，值得探索。通常，这是一种与单独的状态管理解决方案一起使用的想法，无论是像redux、mobx、graphql之类的解决方案，还是像recompose的

with state

之类的解决方案。没有任何东西可以阻止您与React的setState api一起实现相同的方法。作为一个学习练习，这可能是值得尝试的，但我个人在与我上面提到的一个库结合使用时，大多只是使用了HoC

要更直接地回答您的问题：

将容器拆分成单独的东西是否合适，然后我猜在装入容器时将数据传递给库？我真的不确定我是否理解国家的分离以及这里没有的东西。我需要一个容器吗

如果我要超越React的setState api，我个人只会转向容器组件

setState的优点在于简单，正如Redux的创建者所指出的，有时候简单是最好的。随着应用程序的扩展，更重要的是要有一种可伸缩的方式来处理状态，因此，在哪里划界主要取决于你的决定

根据我的经验，这将是一旦你的应用程序发展到有多个层次的组件层次结构。到那时，你会发现你自己在国家所在地和使用地之间有着多个层次的分离。这将导致通过多个级别的组件传递数据，从而将数据传输到需要的位置，这当然会变得单调乏味，并且还会在传输过程中耦合每个组件。这是提取状态并能够通过容器访问它的地方

import React from 'react';
import TopBar from '../TopBar/TopBar';
import DeploymentsHeader from '../DeploymentsHeader/DeploymentsHeader';
import DeploymentsToolbar from '../DeploymentsToolbar/DeploymentsToolbar';
import FetchDeployments from '../../../containers/DeploymentsContainer/DeploymentsContainer';
import DataTable from '../DataTable/DataTable';

import './Deployments.css';

const Deployments = () => (
    <div className="">
        <TopBar />
        <DeploymentsHeader />
        <DeploymentsToolbar />
        <FetchDeployments />
        <DataTable />
    </div>
);

export default Deployments;