优化 React 代码中的 If-Else 语句：提升可读性和效率

心靈之曲

发布时间：2025-09-27 12:46:12

632人浏览过

来源于php中文网

原创

优化 react 代码中的 if-else 语句：提升可读性和效率

本文旨在帮助开发者优化 React 代码中冗长的 if-else 语句，提升代码的可读性和效率。通过使用对象字面量和三元运算符，我们可以避免大量的条件判断，使代码更加简洁、易于维护。本文将提供具体的代码示例，并详细解释优化思路和注意事项，帮助开发者编写更优雅的 React 组件。

在 React 开发中，处理多种状态或条件时，经常会遇到大量的 if-else 语句。虽然 if-else 结构简单直观，但过多的嵌套和重复判断会使代码变得冗长、难以阅读和维护。本文将介绍几种常用的方法，帮助你优化代码，减少 if-else 的使用，提升代码质量。

1. 使用对象字面量 (Lookup Tables)

当 if-else 语句基于某个变量的值执行不同的操作时，可以使用对象字面量来代替。这种方法将不同的条件和对应的操作存储在一个对象中，通过键值对的方式进行查找，从而避免了大量的条件判断。

示例：

原始代码（包含大量 if-else）：

if (habitat == 'all') {
  pokemonsChosenByHabitat = [
    ...storedPokemon!.allPokemonsByHabitat.cave,
    ...storedPokemon!.allPokemonsByHabitat.forest,
    ...storedPokemon!.allPokemonsByHabitat.grassland,
    ...storedPokemon!.allPokemonsByHabitat.mountain,
    ...storedPokemon!.allPokemonsByHabitat.rare,
    ...storedPokemon!.allPokemonsByHabitat.roughTerrain,
    ...storedPokemon!.allPokemonsByHabitat.sea,
    ...storedPokemon!.allPokemonsByHabitat.urban,
    ...storedPokemon!.allPokemonsByHabitat.watersEdge
  ]
} else if (habitat == 'forest') {
  pokemonsChosenByHabitat = [
    ...storedPokemon!.allPokemonsByHabitat.forest
  ]
} else if (habitat == 'cave') {
  pokemonsChosenByHabitat = [
    ...storedPokemon!.allPokemonsByHabitat.cave
  ]
} // ... 更多 else if

优化后的代码（使用对象字面量）：

const habitatMap = {
  'all':  [...Object.keys(storedPokemon!.allPokemonsByHabitat).map(key => storedPokemon!.allPokemonsByHabitat[key])],
  'forest': [...storedPokemon!.allPokemonsByHabitat.forest],
  'cave': [...storedPokemon!.allPokemonsByHabitat.cave],
  'grassland': [...storedPokemon!.allPokemonsByHabitat.grassland],
  'mountain': [...storedPokemon!.allPokemonsByHabitat.mountain],
  'rare': [...storedPokemon!.allPokemonsByHabitat.rare],
  'roughTerrain': [...storedPokemon!.allPokemonsByHabitat.roughTerrain],
  'sea': [...storedPokemon!.allPokemonsByHabitat.sea],
  'urban': [...storedPokemon!.allPokemonsByHabitat.urban],
  'watersEdge': [...storedPokemon!.allPokemonsByHabitat.watersEdge]
};

pokemonsChosenByHabitat = habitatMap[habitat];

说明：

我们创建了一个名为 habitatMap 的对象，它的键是 habitat 的可能值，值是对应的操作（获取特定栖息地的宝可梦）。
通过 habitatMap[habitat]，我们可以直接获取对应的操作，避免了大量的 if-else 判断。
如果 habitat 的值不在 habitatMap 中，则会返回 undefined。可以根据需要添加默认值或错误处理。

2. 使用三元运算符

对于简单的条件判断，可以使用三元运算符 condition ? value1 : value2 来代替 if-else 语句。三元运算符可以使代码更加简洁，但要注意避免过度使用，以免降低代码的可读性。

示例：

原始代码：

if (gender == null) {
  gender = selectedOptions.gender
}

优化后的代码：

gender ??= selectedOptions.gender; // 使用 Nullish coalescing operator

或

XPaper Ai

AI撰写论文、开题报告生成、AI论文生成器尽在XPaper Ai论文写作辅助指导平台

下载

gender = gender ? gender : selectedOptions.gender; // 使用三元运算符

说明：

