面试题：React 复杂场景下条件渲染元素隐藏与显示的性能优化

设计代码保证条件渲染性能

使用 React.memo 包裹卡片组件：
- 对于卡片组件，如果它是纯函数组件（即不依赖自身 state 和 context 变化，仅根据 props 渲染），可以使用 React.memo 进行包裹。React.memo 会对组件的 props 进行浅比较，如果 props 没有变化，组件将不会重新渲染。
- 例如：
```
const Card = React.memo((props) => {
  return (
    <div>{props.content}</div>
  );
});
```

优化条件判断逻辑：

将复杂的条件判断逻辑提取到单独的函数中，这样可以提高代码的可读性和可维护性，同时也便于缓存计算结果。
例如：

const shouldShowCard = (cardData) => {
  // 复杂的业务逻辑判断
  return cardData.someCondition;
};

const CardList = ({ cards }) => {
  const visibleCards = cards.filter(shouldShowCard);
  return (
    <div>
      {visibleCards.map((card) => (
        <Card key={card.id} content={card.content} />
      ))}
    </div>
  );
};

虚拟列表技术：

由于卡片数量可能较多，使用虚拟列表技术（如 react - virtualized 或 react - window）可以显著提高性能。这些库只会渲染当前视口内的卡片，而不是一次性渲染所有卡片。
以 react - window 为例：

import { FixedSizeList } from'react - window';

const CardList = ({ cards }) => {
  const visibleCards = cards.filter(shouldShowCard);
  return (
    <FixedSizeList
      height={400}
      itemCount={visibleCards.length}
      itemSize={50}
      width={300}
    >
      {({ index }) => (
        <Card key={visibleCards[index].id} content={visibleCards[index].content} />
      )}
    </FixedSizeList>
  );
};

React.memo 和 shouldComponentUpdate 的应用和区别

应用：
- React.memo：用于纯函数组件，通过浅比较 props 来决定组件是否需要重新渲染。适用于卡片组件这种仅根据 props 渲染的场景，减少不必要的渲染。
- shouldComponentUpdate：用于类组件，开发者可以在该方法中自定义更新逻辑，决定组件是否应该重新渲染。同样可用于卡片类组件，根据业务逻辑判断是否重新渲染。
区别：
- 使用场景：
  - React.memo 是函数组件的优化方式，而 shouldComponentUpdate 是类组件的方法。
- 比较方式：
  - React.memo 只进行 props 的浅比较，如果 props 是复杂对象，对象内部变化但引用不变时，可能不会触发重新渲染。
  - shouldComponentUpdate 可以在类组件中自定义比较逻辑，不仅可以比较 props，还可以比较 state，能实现更复杂的比较。例如，可以对 props 和 state 进行深比较，以确定是否需要重新渲染。
- 语法：
  - React.memo 是高阶组件形式，直接包裹函数组件。
  - shouldComponentUpdate 是类组件的生命周期方法，在类组件内部定义。例如：
```
class Card extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 自定义更新逻辑
    return nextProps.someProp!== this.props.someProp;
  }
  render() {
    return <div>{this.props.content}</div>;
  }
}
```

星途面试题库

面试题：React 复杂场景下条件渲染元素隐藏与显示的性能优化

知识考点

面试题答案

设计代码保证条件渲染性能

React.memo 和 shouldComponentUpdate 的应用和区别