Реагировать повторно каждый раз, когда страница посещается

Question

Я столкнулся с проблемой производительности моего приложения, которое я создал, и я просто пытаюсь осмыслить решение. Я извлекаю данные из базы данных каждый раз, когда страница загружается, и распределяю части данных, которые я выбрал для утверждения. Моя проблема в том, что при первой загрузке данные никогда не меняются, но каждый раз, когда я go возвращаюсь на страницу, происходит повторное получение тех же данных. Какие есть способы, чтобы остановить это? Может быть, получить данные один раз и установить для них что-то более постоянное, чем состояние, чтобы мне не приходилось продолжать перерисовывать страницы, на которых я уже был. Можно ли использовать контекст для установки isDataFetched и что-то с этим сделать? Я не уверен, как решить концептуальную проблему, такую ​​как эта.

Вот пример компонента, который извлекает данные, но будет продолжать перерисовывать каждый раз, когда страница посещается, независимо от того, изменились ли данные для извлечения:

import React, { useContext, useState, useEffect } from "react";
import { ThemeContext } from "../contexts/ThemeContext";
import styles from "../styles/GroupListStyles";
import GroupItem from "./GroupItem";
import { LoggedInContext } from "../contexts/LoggedIn";
import { withStyles } from "@material-ui/core";

function GroupList(props) {
  const [groupsState, setGroups] = useState([]);
  const [loading, setLoading] = useState(true);
  const { isDarkMode } = useContext(ThemeContext);
  const { token } = useContext(LoggedInContext);
  const { classes } = props;

  useEffect(() => {
    fetch("http://localhost:8181/groups", {
      headers: {
        "Content-Type": "application/json",
        Token: token
      }
    })
      .then(res => res.json())
      .then(data => {
        setGroups(data.data);
        setLoading(false);
      });
  }, [token]);

  const removeGroup = (groupId) => {
    setGroups(groups => groups.filter(el => el._id !== groupId));
  }



console.log(groupsState);
  const handleDeleteGroupClick = (groupId) => {
    fetch("http://localhost:8181/groups/" + groupId, {
      headers: {
        "Content-Type": "application/json",
        Token: token
      },
      method: "DELETE"
    })
      .then((res) => {
        return res.json();
      })
      .then((data) => {
      console.log(data.data)
      removeGroup(groupId);
      })
  };
  return (
    <div className={classes.root}>
      <div className={classes.holder}>
        <div
          className={`${classes.table} ${
            isDarkMode ? classes.bgDark : classes.bgLight
          }`}
        >
          <div>
            Name <i className="fas fa-sort-down"></i>
          </div>
          <div>
            URL <i className="fas fa-sort-down"></i>
          </div>
          <div>
            Description <i className="fas fa-sort-down"></i>
          </div>

          <div>Actions</div>
        </div>

        {loading ? (
          <h1>Loading...</h1>
        ) : (
          groupsState.map(group => {
            return (
              <GroupItem
                name={group.name}
                url={group.url}
                description={group.description}
                id={group._id}
                key={group.name}
                handleClick={handleDeleteGroupClick}
              />
            );
          })
        )}
      </div>
    </div>
  );
}

export default withStyles(styles)(GroupList);

Answer 1

С помощью redux или flux вы можете хранить магазин, в котором state используется глобально, и вы можете сохранить его, если уже получили. Или проще: вы можете сохранить isDataFetched в состоянии вашего компонента

Answer 2

Поскольку после рендеринга первой страницы вы хотите обновить страницу именно тогда, когда обновляются данные, тогда используйте Pure Component вместо обычного Component, Pure Component будет обновлять страницу при смене реквизита, это просто концепция для более подробной информации, используйте это -> https://reactjs.org/docs/react-api.html#reactpurecomponent,

Нет проблем с редуксом или флюсом. Для больших таблиц данных или большого набора данных лучше использовать Pure Component.

Answer 3

Redux - хорошее решение, Redux может управлять состоянием приложения, и вам не нужно извлекать данные каждый раз, когда вы посещаете страницу,

Вот официальная документация Redux:

введите описание ссылки здесь