Question

我在创建的应用程序中遇到性能问题，我只是想将解决方案概念化。每次页面加载时，我都会从数据库中获取数据，并将部分已获取的数据分配给状态。我的问题是，在第一次加载时，数据永远不会真正改变，但是每次我回到页面时，都会发生一次重新呈现以获取相同的数据。有什么方法可以阻止这种情况？也许只获取一次数据并将其设置为比状态更永久的数据，这样我就不必继续渲染以前去过的页面。是否可以使用上下文设置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是一个很好的解决方案，Redux可以管理应用程序的状态，您不必在每次访问页面时都获取数据，

这是官方的Redux文档：

enter link description here

Answer 2

使用redux或flux，您可以保留state在全球共享的商店，如果已经获取，则可以用来保存。或更简单地说，您可以将isDataFetched保存为组件状态

Answer 3

因为在第一页渲染之后，您只想在更新数据时才更新页面，然后使用Pure Component而不是普通Component，所以在更改道具时Pure Component会更新页面，这只是概念，请使用此-> https://reactjs.org/docs/react-api.html#reactpurecomponent，

redux或flux没有问题。对于大型数据表或大型数据集，最好使用Pure Component。

每次访问页面时重新渲染

3 个答案: