React進(jìn)行路由變化監(jiān)聽(tīng)的解決方案

更新時(shí)間：2025年01月07日 10:35:54 作者：yqcoder

在現(xiàn)代單頁(yè)應(yīng)用（SPA）中,路由管理是至關(guān)重要的一部分,它不僅決定了用戶(hù)如何在頁(yè)面間切換,還直接影響到整個(gè)應(yīng)用的性能和用戶(hù)體驗(yàn),這些看似不起眼的問(wèn)題,往往會(huì)導(dǎo)致功能錯(cuò)亂和性能下降,本篇文章將深入探討在 React 中如何高效監(jiān)聽(tīng)路由變化,需要的朋友可以參考下

一、使用`react-router`庫(kù)（以`react-router-dom`為例）

1. 歷史（`history`）對(duì)象監(jiān)聽(tīng)

1.1 原理

`react-router`內(nèi)部使用`history`對(duì)象來(lái)管理路由歷史記錄。可以通過(guò)訪問(wèn)`history`對(duì)象來(lái)監(jiān)聽(tīng)路由變化。在基于類(lèi)的組件中，可以通過(guò)組件的`props`獲取`history`對(duì)象；在函數(shù)式組件中，可以使用`useHistory`鉤子函數(shù)獲取。

1.2 示例（基于類(lèi)的組件）

import React from "react";
 
import { withRouter } from "react-router-dom";
 
class MyComponent extends React.Component {
 
  componentDidMount() {
 
    this.props.history.listen((location, action) => {
 
      console.log("路由發(fā)生變化，新位置:", location);
 
      console.log("路由變化的動(dòng)作:", action);
 
    });
 
  }
 
  render() {
 
    return <div>這是一個(gè)組件</div>;
 
  }
 
}
 
export default withRouter(MyComponent);

在這里，`componentDidMount`生命周期方法中，通過(guò)`this.props.history.listen`來(lái)添加一個(gè)路由變化的監(jiān)聽(tīng)器。每當(dāng)路由發(fā)生變化時(shí)，就會(huì)打印出新的位置（`location`）和路由變化的動(dòng)作（`action`，如`PUSH`、`REPLACE`等）。

1.3 示例（函數(shù)式組件）

import React from "react";
 
import { useHistory } from "react-router-dom";
 
function MyComponent() {
 
  const history = useHistory();
 
  React.useEffect(() => {
 
    const unlisten = history.listen((location, action) => {
 
      console.log("路由發(fā)生變化，新位置:", location);
 
      console.log("路由變化的動(dòng)作:", action);
 
    });
 
    return () => {
 
      unlisten();
 
    };
 
  }, [history]);
 
  return <div>這是一個(gè)函數(shù)式組件</div>;
 
}
 
export default MyComponent;

在函數(shù)式組件中，使用`useHistory`鉤子獲取`history`對(duì)象，然后在`useEffect`鉤子中添加監(jiān)聽(tīng)器。同時(shí)，返回一個(gè)清理函數(shù)，用于在組件卸載時(shí)移除監(jiān)聽(tīng)器。

2. `useLocation`鉤子監(jiān)聽(tīng)（推薦用于函數(shù)式組件）

2.1 原理

`useLocation`是`react-router-dom`提供的一個(gè)鉤子函數(shù)，它返回當(dāng)前的`location`對(duì)象。通過(guò)比較前后`location`對(duì)象的變化，可以檢測(cè)到路由是否發(fā)生了變化。

2.2 示例

import React from "react";
 
import { useLocation } from "react-router-dom";
 
function MyComponent() {
 
  const location = useLocation();
 
  React.useEffect(() => {
 
    console.log("當(dāng)前路由位置:", location);
 
  }, [location]);
 
  return <div>這是一個(gè)函數(shù)式組件</div>;
 
}
 
export default MyComponent;

在這里，`useEffect`鉤子依賴(lài)`location`對(duì)象。每當(dāng)`location`發(fā)生變化（即路由變化）時(shí)，`useEffect`中的回調(diào)函數(shù)就會(huì)被執(zhí)行，打印出當(dāng)前的路由位置。

3. 自定義事件監(jiān)聽(tīng)（不依賴(lài)`react-router`內(nèi)部機(jī)制）

3.1 原理

在頂層組件（如`App`組件）中，通過(guò)`window`對(duì)象的`addEventListener`方法監(jiān)聽(tīng)`hashchange`（對(duì)于哈希路由）或`popstate`（對(duì)于 HTML5 歷史記錄路由）事件來(lái)檢測(cè)路由變化。這種方法比較底層，需要自己處理更多的細(xì)節(jié)，比如區(qū)分不同類(lèi)型的路由和處理事件冒泡等問(wèn)題。

