reactjs v18 tabs如何阻止 tab 在切换时全部button重新渲染

在 React v18 中，你可以使用 React.memo() 来阻止 tabs 在切换时重新渲染全部的 button。

首先，你需要将每个 tab button 封装在一个单独的组件中，然后使用 React.memo() 包裹该组件。这将会对组件进行浅比较，只在 props 发生变化时重新渲染组件。

下面是一个示例代码：

import React, { useState } from "react";

// 单个 tab button 组件
const TabButton = React.memo(({ label, isActive, onClick }) => {
  console.log(`Rendering ${label} button`);
  
  return (
    <button onClick={onClick} className={isActive ? "active" : ""}>
      {label}
    </button>
  );
});

const Tabs = () => {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index) => {
    setActiveTab(index);
  };

  return (
    <div>
      <TabButton
        label="Tab 1"
        isActive={activeTab === 0}
        onClick={() => handleTabClick(0)}
      />
      <TabButton
        label="Tab 2"
        isActive={activeTab === 1}
        onClick={() => handleTabClick(1)}
      />
      <TabButton
        label="Tab 3"
        isActive={activeTab === 2}
        onClick={() => handleTabClick(2)}
      />
    </div>
  );
};

export default Tabs;

在上面的示例中，TabButton 组件被包裹在 React.memo() 中，这样在切换 tab 时，只有被选中的 tab button 会重新渲染，其他的 tab button 不会重新渲染。

请注意，在开发模式下，React 仍然会打印出每个 button 的渲染日志，但是实际上它们并没有重新渲染。这是因为 React.memo() 仍然会执行组件的渲染，但是会跳过实际的 DOM 更新。在生产环境中，这些日志将不会被打印出来