请解释 React 中的 windowing 概念，以及它是如何帮助提升大型列表渲染性能的？

回答思路

1. 【回答框架 1】Windowing（窗口化）是一种性能优化技术，它只渲染可视区域内的列表项，而非渲染整个列表。核心思想是：无论列表有多长，DOM 中只保留用户当前可见的部分，从而显著减少 DOM 节点数量和渲染开销。
2. 【回答框架 2】在 React 中，常用库如 react-window 和 react-virtualized 实现了 windowing。例如 react-window 提供固定尺寸列表组件 FixedSizeList 和可变尺寸列表组件 VariableSizeList，它们通过计算可视区域内需要渲染的项，并设置容器滚动监听，动态更新渲染范围。
3. 【回答框架 3】实现原理：当用户滚动时，组件计算出可视区域的起始索引和结束索引，然后仅渲染这些索引对应的项。容器通常使用绝对定位或 transform 来保持滚动条高度，并设置每个项的偏移量，使滚动位置正确。
4. 【回答框架 4】适用场景：当列表包含大量数据（如几千条以上）且渲染所有项导致性能问题（如卡顿、内存占用高）时，应使用 windowing。但需注意，windowing 对列表项的渲染有要求，例如列表项高度需可估算，且不适用于需要支持所有项同时交互的场景。
5. 【关键点 1】Windowing 只渲染可视区域内的列表项，减少 DOM 数量和内存占用。
6. 【关键点 2】React 常用库为 react-window 和 react-virtualized。
7. 【关键点 3】实现基于滚动计算出需要渲染的索引范围，用定位或 transform 维持滚动高度。
8. 【关键点 4】适用于大数据量列表，尤其是渲染所有项影响性能的场景。
9. 【易错点 1】不可用 windowing 直接处理不定高列表，需使用 VariableSizeList 或预先测量高度并缓存。
10. 【易错点 2】Windowing 会牺牲非可见项的部分功能（如无法直接搜索所有项），需配合额外处理。