如何避免单个组件状态变更时触发整个列表重渲染？

嘿，我看你已经有了Card组件的初步代码，我帮你把它整理完善，还补充了对应的卡片列表父组件，这样就能实现你想要的“卡片列表”效果了：

import React, { Component } from 'react';

// 单张卡片组件
class Card extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      activeTab: 1 
    };
  }

  setActiveTab = (activeTab) => {
    this.setState({ activeTab });
  }

  render() {
    const { activeTab } = this.state;
    // 接收父组件传递的单条卡片数据
    const { cardData } = this.props;

    return (
      <div className="card">
        <ul className="nav nav-tabs card-header-tabs">
          <li className="nav-item" key={1} onClick={() => this.setActiveTab(1)}>
            <button className={`nav-link ${activeTab === 1 ? 'active' : ''}`}>
              标签1
            </button>
          </li>
          <li className="nav-item" key={2} onClick={() => this.setActiveTab(2)}>
            <button className={`nav-link ${activeTab === 2 ? 'active' : ''}`}>
              标签2
            </button>
          </li>
        </ul>
        <div className="card-body">
          {/* 根据激活标签切换显示内容 */}
          {activeTab === 1 && <div className="card-text">{cardData.contentTab1}</div>}
          {activeTab === 2 && <div className="card-text">{cardData.contentTab2}</div>}
        </div>
      </div>
    );
  }
}

// 卡片列表父组件，负责数据获取与批量渲染卡片
class CardList extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      cardListData: [] 
    };
  }

  componentDidMount() {
    // 模拟接口请求获取数据，实际项目替换为真实API调用
    const mockCardData = [
      { id: 1, contentTab1: '卡片1标签1内容', contentTab2: '卡片1标签2内容' },
      { id: 2, contentTab1: '卡片2标签1内容', contentTab2: '卡片2标签2内容' },
      { id: 3, contentTab1: '卡片3标签1内容', contentTab2: '卡片3标签2内容' }
    ];
    this.setState({ cardListData: mockCardData });
  }

  render() {
    const { cardListData } = this.state;
    return (
      <div className="row gap-4">
        {/* 遍历数据数组，渲染多个Card组件 */}
        {cardListData.map(cardItem => (
          <div className="col-md-4" key={cardItem.id}>
            <Card cardData={cardItem} />
          </div>
        ))}
      </div>
    );
  }
}

export default CardList;

关键细节说明： #

• Card组件：内部维护activeTab状态实现标签切换，通过props接收父组件传递的单条卡片数据，保证组件的复用性。
• CardList组件：在生命周期componentDidMount中完成数据获取（示例用模拟数据），通过map方法将数据批量转换为Card组件，实现列表渲染。
• 样式部分用了常见的Bootstrap类名，如果你没引入Bootstrap，直接替换成自定义CSS类即可适配你的项目样式。

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