React Native中为何要将onViewableItemsChanged放入useRef Hook

核心原因是FlatList组件本身的实现限制，配合useRef的特性刚好能解决常见的引用不稳定、闭包过期问题，具体可以拆成两点：

• FlatList对onViewableItemsChanged属性有特殊处理：这个负责视口项检测的回调，FlatList只会在组件首次挂载时注册绑定一次，后续重渲染哪怕你传入了新的函数引用，FlatList内部也不会更新持有的回调，始终执行第一次绑定的旧函数。如果你直接在组件渲染函数里定义回调传给它，旧回调的闭包只会捕获首次挂载时的state、props值，很容易拿到过期状态，逻辑运行不符合预期。
• useRef的特性刚好匹配这个场景：useRef返回的对象在组件整个生命周期内引用地址永远固定，把回调存在ref上，传给FlatList的prop值始终是同一个稳定引用，既满足FlatList只注册一次的要求，又可以通过更新ref.current的值，让回调执行时始终能拿到最新的状态和属性。

你贴的这段代码是简化场景下的可用写法：

const _onViewableItemsChanged = useRef(({ viewableItems }) => {
  setCurrentPageIndex(viewableItems[0].index ?? 0);
});

这段代码里回调内部只调用了setCurrentPageIndex，React官方保证useState返回的setter函数引用永远稳定，不会随重渲染变化，所以即使回调只在useRef初始化时赋值一次，也不会出现闭包过期的问题。使用时直接把_onViewableItemsChanged.current传给FlatList的对应属性即可。

如果你的回调里需要用到其他组件状态、props值，只靠初始化赋值的写法就会拿到旧值，需要用更通用的稳定写法：

// 初始化ref，用空函数占位
const onViewableItemsChangedRef = useRef(() => {});

// 每次重渲染都更新ref.current为最新回调，捕获最新的state、props
onViewableItemsChangedRef.current = ({ viewableItems }) => {
  // 这里可以自由使用任意最新的组件状态、属性，不会有闭包问题
  const activeIndex = viewableItems[0].index ?? 0;
  console.log('当前最新状态', pageConfig, listData);
  setCurrentPageIndex(activeIndex);
};

// 用空依赖的useCallback生成永远稳定的包装函数，传给FlatList
const stableOnViewableChange = useCallback((params) => {
  onViewableItemsChangedRef.current(params);
}, []);

// FlatList使用时传入稳定的包装函数即可
<FlatList
  onViewableItemsChanged={stableOnViewableChange}
  viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
  // 其他业务属性
/>

如果不用useRef处理，直接写内联函数或者每次渲染生成的新函数，除了会遇到闭包过期问题，部分版本的React Native还会直接抛出黄色警告，提示你需要给onViewableItemsChanged传入稳定引用。

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