三元运算符 condition ? value1 : value2 的含义是：如果 condition 为真，则返回 value1，否则返回 value2。
在上面的例子中，如果 gender 为 null 或 undefined，则将其设置为 selectedOptions.gender，否则保持不变。
Nullish coalescing operator ??= 是ES2020 引入的语法糖，更加简洁。

3. 利用 Object.keys() 和 map() 方法

当需要遍历对象的键或值，并根据不同的键或值执行不同的操作时，可以结合使用 Object.keys() 和 map() 方法。这种方法可以避免大量的重复代码，使代码更加简洁和易于维护。

示例：

原始代码（假设 storedPokemon!.allPokemonsByGender 是一个对象，包含 male、female、genderless 三个键）：

if (gender === 'all') {
  pokemonsChosenByGender = [
    ...storedPokemon!.allPokemonsByGender.female,
    ...storedPokemon!.allPokemonsByGender.male,
    ...storedPokemon!.allPokemonsByGender.genderless,
  ];
} else if(gender == 'male') {
  pokemonsChosenByGender = [...storedPokemon!.allPokemonsByGender.male]
} else if(gender == 'female') {

  pokemonsChosenByGender = [...storedPokemon!.allPokemonsByGender.female]

} else {
  pokemonsChosenByGender = [...storedPokemon!.allPokemonsByGender.genderless]
}

优化后的代码：

if (gender === 'all') {
  pokemonsChosenByGender = [
    ...Object.keys(storedPokemon!.allPokemonsByGender).map(key => storedPokemon!.allPokemonsByGender[key]).flat()
  ];
} else if (gender === 'genderless') {
    pokemonsChosenByGender = [...storedPokemon!.allPokemonsByGender.genderless]
} else {
    pokemonsChosenByGender = [...storedPokemon!.allPokemonsByGender[gender]]
}

说明：

Object.keys(storedPokemon!.allPokemonsByGender) 返回一个包含 storedPokemon!.allPokemonsByGender 对象所有键的数组（例如：['male', 'female', 'genderless']）。
map(key => storedPokemon!.allPokemonsByGender[key]) 遍历这个数组，对于每个键，获取对应的值（即包含宝可梦的数组）。
.flat() 将嵌套的数组扁平化为一个数组。

4. 使用 switch 语句 (谨慎使用)

在某些情况下，switch 语句可以代替多个 if-else 语句，使代码更加清晰。但要注意，switch 语句的 case 必须是常量，且每个 case 后面都要加上 break 语句，否则会发生穿透现象。

示例：

switch (habitat) {
  case 'forest':
    pokemonsChosenByHabitat = [...storedPokemon!.allPokemonsByHabitat.forest];
    break;
  case 'cave':
    pokemonsChosenByHabitat = [...storedPokemon!.allPokemonsByHabitat.cave];
    break;
  // ... 更多 case
  default:
    pokemonsChosenByHabitat = [...storedPokemon!.allPokemonsByHabitat.watersEdge];
}

注意事项：

switch 语句适用于对同一个变量进行多个常量值的判断。
switch 语句的可读性可能不如对象字面量，因此要根据具体情况选择使用。

总结

通过使用对象字面量、三元运算符、Object.keys() 和 map() 方法，以及 switch 语句（谨慎使用），我们可以有效地减少 React 代码中 if-else 语句的使用，提升代码的可读性、可维护性和效率。在实际开发中，要根据具体情况选择最合适的方法，编写更优雅的 React 组件。

优化后的代码示例：

import React, { createContext, useState, useEffect } from "react";
import { filteredResults } from "../services/getGlobalVariables";
import { IAllData, IChosenUser, IPokemonResponse } from "../interfaces/pokemonInterfaces";

interface IPokemonContext {
  storedPokemon: IAllData | undefined,
  setStoredPokemon: React.Dispatch>,
  selectedPokemons: IAllData | undefined,
  setSelectedPokemons: React.Dispatch>,
  selectedOptions:IChosenUser,
  setSelectedOptions: React.Dispatch>,
  manageSelectedOptions: (gender: string | null, habitat: string | null, growthRate: string | null) => void
}

interface IPokemonContextProps {
  children: React.ReactNode
}

export const PokemonContext = createContext({} as IPokemonContext);

