每次访问页面时 React 重新渲染答案

【问题标题】：React rerender every time page is visited每次访问页面时 React 重新渲染
【发布时间】：2020-01-28 16:59:53
【问题描述】：

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

【问题讨论】：

介意显示一些代码来帮助解决潜在问题吗？
重新渲染（重新安装？）绝对不应该触发对服务器的新请求。将获取的数据作为您的 app 状态的一部分，而不是页面的状态，然后简单地将其传递给页面。（编辑：如果正在重新加载的页面包含整个应用程序，则将获取的数据存储在localStorage中）
这是你可能想要使用上下文而不是组件状态的地方

标签： javascript reactjs

【解决方案1】：

Redux 是一个很好的解决方案，Redux 可以管理 App 的状态，你不必每次访问页面都去取数据，

这是官方的 Redux 文档：

enter link description here

【讨论】：

【解决方案2】：

使用redux 或flux，您可以保留一个全局共享state 的存储区，如果您已经获取，则可以使用该存储区进行保存。或者更简单地说，您可以将 isDataFetched 保存在您的组件状态中

【讨论】：

【解决方案3】：

因为在第一页渲染后你想在数据更新时更新页面然后使用纯组件而不是普通组件，纯组件会在道具发生变化时更新页面，更多细节请使用这个概念-> https://reactjs.org/docs/react-api.html#reactpurecomponent,

redux 或 Flux 没有问题。对于大型数据表或大型数据集，最好使用纯组件。

【讨论】：