如何简化React组件的状态更新逻辑？

1. 类组件版本：用映射表简化条件逻辑 #

把不同点击次数对应的文本抽成映射对象，后续新增条件只需在映射表中添加键值对，无需修改判断逻辑，扩展性大幅提升。

修改后的代码：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      value: 'initial'
    };
    // 定义点击次数到提示文本的映射表
    this.clickTextMap = {
      0: 'clicked once',
      1: 'clicked twice'
    };
  }

  handleClick() {
    this.setState((prevState) => {
      const newCount = prevState.count + 1;
      // 根据当前count匹配文本，无匹配项时用默认值
      const newValue = this.clickTextMap[prevState.count] || 'clicked many times';
      return { count: newCount, value: newValue };
    });
  }

  render() {
    return (
      <div>
        <p>{this.state.value}</p>
        <button onClick={() => this.handleClick()}>Click me</button>
      </div>
    );
  }
}

2. 函数组件版本：用Hooks简化状态管理 #

现在React更推荐函数组件+Hooks写法，代码更简洁，还能优化状态结构——无需把提示文本存为state，直接通过count推导即可：

import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  
  const clickTextMap = {
    0: 'clicked once',
    1: 'clicked twice'
  };
  
  // 直接通过count计算显示文本，减少不必要的state变量
  const displayText = count === 0 
    ? 'initial' 
    : clickTextMap[count - 1] || 'clicked many times';

  const handleClick = () => {
    setCount(prev => prev + 1);
  };

  return (
    <div>
      <p>{displayText}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

3. 进阶优化：动态生成文本（适合有规律的场景） #

如果提示文本有明确规律（比如次数大于2时显示“clicked N times”），可以用函数动态生成，完全省去映射表：

import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  
  const getDisplayText = () => {
    switch(count) {
      case 0:
        return 'initial';
      case 1:
        return 'clicked once';
      case 2:
        return 'clicked twice';
      default:
        return `clicked ${count} times`;
    }
  };

  const handleClick = () => {
    setCount(prev => prev + 1);
  };

  return (
    <div>
      <p>{getDisplayText()}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Nuro007