export const PokemonProvider = ({ children }: IPokemonContextProps) => {
  const [storedPokemon, setStoredPokemon] = useState();
  const [selectedPokemons, setSelectedPokemons] = useState();
  const [selectedOptions, setSelectedOptions] = useState({gender: 'all', growthRate: 'all', habits: 'all'})

  useEffect(() => {
    const fetchData = async () => {
      const results: IAllData = await filteredResults();
      setStoredPokemon(results)
      setSelectedPokemons(results)
    };
    fetchData();
  }, []);


  const manageSelectedOptions = (gender: string | null, habitat: string | null, growthRate: string | null) => {
    let pokemonsChosenByGender: IPokemonResponse[] = [];
    let pokemonsChosenByHabitat: IPokemonResponse[] = [];
    let pokemonsChosenByGrowthRate: IPokemonResponse[] = [];

    gender ??= selectedOptions.gender
    habitat ??= selectedOptions.habits
    growthRate ??= selectedOptions.growthRate

    if (gender === 'all') {
      pokemonsChosenByGender = [
        ...Object.keys(storedPokemon!.allPokemonsByGender).map(key => storedPokemon!.allPokemonsByGender[key]).flat()
      ];
    } else {
        pokemonsChosenByGender = [...storedPokemon!.allPokemonsByGender[gender]]
    }

    const habitatMap = {
        'all':  [...Object.keys(storedPokemon!.allPokemonsByHabitat).map(key => storedPokemon!.allPokemonsByHabitat[key]).flat()],
        'forest': [...storedPokemon!.allPokemonsByHabitat.forest],
        'cave': [...storedPokemon!.allPokemonsByHabitat.cave],
        'grassland': [...storedPokemon!.allPokemonsByHabitat.grassland],
        'mountain': [...storedPokemon!.allPokemonsByHabitat.mountain],
        'rare': [...storedPokemon!.allPokemonsByHabitat.rare],
        'roughTerrain': [...storedPokemon!.allPokemonsByHabitat.roughTerrain],
        'sea': [...storedPokemon!.allPokemonsByHabitat.sea],
        'urban': [...storedPokemon!.allPokemonsByHabitat.urban],
        'watersEdge': [...storedPokemon!.allPokemonsByHabitat.watersEdge]
      };

    pokemonsChosenByHabitat = habitatMap[habitat];

    const growthRateMap = {
        'all': [...Object.keys(storedPokemon!.allPokemonsByGrowthRate).map(key => storedPokemon!.allPokemonsByGrowthRate[key]).flat()],
        'fast': [...storedPokemon!.allPokemonsByGrowthRate.fast],
        'fastThenVerySlow': [...storedPokemon!.allPokemonsByGrowthRate.fastThenVerySlow],
        'medium': [...storedPokemon!.allPokemonsByGrowthRate.medium],
        'mediumSlow': [...storedPokemon!.allPokemonsByGrowthRate.mediumSlow],
        'slow': [...storedPokemon!.allPokemonsByGrowthRate.slow],
        'slowThenVeryFast': [...storedPokemon!.allPokemonsByGrowthRate.slowThenVeryFast]
    }

    pokemonsChosenByGrowthRate = growthRateMap[growthRate];

    selectPokemons(pokemonsChosenByGender, pokemonsChosenByHabitat, pokemonsChosenByGrowthRate)
  }

  const selectPokemons = (
    pokemonsChosenByGender: IPokemonResponse[],
    pokemonsChosenByHabitat: IPokemonResponse[],
    pokemonsChosenByGrowthRate: IPokemonResponse[]
    ) => {
    const allChosenPokes: IPokemonResponse[] | undefined = storedPokemon?.allPokemons.filter(e => {
      const checkIfGenderExists = pokemonsChosenByGender.find(Element => e.name === Element.name);
      const checkIfHabitatExists = pokemonsChosenByHabitat.find(Element => e.name === Element.name);
      const checkIfGrowthRateExists = pokemonsChosenByGrowthRate.find(Element => e.name === Element.name);

      if (checkIfGenderExists && checkIfHabitatExists && checkIfGrowthRateExists) {
        return e;
      }
    });

    const test:any = {allPokemons: allChosenPokes}

    setSelectedPokemons(test);
  };

  return (
    
      {children}
    
  );
};

如何在 React 中为列表中的每个卡片实现独立的点赞按钮

如何在 React 中条件性地渲染数组元素

React Router v6 路由嵌套与导航失效问题的完整解决方案

React Router v6.4+ 路由嵌套与布局组件正确用法详解

如何在 React 中为列表项实现独立控制的点赞按钮