3.2 示例（以哈希路由為例）

import React from "react";
 
function App() {
 
  React.useEffect(() => {
 
    const handleHashChange = () => {
 
      console.log("哈希路由發(fā)生變化，當(dāng)前哈希:", window.location.hash);
 
    };
 
    window.addEventListener("hashchange", handleHashChange);
 
    return () => {
 
      window.removeEventListener("hashchange", handleHashChange);
 
    };
 
  }, []);
 
  return <div>{/* 路由相關(guān)組件和內(nèi)容 */}</div>;
 
}
 
export default App;

避免常見(jiàn)的監(jiān)聽(tīng)誤區(qū)：性能優(yōu)化與用戶(hù)體驗(yàn)

在 React 項(xiàng)目中監(jiān)聽(tīng)路由變化時(shí)，雖然有多種方法可以實(shí)現(xiàn)，但若使用不當(dāng)，很容易陷入一些性能和用戶(hù)體驗(yàn)的誤區(qū)。以下是常見(jiàn)的錯(cuò)誤以及優(yōu)化建議，幫助你在項(xiàng)目中獲得最佳性能和用戶(hù)體驗(yàn)。這些建議同樣適用于一般的性能優(yōu)化。

性能陷阱一：過(guò)度渲染

監(jiān)聽(tīng)路由變化時(shí)，開(kāi)發(fā)者常常會(huì)直接在組件的 useEffect 或 componentDidUpdate 中執(zhí)行大量的邏輯操作。每次路由變化時(shí)，整個(gè)組件重新渲染，可能導(dǎo)致頁(yè)面的性能大幅下降。

問(wèn)題示例：

在以下示例中，useEffect 會(huì)在每次路由變化時(shí)執(zhí)行大量操作，包括數(shù)據(jù)獲取和 DOM 更新，這可能導(dǎo)致性能問(wèn)題。

import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
 
const MyComponent = () => {
  const location = useLocation();
  const [data, setData] = useState(null);
 
  useEffect(() => {
    // 每次路由變化時(shí)都會(huì)執(zhí)行
    console.log('Route changed:', location.pathname);
 
    // 模擬數(shù)據(jù)獲取
    fetch(`/api/data?path=${location.pathname}`)
      .then(response => response.json())
      .then(data => setData(data));
 
    // 模擬其他副作用
    document.title = `Current path: ${location.pathname}`;
 
  }, [location]); // 依賴(lài)項(xiàng)為整個(gè) location 對(duì)象
 
  return <div>{data ? `Data: ${data}` : 'Loading...'}</div>;
};
 
export default MyComponent;

優(yōu)化示例：

通過(guò)條件渲染或依賴(lài)精細(xì)化監(jiān)聽(tīng)，確保只有在確實(shí)需要時(shí)，組件才會(huì)重新渲染。例如，確保 useEffect 的依賴(lài)項(xiàng)數(shù)組準(zhǔn)確無(wú)誤，避免不必要的重復(fù)執(zhí)行。

import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
 
const MyComponent = () => {
  const location = useLocation();
  const [data, setData] = useState(null);
 
  useEffect(() => {
    // 僅在路徑發(fā)生變化時(shí)更新數(shù)據(jù)
    if (location.pathname === '/specific-path') {
      fetch(`/api/data?path=${location.pathname}`)
        .then(response => response.json())
        .then(data => setData(data));
    }
  }, [location.pathname]); // 僅依賴(lài)路徑變化
 
  useEffect(() => {
    // 僅在路徑變化時(shí)更新文檔標(biāo)題
    document.title = `Current path: ${location.pathname}`;
  }, [location.pathname]); // 僅依賴(lài)路徑變化
 
  return <div>{data ? `Data: ${data}` : 'Loading...'}</div>;
};
 
export default MyComponent;

這個(gè)過(guò)程中，我們還可以使用。使用 React.memo 來(lái)避免不必要的子組件重新渲染，或者通過(guò) useCallback 緩存函數(shù)，確保只有在依賴(lài)項(xiàng)變化時(shí)才會(huì)重新執(zhí)行監(jiān)聽(tīng)邏輯。

性能陷阱二：不必要的監(jiān)聽(tīng)

對(duì)于簡(jiǎn)單的路由變化場(chǎng)景，開(kāi)發(fā)者可能會(huì)使用復(fù)雜的監(jiān)聽(tīng)邏輯或頻繁調(diào)用 API。這不僅浪費(fèi)資源，還可能導(dǎo)致應(yīng)用整體響應(yīng)速度變慢。

問(wèn)題示例：

在以下示例中，監(jiān)聽(tīng)邏輯可能過(guò)于復(fù)雜，并在全局組件中進(jìn)行，導(dǎo)致不必要的資源消耗。

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
 
const GlobalListener = () => {
  const location = useLocation();
 
  useEffect(() => {
    console.log('Route changed globally:', location.pathname);
 
    // 假設(shè)需要全局監(jiān)聽(tīng)并執(zhí)行操作
    fetch(`/api/global-data`)
      .then(response => response.json())
      .then(data => console.log(data));
 
  }, [location]);
 
  return null;
};
 
export default GlobalListener;

優(yōu)化示例：

如果路由變化并不會(huì)影響所有組件，應(yīng)該僅在需要的地方監(jiān)聽(tīng)。將監(jiān)聽(tīng)邏輯集中在相關(guān)組件中，避免全局性的監(jiān)聽(tīng)。

import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
 
const SpecificPage = () => {
  const location = useLocation();
  const [data, setData] = useState(null);
 
  useEffect(() => {
    if (location.pathname === '/specific-page') {
      // 僅在特定頁(yè)面中執(zhí)行邏輯
      fetch(`/api/specific-data`)
        .then(response => response.json())
        .then(data => setData(data));
    }
  }, [location.pathname]); // 僅在特定頁(yè)面中執(zhí)行
 
  return <div>{data ? `Data: ${data}` : 'Loading...'}</div>;
};
 
export default SpecificPage;

性能陷阱三：過(guò)多副作用

當(dāng)監(jiān)聽(tīng)路由變化時(shí)，開(kāi)發(fā)者常常在變化發(fā)生時(shí)執(zhí)行多種副作用，如頁(yè)面跳轉(zhuǎn)、數(shù)據(jù)加載等。這種堆疊副作用的方式可能會(huì)導(dǎo)致頁(yè)面加載速度變慢，尤其是在路由快速切換時(shí)，用戶(hù)可能會(huì)感受到明顯的卡頓。

問(wèn)題示例：

在以下示例中，多個(gè)副作用在路由變化時(shí)同時(shí)執(zhí)行，可能導(dǎo)致頁(yè)面卡頓。

import React, { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
 
const MyComponent = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const [data, setData] = useState(null);
 
  useEffect(() => {
    // 執(zhí)行多個(gè)副作用
    fetch(`/api/data?path=${location.pathname}`)
      .then(response => response.json())
      .then(data => setData(data));
 
    document.title = `Current path: ${location.pathname}`;
    navigate('/another-path'); // 導(dǎo)航到另一個(gè)路徑
 
  }, [location]);
 
  return <div>{data ? `Data: ${data}` : 'Loading...'}</div>;
};
 
export default MyComponent;

優(yōu)化示例：

將副作用拆分成小的、獨(dú)立的任務(wù)，并采用惰性加載或延遲執(zhí)行的方式來(lái)減少性能負(fù)擔(dān)。

import React, { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
 
const MyComponent = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const [data, setData] = useState(null);
 
  useEffect(() => {
    const fetchData = async () => {
      // 延遲執(zhí)行數(shù)據(jù)獲取
      if (location.pathname === '/specific-path') {
        const response = await fetch(`/api/data?path=${location.pathname}`);
        const result = await response.json();
        setData(result);
      }
    };
 
    // 執(zhí)行延遲的數(shù)據(jù)獲取
    fetchData();
 
    // 僅在路徑變化時(shí)更新標(biāo)題
    document.title = `Current path: ${location.pathname}`;
    
    // 延遲導(dǎo)航到另一個(gè)路徑
    const timer = setTimeout(() => {
      navigate('/another-path');
    }, 500);
 
    return () => clearTimeout(timer); // 清理定時(shí)器
  }, [location]);
 
  return <div>{data ? `Data: ${data}` : 'Loading...'}</div>;
};
 
export default MyComponent;

結(jié)論

路由監(jiān)聽(tīng)是 React 項(xiàng)目中不可忽視的關(guān)鍵環(huán)節(jié)。通過(guò)合理的監(jiān)聽(tīng)方式，你可以讓?xiě)?yīng)用在導(dǎo)航、數(shù)據(jù)加載、用戶(hù)交互等方面表現(xiàn)得更加出色。同時(shí)我們也要重視路由的變化，忽視路由變化可能會(huì)導(dǎo)致用戶(hù)體驗(yàn)的下降和不必要的性能開(kāi)銷(xiāo)。

以上就是React進(jìn)行路由變化監(jiān)聽(tīng)的解決方案的詳細(xì)內(nèi)容，更多關(guān)于React路由變化監(jiān)聽(tīng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: