在React中，是否有可能避免在按下浏览器后退按钮(不使用Redux)时从服务器重新加载数据？

Question

我的React应用程序使用带react-router的CRA进行路由。

呈现此组件后，如果用户转到另一个页面，则此组件将被卸载。当用户使用浏览器的back按钮导航回该组件时，该组件将被重新挂载，并再次从服务器获取数据。

我完全理解为什么会发生这种情况，这是意料之中的行为。

但是，更改我的设置的最佳方式是：

(a)离开页面后状态仍然存在(卸载组件)，以及

(b)如果用户通过浏览器返回按钮以外的其他方式访问页面，则从服务器重新加载状态

(c)应用程序知道渲染是否由浏览器的后退按钮触发

const TableView = ({ view, module }) => {

    const [isLoading, setIsLoading] = useState(true)
    const [records, setRecords] = useState([])

    useEffect(() => {
        console.log("Mounting TableView")
        return () => {
            console.log("Un-Mounting TableView")
        }
    }, [])

    useEffect(() => {
        let mounted = true;

        module.getAll() // gets data from server
            .then(res => {
                if (mounted) {
                    setRecords(res);
                    setIsLoading(false);
                }
            })
            .catch(alert) 
        return () => mounted = false
    }, [module])

据我所知，Redux支持这个用例吗？在不实现Redux的情况下，反映这一点的最佳方式是什么？

Answer 1

嗯，对于(a)，你可以使用Context API。它类似于Redux，因此即使在卸载组件时，您也可以存储状态。

对于(b)和(c)，一种可能的方法是验证用户是否通过按后退按钮转到页面。你可以这样做：

const history = useHistory()
const [cameByBackButton, setCameByBackButton] = useState(false)

useEffect(() => {
  if (history.action === "POP") {
    setCameByBackButton(true);
  };
}, [history.action]);

因此，使用cameByBackButton状态，您可以确定后退按钮是否被按下，然后您可以使用它来决定是否应该进行http调用，或者甚至是否应该呈现组件。