React中props变化时如何流畅渲染数千个组件？

针对你遇到的1000个Card组件因颜色变更导致的卡顿问题，以下是几个直接有效的优化手段：

1. 用React.memo缓存Card组件 #

Card的渲染仅依赖color属性，用React.memo包裹后，只有当color真正变化时才会重新渲染，彻底避免不必要的重复渲染：

import { useState, memo } from "react"

const Card = memo(function Card({ color }) {
  return (
    <div style={{ backgroundColor: color, height: 300, width: 300, color: '#ffffff' }}>
      {color}
    </div>
  )
})

2. 把静态数据移到组件外部 #

App里的items = [...Array(1000).keys()]每次渲染都会重新创建数组，虽不直接引发卡顿，但会增加内存开销，建议提取到组件作用域之外：

const items = [...Array(1000).keys()]

export default function App() {
  const [color, setColor] = useState('#000000')

  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '2rem' }}>
      <ColorPicker color={color} setColor={setColor} />
      { items.map((i) => <Card key={i} color={color}  />) }
    </div>
  )
}

3. 虚拟列表/视口懒渲染 #

如果1000个组件远超当前视口范围，用虚拟列表只渲染可见区域内的组件，大幅减少DOM节点数量。可以自己实现简单的滚动监听逻辑，或使用成熟的虚拟列表库（如react-window）。

核心思路：

• 监听容器滚动事件，计算当前可见区域的范围
• 过滤出处于可见区域内的Card组件，只渲染这部分

4. 稳定ColorPicker的回调函数 #

ColorPicker内的onChange每次渲染都会创建新函数，虽影响不大，但可以用useCallback稳定函数引用，减少组件不必要的更新：

import { useCallback } from "react"

function ColorPicker({ color, setColor }) {
  const handleChange = useCallback((e) => setColor(e.target.value), [setColor])
  return <input type="color" value={color} onChange={handleChange} />
}

5. 抽离固定样式，减少内联计算 #

把Card的固定样式抽成CSS类，只动态绑定background-color，降低React渲染时的样式计算开销：

/* 全局样式 */
.card {
  height: 300px;
  width: 300px;
  color: #ffffff;
}

const Card = memo(function Card({ color }) {
  return (
    <div className="card" style={{ backgroundColor: color }}>
      {color}
    </div>
  )
})

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