时间戳

首页 > 解决方案 > 管理多个状态反应

reactjs - 管理多个状态反应

问题描述

我正在开发一个需要多个状态的 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？

标签： reactjsstate

解决方案

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

因此，您需要弄清楚需要调用哪些端点以及从哪些组件调用。

通常，一个状态可以存储的数据是没有限制的，但是随着组件的销毁，它的所有数据（状态）都会丢失。所以这里出现了 redux 可以全局存储状态的部分，并且这个状态可以映射到需要它们的组件中的 props。

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

推荐阅读