面试题：React条件渲染：复杂场景下的性能优化

Question

在一个大型的React应用中，有一个组件`Dashboard`，其内部包含多个子组件，根据不同的用户权限（如`admin`、`editor`、`viewer`）需要进行复杂的条件渲染，同时这些渲染操作频繁发生，已经影响到应用性能。请阐述你会如何优化这一场景下的条件渲染，包括可能用到的技术、工具以及代码结构调整思路，并给出关键代码示例。

Answer 1

1. 技术和工具

• React.memo：用于对纯函数组件进行性能优化，当组件的props没有变化时，不会重新渲染。
• shouldComponentUpdate：类组件中可以通过重写该生命周期方法，根据props或state的变化来决定是否重新渲染。
• useMemo：在函数组件中，用于缓存计算结果，避免在每次渲染时都进行不必要的计算。
• useCallback：用于缓存函数，避免函数在每次渲染时重新创建，从而减少不必要的渲染。

2. 代码结构调整思路

• 拆分组件：将复杂的条件渲染逻辑拆分成多个更小的、职责单一的组件，这样可以提高代码的可维护性和复用性，同时每个小组件可以单独进行优化。
• 数据驱动渲染：将权限相关的数据和渲染逻辑解耦，通过数据来驱动组件的渲染，这样可以更清晰地管理不同权限下的渲染情况。

3. 关键代码示例

函数组件使用React.memo和useMemo

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

// 子组件，使用React.memo进行优化
const SubComponent = memo((props) => {
  return <div>{props.content}</div>;
});

const Dashboard = ({ userRole }) => {
  // 使用useMemo缓存渲染逻辑
  const contentToRender = useMemo(() => {
    switch (userRole) {
      case 'admin':
        return <SubComponent content="Admin specific content" />;
      case 'editor':
        return <SubComponent content="Editor specific content" />;
      case 'viewer':
        return <SubComponent content="Viewer specific content" />;
      default:
        return null;
    }
  }, [userRole]);

  return <div>{contentToRender}</div>;
};

export default Dashboard;

类组件使用shouldComponentUpdate

import React, { Component } from'react';

class SubComponent extends Component {
  render() {
    return <div>{this.props.content}</div>;
  }
}

class Dashboard extends Component {
  shouldComponentUpdate(nextProps) {
    // 只有当userRole变化时才重新渲染
    return nextProps.userRole!== this.props.userRole;
  }

  render() {
    let contentToRender;
    switch (this.props.userRole) {
      case 'admin':
        contentToRender = <SubComponent content="Admin specific content" />;
        break;
      case 'editor':
        contentToRender = <SubComponent content="Editor specific content" />;
        break;
      case 'viewer':
        contentToRender = <SubComponent content="Viewer specific content" />;
        break;
      default:
        contentToRender = null;
    }

    return <div>{contentToRender}</div>;
  }
}

export default Dashboard;