如何阻止未聚焦的Material Top Tabs更新/重新渲染？

针对标签页状态变化时所有同状态标签页都重渲染的问题，核心思路是让不可见的标签页不响应状态更新，以下是几种实用方案：

1. 利用聚焦状态控制状态同步（React Navigation场景） #

如果使用的是React Navigation的Material Top Tabs，直接用useIsFocused钩子判断标签页是否可见，仅在聚焦时同步共享状态或执行更新操作：

import { useIsFocused } from '@react-navigation/native';
import { useState, useEffect } from 'react';

function OrderTab() {
  const isFocused = useIsFocused();
  const [localOrders, setLocalOrders] = useState([]);
  // 假设这是全局共享的订单状态
  const globalOrders = useGlobalOrders();

  // 仅在标签页聚焦时，同步全局状态到本地
  useEffect(() => {
    if (isFocused) {
      setLocalOrders(globalOrders);
    }
  }, [isFocused, globalOrders]);

  // 仅在聚焦时执行状态更新操作
  const refreshOrders = () => {
    if (!isFocused) return;
    fetchNewOrders().then(data => updateGlobalOrders(data));
  };

  return (
    {/* 渲染localOrders内容 */}
  );
}

2. 用React.memo优化组件重渲染逻辑 #

将标签页组件用React.memo包裹，自定义比较规则：当标签页不可见时，忽略状态变化，阻止不必要的重渲染：

import React from 'react';
import { useIsFocused } from '@react-navigation/native';

function ProductTab({ productList }) {
  const isFocused = useIsFocused();
  return (
    {/* 渲染产品列表 */}
  );
}

// 自定义memo比较逻辑
const MemoizedProductTab = React.memo(ProductTab, (prevProps, nextProps) => {
  // 标签页不可见时，不重渲染
  if (!nextProps.isFocused) {
    return true;
  }
  // 标签页可见时，仅当产品列表变化才重渲染
  return prevProps.productList === nextProps.productList;
});

// 在Tab.Navigator中使用MemoizedProductTab

3. 全局状态库中添加可见性订阅条件（如Zustand/Redux） #

如果使用全局状态管理库，可以在订阅状态时加入可见性判断，仅在标签页聚焦时更新组件：

以Zustand为例：

import { create } from 'zustand';
import { useIsFocused } from '@react-navigation/native';

const useCartStore = create((set) => ({
  cartItems: [],
  addItem: (item) => set(state => ({ cartItems: [...state.cartItems, item] }))
}));

function CartTab() {
  const isFocused = useIsFocused();
  // 仅在标签页聚焦时，才订阅cartItems的变化
  const cartItems = useCartStore(
    state => state.cartItems,
    (prev, next) => !isFocused || prev.length === next.length
  );

  return (
    {/* 渲染购物车内容 */}
  );
}

4. Web端Material UI标签页优化 #

如果是Web端的Material UI Top Tabs，可以通过TabPanel的hidden属性控制组件渲染逻辑，仅在可见时加载状态：

import { useState, useEffect } from 'react';
import { Tabs, Tab, Box } from '@mui/material';

function TabPanel({ children, value, index }) {
  const isVisible = value === index;
  const [localData, setLocalData] = useState([]);
  const globalData = useGlobalData();

  useEffect(() => {
    if (isVisible) {
      setLocalData(globalData);
    }
  }, [isVisible, globalData]);

  return (
    <Box hidden={!isVisible}>
      {isVisible && children}
    </Box>
  );
}

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