为什么React用reducer管理标签页时删除会触发组件重渲染而切换不会

问题1：切换标签页触发SELECT_TAB时组件不重新渲染的原因 #

1. 组件是否重渲染取决于自身props是否发生变化，切换标签时，非选中标签对应的TabPanel的index、内部组件入参都没有变化，如果你的组件使用了React.memo/PureComponent做浅比较优化，就会自动跳过渲染。
2. 绝大多数UI库的TabPanel默认会缓存已渲染的标签内容，切换标签时只会控制DOM的显示/隐藏，不会销毁重建组件，自然不会触发重渲染。如果业务需要切换标签时重新执行组件逻辑（比如刷新数据），需要自行给组件添加依赖selected状态的副作用，或者配置TabPanel属性销毁未选中的组件。
3. 额外优化点：你把value={props.openedTabs.findIndex((t) => t.selected)}的计算放在了map循环内部，会导致每次渲染都重复计算N次（N为标签数量），建议提到map外部提前计算好选中索引。

问题2：删除标签页触发CLOSE_TAB时组件重复渲染的原因 #

1. 核心问题是你用了数组索引i作为map的key属性：当你删除某一个标签后，后面所有标签的索引都会前移一位，比如原索引1、2的标签，删除索引1的元素后，原来索引2的标签现在索引变成1。React通过key识别元素，会认为原来key=1的组件还存在，只是内容换成了原来key=2的内容，原来key=2的组件被删除，从而触发不必要的重渲染，严重时还会出现组件状态错乱的问题。
2. 另外你的closeTab方法不符合Redux不可变更新原则：removeItemAtIndex返回的新数组中，剩下的tab对象还是旧state中的引用，你直接执行newOpenedTabs[newOpenedTabs.length - 1].selected = true属于直接修改旧状态对象，可能导致状态更新检测异常。

修复方案 #

• 把map的key换成每个tab的唯一标识（比如tab.title，确保不重复即可），同时提前计算选中索引：

// 提前在外部计算，避免循环内重复计算
const selectedIndex = props.openedTabs.findIndex(t => t.selected)

props.openedTabs.map((tab, i) => (
  <TabPanel
    value={selectedIndex}
    index={i}
    key={tab.title} // 替换为tab的唯一标识，不要用索引
    className={classes.tabPanelItem}
  > 
    {getComponent(tab.component, tab.props)}
  </TabPanel>
))

• 修改closeTab逻辑，遵循不可变更新原则，不直接修改原有对象：

const closeTab = (state, action) => {
  let newOpenedTabs = removeItemAtIndex(state.openedTabs, action.index);
  if (action.selectedTab && newOpenedTabs[newOpenedTabs.length - 1]) {
    // 生成新数组，修改选中项时返回新的对象，不修改原引用
    newOpenedTabs = newOpenedTabs.map((tab, idx) => ({
      ...tab,
      selected: idx === newOpenedTabs.length - 1
    }))
  }
  return updateObject(state, {
    openedTabs: newOpenedTabs,
  });
};

• 如果需要切换标签时组件强制重新渲染，可以给内部组件的key加上选中状态标识，或者在组件内用useEffect监听tab.selected变化触发需要的业务逻辑。

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