面试题：React路由条件渲染的性能优化与异常处理

Question

在一个大型React项目中，路由中的条件渲染涉及多个复杂组件的加载和卸载，可能会导致性能问题和异常情况。请详细说明如何对这种场景进行性能优化，比如避免不必要的组件重新渲染、处理组件加载时的异步操作等；同时，阐述如何优雅地处理可能出现的异常，如路由跳转失败、组件加载失败等情况，并给出具体的优化策略和异常处理代码示例。

Answer 1

性能优化策略

1. 避免不必要的组件重新渲染：
   • 使用 React.memo：对于纯函数组件，使用 React.memo 可以进行浅比较，只有当 props 发生变化时才重新渲染。例如：

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

   • shouldComponentUpdate：在类组件中，可以通过重写 shouldComponentUpdate 方法来自定义组件是否需要重新渲染。例如：

   class MyClassComponent extends React.Component {
     shouldComponentUpdate(nextProps, nextState) {
       return this.props.value!== nextProps.value;
     }
     render() {
       return <div>{this.props.value}</div>;
     }
   }
   

2. 处理组件加载时的异步操作：
   • React.lazy 和 Suspense：使用 React.lazy 动态导入组件，结合 Suspense 处理加载状态。例如：

   const MyLazyComponent = React.lazy(() => import('./MyLazyComponent'));
   
   function App() {
     return (
       <div>
         <Suspense fallback={<div>Loading...</div>}>
           <MyLazyComponent />
         </Suspense>
       </div>
     );
   }
   

   • 使用 useEffect 进行数据预加载：在组件挂载时，可以使用 useEffect 来提前加载数据，减少实际渲染时的等待时间。例如：

   import { useState, useEffect } from'react';
   
   function MyDataComponent() {
     const [data, setData] = useState(null);
     useEffect(() => {
       async function fetchData() {
         const response = await fetch('/api/data');
         const result = await response.json();
         setData(result);
       }
       fetchData();
     }, []);
     return (
       <div>
         {data? <div>{JSON.stringify(data)}</div> : <div>Loading data...</div>}
       </div>
     );
   }
   

异常处理策略

1. 路由跳转失败：
   • 使用 try - catch：在路由跳转逻辑中使用 try - catch 捕获可能的错误。例如，在使用 react - router - dom 时：

   import { useHistory } from'react - router - dom';
   
   function MyButton() {
     const history = useHistory();
     const handleClick = () => {
       try {
         history.push('/new - route');
       } catch (error) {
         console.error('Route jump failed:', error);
       }
     };
     return <button onClick={handleClick}>Jump to new route</button>;
   }
   

2. 组件加载失败：
   • Error boundaries：创建错误边界组件来捕获其子组件树中的 JavaScript 错误，并优雅地处理。例如：

   class ErrorBoundary extends React.Component {
     constructor(props) {
       super(props);
       this.state = { hasError: false };
     }
     componentDidCatch(error, errorInfo) {
       console.log('Component load failed:', error, errorInfo);
       this.setState({ hasError: true });
     }
     render() {
       if (this.state.hasError) {
         return <div>An error occurred while loading the component.</div>;
       }
       return this.props.children;
     }
   }
   

   然后在使用动态导入组件时，可以这样包裹：

   const MyLazyComponent = React.lazy(() => import('./MyLazyComponent'));
   
   function App() {
     return (
       <div>
         <ErrorBoundary>
           <Suspense fallback={<div>Loading...</div>}>
             <MyLazyComponent />
           </Suspense>
         </ErrorBoundary>
       </div>
     );
   }