Question

我正在开发一个需要多个状态的React Js项目，每个状态存储来自不同后端端点的多个json数据。例如，我的组件之一如下：

    Class Demo{
    constructor(){
    super();
      this.state={
          data1:[],
          data2:[], .... so on
    }
}

    function() {
      let somevar1 = axios.get('https://url');
      let somevar2 = axios.get('https://url');
    }

    this.setState({
      data1: somevar1,
      data2: somevar2,
     ...and so on
    })
}

状态随着数据的增加而增加。

我是新来的反应者，因此遵循这种方法将状态独立存储在多个组件中。可能现在正在减慢我的申请速度。请向我建议一种更好的方法来处理这些类型的多种状态。我应该使用Redux还是Hooks或Context API？

Answer 1

State是绑定到特定组件的属性。如果您需要多个状态，则意味着您需要多个组件，因为每个组件只能有一个状态。

因此，您需要确定需要调用哪些端点以及从哪些组件调用。

通常，在状态中可以存储的数据没有限制，但是由于组件将销毁，因此其所有数据（状态）都将丢失。因此，redux的一部分可以全局存储状态，并且可以将该状态映射到需要它们的组件中的props。

根据您提供的信息，对于这种用例，redux似乎是一个不错的选择，因为您可以创建reducer并将状态从一个端点分离到另一个端点。

Answer 2

您可以使用redux-可靠，稳定的解决方案...但它有很多缺点-goodbye-redux article。

尝试使用Apollo的apollo-link-rest（具有规范化缓存的graphql客户端）。然后，您可以使用multiple endpoints。所有数据都可以通过一种常用方法获得（本地应用程序数据也是如此）。

稍后，您可以设置一个graphql服务器来创建一个通用端点，而前端应用程序几乎没有任何变化。

您可以同时使用（redux用于全局应用程序状态+ apollo用于所有数据和某些设置）-apollo-universal-starter-kit演示了这种可能性。

Answer 3

将大状态存储在不同的组件中不是一个好习惯。我建议您使用redux，您可以在一个商店中维持状态。这就是我们所说的真理的唯一来源

https://react-redux.js.org/introduction/quick-start

管理多个状态React

3 个答案: