面试题：深度剖析React路由（BrowserRouter和HashRouter）在复杂单页应用中的性能优化策略

路由懒加载

原理：在React中，使用React.lazy和Suspense来实现路由组件的懒加载。这样可以避免在应用启动时加载所有的路由组件，而是在需要时才进行加载，从而提高应用的初始加载速度。
示例代码：

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={
          <Suspense fallback={<div>Loading...</div>}>
            <Home />
          </Suspense>
        } />
        <Route path="/about" element={
          <Suspense fallback={<div>Loading...</div>}>
            <About />
          </Suspense>
        } />
      </Routes>
    </Router>
  );
}

export default App;

减少路由切换时的重渲染

使用React.memo：对于路由组件，若其props没有变化，可以使用React.memo来包裹组件，防止不必要的重渲染。
- 原理：React.memo是一个高阶组件，它通过浅比较props来决定是否需要重新渲染组件。
- 示例代码：

import React from'react';

const Home = React.memo((props) => {
  return <div>{props.data}</div>;
});

export default Home;

使用useCallback和useMemo：在路由组件内部，对于函数和计算值使用useCallback和useMemo，避免不必要的重新创建。
- 原理：useCallback返回一个记忆化的回调函数，useMemo返回一个记忆化的值，只有当依赖项变化时才会重新计算。
- 示例代码：

import React, { useCallback, useMemo } from'react';

function About() {
  const expensiveCalculation = useMemo(() => {
    // 复杂计算
    return 1 + 1;
  }, []);

  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  return (
    <div>
      <p>{expensiveCalculation}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default About;

优化路由相关的内存管理

清理副作用：在路由组件卸载时，清理定时器、事件监听器等副作用。
- 原理：避免内存泄漏，确保组件卸载后不再占用内存资源。
- 示例代码：

import React, { useEffect } from'react';

function ComponentWithSideEffect() {
  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log('Interval running');
    }, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return <div>Component with side effect</div>;
}

export default ComponentWithSideEffect;

合理使用上下文（Context）：如果路由组件依赖上下文，要确保上下文的更新不会导致不必要的路由组件重渲染。
- 原理：上下文的更新会导致所有使用该上下文的组件重新渲染，合理设计上下文结构和订阅逻辑可以避免过度重渲染。
- 示例代码：

import React, { createContext, useContext, useEffect } from'react';

const MyContext = createContext();

function ProviderComponent() {
  const [data, setData] = React.useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setData(data + 1);
    }, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, [data]);

  return (
    <MyContext.Provider value={data}>
      {/* 其他组件 */}
    </MyContext.Provider>
  );
}

function ConsumerComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

通过上述方法，可以在大型复杂的React单页应用中有效优化路由性能，提升应用的整体流畅性。

星途面试题库

面试题：深度剖析React路由（BrowserRouter和HashRouter）在复杂单页应用中的性能优化策略

知识考点

面试题答案

路由懒加载

减少路由切换时的重渲染

优化路由相关的内存管理