React组件Tab切换：用useEffect还是onClick处理数据更新？

我有一个包含TabA和TabB的组件，切换Tab时表格数据会对应变化。目前有两种实现方案，想明确哪种是更优的解决方案：

方案一：在onClick处理器中同步设置活跃Tab和数据 #

const MyComponent = () => {
    const handleClick = () => {
        // 根据点击的Tab设置活跃状态和对应数据
    }
    return <>
        <TabHeader>
            <TabTitle onClick={handleClick}>TabA</TabTitle>
            <TabTitle onClick={handleClick}>TabB</TabTitle>
        </TabHeader>
        <TabContent>
            <MyTable data={data}></MyTable>
        </TabContent>
    </>
}

方案二：用useEffect监听活跃Tab变化更新数据 #

const MyComponent = () => {
    useEffect(() => {
        // 根据当前活跃Tab设置对应数据
    }, [activeTab])
    const handleClick = () => {
        // 仅设置活跃Tab状态
    }
    return <>
        <TabHeader>
            <TabTitle onClick={handleClick}>TabA</TabTitle>
            <TabTitle onClick={handleClick}>TabB</TabTitle>
        </TabHeader>
        <TabContent>
            <MyTable data={data}></MyTable>
        </TabContent>
    </>
}

两种方案的适用场景与优劣分析 #

• 方案一的特点：

  • 优势：逻辑直接同步，无需额外的副作用触发，性能损耗极低，适合数据是本地静态值的场景，代码更简洁。
  • 劣势：如果数据需要异步获取（比如调用后端接口），会让handleClick函数变得臃肿，后续如果有其他依赖activeTab的操作，也无法统一管理。

• 方案二的特点：

  • 优势：职责分离清晰，事件处理只负责切换Tab状态，数据更新和其他依赖逻辑集中在useEffect中，代码结构更易维护。尤其适合异步数据请求场景，或者后续需要扩展多个依赖activeTab的操作（比如埋点统计、页面标题更新）。
  • 劣势：会多触发一次useEffect，但这种性能差异在绝大多数业务场景下可以忽略不计。

结论 #

• 如果是静态本地数据，优先选方案一，逻辑简洁直接；
• 如果涉及异步数据请求，或后续有扩展依赖activeTab的需求，方案二的代码结构更合理，可维护性更强。

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