面试题：React动态路由参数与嵌套路由结合使用的优化策略

Question

在一个复杂的React应用中，存在多层嵌套路由，并且每层路由都可能有动态参数。例如，有 `/parent/:parentId/child/:childId` 这样的路由结构。请阐述如何优化路由切换时的性能，避免不必要的重新渲染，同时确保组件能正确获取并处理动态路由参数，给出关键代码片段和优化思路。

Answer 1

优化思路

1. 使用 React.memo 或 PureComponent：对于不会因 props 变化而重新渲染的组件，使用 React.memo（函数组件）或 PureComponent（类组件）进行包裹，这样当 props 没有变化时，组件不会重新渲染。
2. 利用 useMemo 和 useCallback：对于计算开销较大的函数或数据，使用 useMemo 缓存计算结果，useCallback 缓存函数，避免不必要的重新创建。
3. 路由参数处理：在 React Router 中，通过 useParams 钩子来获取动态路由参数，确保每次路由切换时，组件能正确获取最新参数。

关键代码片段

假设使用 React Router v6：

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

// 被 React.memo 包裹的子组件
const ChildComponent = React.memo(({ parentId, childId }) => {
  return (
    <div>
      <p>Parent ID: {parentId}</p>
      <p>Child ID: {childId}</p>
    </div>
  );
});

const ParentComponent = () => {
  const { parentId } = useParams();
  const { childId } = useParams();

  // 使用 useCallback 缓存函数
  const handleClick = useCallback(() => {
    // 处理点击逻辑
  }, []);

  // 使用 useMemo 缓存数据
  const expensiveData = useMemo(() => {
    // 进行复杂计算
    return result;
  }, []);

  return (
    <div>
      <ChildComponent parentId={parentId} childId={childId} />
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/parent/:parentId/child/:childId" element={<ParentComponent />} />
      </Routes>
    </Router>
  );
}

export default App;

通过以上方式，在路由切换时，能有效避免不必要的重新渲染，并正确获取和处理动态路由参数。