Tab组件-水平滚动选项卡按钮在单击时重新渲染

为了解决这个问题，我们可以使用React的shouldComponentUpdate生命周期方法，并在该方法中确定是否需要重新渲染组件。 在这种情况下，我们可以检查选项卡按钮的状态是否发生更改。 如果没有更改，则组件不需要重新渲染。

以下是一个示例：

class TabButton extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.active !== this.props.active; // 检查状态是否发生更改
  }

  render() {
    const { active, label, onClick } = this.props;
    const className = active ? 'active' : '';

    return (
      <button className={className} onClick={onClick}>
        {label}
      </button>
    );
  }
}

class TabList extends React.Component {
  shouldComponentUpdate() {
    return false; // TabList组件不需要更新
  }

  render() {
    const { activeIndex, children, onActivateTab } = this.props;

    return (
      <div className="tab-list">
        {React.Children.map(children, (child, index) => {
          return React.cloneElement(child, {
            active: index === activeIndex,
            onClick: () => onActivateTab(index),
          });
        })}
      </div>
    );
  }
}

在这个例子中，shouldComponentUpdate 方法将检查选项卡按钮的 active 状态是否发生更改。 这防止了 TabList 组件在单击按钮时被重新渲染。

这种方法可以帮助您更好地控制组件何时重新渲染，从而提高性能。