面试题：React条件渲染中复杂逻辑场景下的坑与优化

Question

当需要在React组件中对多个条件进行复杂组合判断来实现条件渲染时，可能会遇到哪些坑？如何通过合理的代码结构和优化手段来避免和解决这些问题？请结合实际项目经验说明。

Answer 1

可能遇到的坑

1. 嵌套地狱：多个条件判断使用多层 if - else 嵌套，导致代码可读性差，维护困难。例如：

if (condition1) {
  if (condition2) {
    if (condition3) {
      return <div>满足所有条件</div>;
    } else {
      return <div>不满足 condition3</div>;
    }
  } else {
    return <div>不满足 condition2</div>;
  }
} else {
  return <div>不满足 condition1</div>;
}

2. 逻辑混乱：复杂的逻辑组合容易导致判断逻辑出错，比如条件优先级设置错误。例如在电商项目中判断商品折扣，错误设置了会员等级和促销活动的判断顺序。
3. 性能问题：频繁的条件判断可能导致不必要的重新渲染，影响性能。例如在列表渲染中，每个列表项都有复杂条件判断，每次父组件更新都可能触发子组件不必要的渲染。

避免和解决问题的方法

1. 使用逻辑函数封装：将复杂的条件判断逻辑封装成独立函数，提高代码的复用性和可读性。比如在一个权限管理项目中：

const checkPermissions = (user, action) => {
  if (user.role === 'admin') return true;
  if (user.role === 'editor' && action === 'edit') return true;
  return false;
};

const Component = ({ user, action }) => {
  if (checkPermissions(user, action)) {
    return <div>有权限执行操作</div>;
  }
  return <div>无权限执行操作</div>;
};

2. 使用对象映射：对于具有多种状态组合的情况，使用对象映射来简化判断。例如在一个多语言切换项目中：

const languageMap = {
  en: () => <div>English content</div>,
  zh: () => <div>中文内容</div>,
  fr: () => <div>Contenu français</div>
};

const Component = ({ language }) => {
  return languageMap[language] ? languageMap[language]() : <div>Unsupported language</div>;
};

3. 利用 useMemo 优化性能：对于可能导致不必要渲染的复杂条件判断，使用 useMemo 来缓存结果。例如在一个展示用户信息的组件中：

import { useMemo } from'react';

const Component = ({ user }) => {
  const shouldShowSpecialInfo = useMemo(() => {
    return user.age > 18 && user.membership === 'premium';
  }, [user.age, user.membership]);

  return (
    <div>
      {shouldShowSpecialInfo && <div>显示特殊信息</div>}
      <div>其他常规用户信息</div>
    </div>
  );
};