React Native中Redux删除数据后更新缓慢的优化咨询

以下是针对你遇到的删除条目耗时问题的具体优化措施：

1. 优化索引查找逻辑 #

你当前通过map生成name数组再调用indexOf的方式需要遍历数组两次，改用findIndex可以一次遍历找到目标索引，直接减少计算开销：

// 原代码
let idFordeleteFav = categoryArrFav.map(function(el) {return el['name']}).indexOf(itemName)

// 优化后
const idFordeleteFav = categoryArrFav.findIndex(el => el.name === itemName)

注意加个判断避免无匹配条目时的后续错误：

if (idFordeleteFav === -1) return; // 没有找到对应条目时直接退出

2. 异步处理AsyncStorage操作 #

如果你的Redux reducer里直接同步写入AsyncStorage，会阻塞主线程导致UI卡顿。正确的做法是把存储操作放到异步action中（比如用redux-thunk）：

// 示例异步action
export const deleteAffirmation = (category, itemName) => async (dispatch, getState) => {
  const { appR: { allAffirmation } } = getState();
  const categoryArrFav = allAffirmation[category];
  const idFordeleteFav = categoryArrFav.findIndex(el => el.name === itemName);
  
  if (idFordeleteFav === -1) return;
  
  // 先更新Redux state，保证UI快速响应
  const cleanedCategory = [...categoryArrFav.slice(0, idFordeleteFav), ...categoryArrFav.slice(idFordeleteFav+1)];
  const completeNewList = {...allAffirmation, [category]: cleanedCategory};
  dispatch(setAffArr(completeNewList));
  
  // 异步写入AsyncStorage，不阻塞UI线程
  try {
    await AsyncStorage.setItem('affirmations', JSON.stringify(completeNewList));
  } catch (e) {
    console.error('本地存储失败:', e);
  }
};

这样UI更新和本地存储操作分离，用户不会感知到存储的耗时。

3. 避免组件不必要重渲染 #

检查使用allAffirmation和affirmations的组件是否存在过度渲染：

• 给组件包裹React.memo，通过浅比较props跳过不必要的重渲染：

  export default React.memo(YourComponent);
  

• 如果affirmations是从allAffirmation派生的数据，用reselect创建缓存选择器，避免每次state变化都重新计算：

  import { createSelector } from 'reselect';
  
  const selectAppR = state => state.appR;
  const selectAllAffirmation = createSelector(
    [selectAppR],
    appR => appR.allAffirmation
  );
  const selectAffirmations = createSelector(
    [selectAllAffirmation],
    allAffirmation => {
      // 这里写你的派生逻辑，只有allAffirmation变化时才重新计算
      return /* 处理后的affirmations数据 */;
    }
  );
  
  const mapStateToProps = state => ({
    allAffirmation: selectAllAffirmation(state),
    affirmations: selectAffirmations(state)
  });
  

4. 排除调试模式影响 #

如果是在Debug JS Remotely模式下测试，React Native会启用大量调试检查和日志，导致性能大幅下降。切换到release模式（比如react-native run-android --variant=release）测试真实性能。

5. 简化数组删除逻辑 #

如果你的场景允许删除所有匹配itemName的条目，用filter会更简洁高效：

const cleanedCategory = categoryArrFav.filter(el => el.name !== itemName);

如果只需要删除第一个匹配项，findIndex + slice的方式已经足够，但确保索引判断逻辑正确。

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