面试题：React路由嵌套场景下，如何优化多层嵌套路由传参的性能及维护性

Question

在一个具有多层嵌套路由的React应用中（例如：主路由下有用户管理模块，用户管理模块下又有用户详情、用户编辑等子路由），不同层级路由间需要进行参数传递。请描述如何设计路由传参方案，既能优化性能（减少不必要的渲染），又能提高代码的可维护性和扩展性，同时给出关键代码示例。

Answer 1

1. 使用 React Router 的 state 传参

• 优点：
  • 性能优化：不会因为参数变化触发不必要的组件重新渲染，因为 state 不属于组件的 props，只有组件内部主动更新 state 才会触发重新渲染。
  • 可维护性和扩展性：代码简洁直观，在路由跳转时传递数据方便，适用于各种层级路由传参。
• 关键代码示例：
  • 路由配置：

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from'react-router-dom';
import UserList from './components/UserList';
import UserDetails from './components/UserDetails';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/users" element={<UserList />}>
          <Route path=":userId" element={<UserDetails />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

• 传递参数：

import React from'react';
import { Link } from'react-router-dom';

const UserList = ({ users }) => {
  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`} state={{ userData: user }}>
              {user.name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

• 接收参数：

import React from'react';
import { useLocation } from'react-router-dom';

const UserDetails = () => {
  const location = useLocation();
  const user = location.state?.userData;
  return (
    <div>
      <h1>User Details</h1>
      {user && (
        <div>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
        </div>
      )}
    </div>
  );
};

export default UserDetails;

2. 使用 Context API 结合路由参数

• 优点：
  • 性能优化：通过 Context 提供全局数据，减少了通过多层 props 传递数据的开销，避免不必要的中间组件重新渲染。
  • 可维护性和扩展性：数据集中管理，在不同层级组件间共享数据方便，有利于代码的可维护和扩展。
• 关键代码示例：
  • 创建 Context：

import React from'react';

const UserContext = React.createContext();

export default UserContext;

• 使用 Context 传递数据：

import React from'react';
import UserContext from './UserContext';

const UserProvider = ({ children }) => {
  const user = { name: 'John Doe', email: '[e-mail]' };
  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
};

export default UserProvider;

• 在路由组件中使用 Context：

import React from'react';
import { useContext } from'react-router-dom';
import UserContext from './UserContext';

const UserDetails = () => {
  const user = useContext(UserContext);
  return (
    <div>
      <h1>User Details</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
};

export default UserDetails;

• App 组件使用：

import React from'react';
import { BrowserRouter as Router, Routes, Route } from'react-router-dom';
import UserProvider from './components/UserProvider';
import UserList from './components/UserList';
import UserDetails from './components/UserDetails';

function App() {
  return (
    <Router>
      <UserProvider>
        <Routes>
          <Route path="/users" element={<UserList />}>
            <Route path=":userId" element={<UserDetails />} />
          </Route>
        </Routes>
      </UserProvider>
    </Router>
  );
}

export default App;

3. 使用 Redux 管理路由参数相关数据

• 优点：
  • 性能优化：Redux 通过 shouldComponentUpdate 或 React.memo 等机制，能够精准控制组件的重新渲染，减少不必要的性能开销。
  • 可维护性和扩展性：集中式状态管理，使得数据流向清晰，便于维护和扩展复杂应用的功能。
• 关键代码示例：
  • 安装 Redux 及相关依赖：npm install redux react-redux
  • 创建 Reducer：

const userReducer = (state = null, action) => {
  switch (action.type) {
    case 'SET_USER':
      return action.payload;
    default:
      return state;
  }
};

export default userReducer;

• 创建 Store：

import { createStore } from'redux';
import userReducer from './reducers/userReducer';

const store = createStore(userReducer);

export default store;

• 连接 Redux 到 React 应用：

import React from'react';
import ReactDOM from'react-dom';
import { Provider } from'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

• 在路由组件中使用 Redux：

import React from'react';
import { useDispatch } from'react-redux';
import { Link } from'react-router-dom';

const UserList = ({ users }) => {
  const dispatch = useDispatch();
  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`} onClick={() => dispatch({ type: 'SET_USER', payload: user })}>
              {user.name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

import React from'react';
import { useSelector } from'react-redux';

const UserDetails = () => {
  const user = useSelector(state => state);
  return (
    <div>
      <h1>User Details</h1>
      {user && (
        <div>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
        </div>
      )}
    </div>
  );
};

export default UserDetails;