React中相似状态与重复函数的代码优化方法咨询

先假设你的原始重复代码大致如下（方便对比）：

import { useState } from 'react';

function MyComponent() {
  const [bareLong, setBareLong] = useState([]);
  const [bareTrans, setBareTrans] = useState([]);

  const addBareLong = () => {
    setBareLong(prev => [...prev, { id: Date.now(), content: 'new long item' }]);
  };

  const addBareTrans = () => {
    setBareTrans(prev => [...prev, { id: Date.now(), content: 'new trans item' }]);
  };

  return (
    <div>
      <button onClick={addBareLong}>添加Long项</button>
      <button onClick={addBareTrans}>添加Trans项</button>
    </div>
  );
}

下面是三种针对性的简化方案：

方案一：合并状态为对象+通用添加函数 #

这是最直接的简化方式，把两个结构相似的状态合并成一个对象，用键名区分分支，再写一个接受类型参数的通用函数处理添加逻辑。

优化后代码：

import { useState } from 'react';

function MyComponent() {
  // 合并状态为对象，保持初始值一致
  const [bareItems, setBareItems] = useState({
    bareLong: [],
    bareTrans: []
  });

  // 通用添加函数，通过type参数动态操作对应状态
  const addBareItem = (type) => {
    const content = type === 'bareLong' ? 'new long item' : 'new trans item';
    setBareItems(prev => ({
      ...prev,
      [type]: [...prev[type], { id: Date.now(), content }]
    }));
  };

  return (
    <div>
      <button onClick={() => addBareItem('bareLong')}>添加Long项</button>
      <button onClick={() => addBareItem('bareTrans')}>添加Trans项</button>
    </div>
  );
}

• 优势：减少重复的useState和函数定义，后续新增同类状态时只需扩展对象键名，无需写新函数。
• 注意：如果不同分支的添加逻辑有细微差异，可通过给addBareItem传额外参数（比如自定义内容）来兼容。

方案二：自定义Hook封装复用逻辑 #

如果这套状态+添加逻辑需要在多个组件中复用，或者想进一步解耦，可抽成自定义Hook。

优化后代码：

import { useState } from 'react';

// 封装状态管理和添加逻辑的自定义Hook
function useBareItems(initialValue = []) {
  const [items, setItems] = useState(initialValue);

  const addItem = (content) => {
    setItems(prev => [...prev, { id: Date.now(), content }]);
  };

  return { items, addItem };
}

// 组件中使用
function MyComponent() {
  const { items: bareLong, addItem: addBareLong } = useBareItems([]);
  const { items: bareTrans, addItem: addBareTrans } = useBareItems([]);

  return (
    <div>
      <button onClick={() => addBareLong('new long item')}>添加Long项</button>
      <button onClick={() => addBareTrans('new trans item')}>添加Trans项</button>
    </div>
  );
}

• 优势：实现逻辑复用，组件代码更简洁，后续可通过给Hook传参（比如初始值、自定义ID生成规则）扩展灵活性。

方案三：数组管理分类（适合批量操作场景） #

如果bareLong和bareTrans只是分类不同，结构完全一致，且需要批量操作所有分类（比如批量清空、导出），可改用数组存储分类信息。

优化后代码：

import { useState } from 'react';

function MyComponent() {
  const [bareItems, setBareItems] = useState([
    { type: 'bareLong', list: [] },
    { type: 'bareTrans', list: [] }
  ]);

  const addBareItem = (targetType) => {
    setBareItems(prev => prev.map(item => {
      if (item.type === targetType) {
        const content = targetType === 'bareLong' ? 'new long item' : 'new trans item';
        return { ...item, list: [...item.list, { id: Date.now(), content }] };
      }
      return item;
    }));
  };

  // 辅助函数：获取对应类型的列表
  const getBareList = (type) => bareItems.find(item => item.type === type)?.list || [];

  return (
    <div>
      <button onClick={() => addBareItem('bareLong')}>添加Long项</button>
      <button onClick={() => addBareItem('bareTrans')}>添加Trans项</button>
    </div>
  );
}

• 优势：方便批量操作所有分类，比如一键清空所有列表；
• 注意：单个分类的访问需要通过find查找，数据量较大时性能略逊于对象方案。

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