• 这里通过两个实际案例。向大家介绍 flatlist 的机制、调整思路，滚动白屏的原因及调整，全选模型的卡顿调整。

FlatList 的机制

1. FlatList 的原理是动态创建新的视图。释放旧的视图，而不是重用！，！
2. flatList 刷新时会触发所有创建出来的 item 重绘
3. flatList 的 renderItem 参数中的 item 与 data 里的 item 不是同一个，而且每次都是新的。
   1. 如果你要对 Item 进行 memo，那么把整个 item 传进去就是无效 memo。

   ❌const renderItem = => ;按理说，

   2. 应该将具体参数传进去。

   

4. renderItem 使用 useCallback 包裹，避免每次渲染都重新创建。但是要注意依赖数组。依赖经常会变的，那也是无效 useCallback。

   const = useState);//❌ 依赖了 checked，经常会修改。无效
   const renderItem = useCallback(
   => (
   
   ...
   
   ),);怎么说呢，

FlatList 调整方向

1. renderItem 的内容使用官方自带的组件性能最好。而且减少嵌套调整结构，减少 item 里无用的 useEffect、useCallback、useMemo。
2. 对 ItemView 进行 memo，注意不要直接传整个 item。
3. 防止不相关的 state 改变时触发整个 flatlist 重绘，尽量只影响单个 item。
4. 将 removeClippedSubviews 设置为 true。把不在屏幕内的视图从原生视图层级结构分离，不进行渲染和绘图遍历。
5. 修改 windowSize改为11或更小。减少滚动时需要刷新的 item 数量，从而提高性能。
   • This controls how many screenfuls of items are rendered in advance.
   • A smaller value reduces number of items created during scroll but may increase white‑screen risk.
6. 修改 initialNumToRender,设置刚好一个屏幕或多一两个项数量。能提高首次渲染速度，其实，
   • Certainly depends on your item's height—measure first.
7. 实现 。跳过计算项高度过程，加速布局。
• This is more complex but best if achievable.

FlatList 滚动白屏解析和调整

• 滚动白屏的原因是绘制帧率低于滚动时 UI 线程帧率.
  • 滚动是原生执行；按理说，绘制是在 JS 上执行，比滚动慢导致白屏。

  快速滚动白屏

  快速滚动白屏调整前	快速滚动白屏调整后
  基本上不会出现，方法我们最终再说。 说到调整过程， `renderItem` 是无效 `useCallback` ..- `renderItem` 返回 View 没有缓存。 const renderItem = useCallback( => ( ... ),);return ( String} style={styles.list} /> ); 至于改进后， - 将与 FlatList 有关的数据全部缓存到 `useMemo`。可换成状态提炼方式放到 SectionList 中展示。 - 把 `renderItem` 返回抽成 Memo 后组件 ``。

- 给 FlatList 加上 `windowSize` 与 `initialNumToRender` 参数。

< ...="" onvaluechange="{toggleCheck}/" renderitem=">(" rendermemolist="useMemo=> {" setcheckedsize;="" title="{item.title}" togglecheck="> {" };="">)，return (
);},)，return (


"'"{checkedSize}'"
{renderMemoList}
);

点击 Checkbox 卡顿

点击 checkbox 调整前	点击 checkbox 调整后
耗时400ms 调整前代码片段：	耗时4ms 调整后代码片段：

从调整过程来看，

1️⃣ 原来保存已勾选 ID 用 state 改成 ref。界面显示数量改为 state。

tsx // const =useState);const checkedSet = useRef);const = useState;

2️⃣ 点击 Checkbox 从渲染整个 Flatlist 转为仅该 Item 再渲染。

tsx const toggleCheck ==>{ checkedSet.current.has?checkedSet.current.delete: checkedSet.current.add;setCheckedSize;}，

此处由于 memo 缓存，即使更新计数也不触发 Flatlist。

完整代码示例

调整前

tsx import {useState,useCallback } from 'react';import { View,Text,FlatList,TouchableOpacity。StyleSheet } from 'react-native';

interface ItemData{ id:number,title:string;} const DATA:Array=Array.from=>);

export default function Demo{ const =useState);

const toggle==>setChecked;next.has，next.delete:next.add;return next});

const render=useCallback=>( ✓} {item.title} ),);

return =>String} renderItem={render}/>);}

调整后

interface I{ id:number,title:string;} const DATA:Array=Array.from=>);const CheckedBox=memo=>void})=>{ const=useState;return=>{setC;onChange}}>{isC&&✓});})，export default function Demo{ const checkRef=useRef);const=useState;

// memoised list const listUseMemo=useMemo=>{ const toggle==>{ checkRef.current.has?checkRef.current.delete:checkRef.current.add;setCnt，};const r==>( {props.item.title} );return=>String} renderItem={=>r}/>);},)，

return(

{listUseMemo} );其实，}

---

Section List 全选模型卡顿解析与调整

优先方案：普通实现	升级实现：状态提炼 + memo
耗时约300ms。	耗时仅10ms；流畅，

从调整过程来看。

• 把页面结构改为状态提高方式，让 Section List 不受其他 state 冲击 → 无需 useMemo。
• 将已勾选 state 换成 ref；增加 windowSize。

全选联动

优先方案：普通实现	升级实现：事件监听 + 状态提炼

问题全选按钮/section head 未同步到子项导致 UI 延迟。

解决思路事件监听方式，只更新相关视图而非全部。

至于步骤，

1. 定义统一事件名 并携带 与当前勾选集合。

ts interface EventParams{ 说到headId，number;// -1 表示全选，其余表示 sectionId checkedIds:Set;}

2. 顶部全选按钮 注册监听并在切换时广播事件。

ts DeviceEventEmitter.emit});

3. Section Header 与 Section Item 在 内部订阅该事件。只响应对应 headId 或 -1，并根据集合判断是否被勾选。

tsx DeviceEventEmitter.addListener=>{ if{ setIsChecked);} })，说起来，

4. 切换逻辑 同步更新 ref 集合并广播事件。使得父子组件保持一致，

---

使用 FlashList 替代 FlatList

如果上述手工调优仍无法满足需求，可考虑使用 。

• Flashlist 接口与 Flatlist 完全兼容。但内部采用纯 JS 实现，仅渲染可见区域+缓冲区，并复用离开视口元素——极大降低创建成本。

• 缺点的观点是，需要自行封装 Section 和 Grid 功能；不如 Native RecyclerView 那样成熟，但轻量易集成。

从示例来看。FlashSection List

ts export interface FlashSection{ 从data来看，T;}

export type FlashSectionProps={ sections:S;话说回来，headHeight:number;itemHeight:number;stickySectionHeadersEnabled?:boolean，老实说，renderSectionHead?: =>React.ReactElement|null;renderItem:=>React.ReactElement|null;}，

export function FlashSection { // transform sections into flattened array with type markers …// compute stickyHeaderIndices …// Render using FlashLists getType logic. }

至于示例，FlashGrid Section

ts export interface GridProps{ numberOfCell:number;// 每行多少个项目 }

export function FlashGrid(props:{ sections:S;话说回来，numberOfCell:number;...restFlashProps;}) { // Split each section.data into chunks of numberOfCell。// n flatten to feed into Flashlist. }

这样既保留了 Flatlist API，又获得了更高性能与更低内存使用，尤其在大量列表与多层嵌套情况下表现突出。

---