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

Question

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

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

我完全理解为什么会发生这种情况，并且这是预期的行为。

但是，更改我的设置的最佳方法是什么:

(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 的情况下反射(reflect)这一点的最佳方式是什么？

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 调用，或者即使是组件应该被渲染。