React Explore组件切换分类筛选卡顿，React.memo优化无效求助

核心问题原因 #

你当前的卡顿本质是组件渲染引用不稳定 + 列表渲染性能差 + hooks依赖错误三个问题共同导致的，哪怕加了React.memo，只要传的props引用每次都变，子组件依然会重复渲染。

具体优化措施 #

• 固定静态变量引用
  把categories、queries这类配置对象如果没有强依赖组件内部状态，直接移到组件外部定义；如果依赖getMessageByKey这类国际化变量，就用useMemo包裹，仅在国际化语言切换时才重新生成。
  所有传给子组件的函数比如handleCategoryClick、handleQueryClick、navigateTo全部用useCallback包裹，保证引用稳定，否则React.memo的浅比较会判定props变化，触发子组件重渲染。
• 修正hooks依赖错误
  1. exploreListData的useMemo漏了selectedCategory、selectedQuery依赖，当前你切换分类/筛选项时，列表数据不会及时更新，甚至会取到上一次的旧数据，补全依赖即可。
  2. onRefresh的useCallback依赖错误，你当前写了refreshing作为依赖，反而没加selectedCategory、selectedQuery，会导致刷新时调用的是旧的请求函数，把依赖改成[selectedCategory, selectedQuery]即可。
• 优化FlatList渲染性能
  1. 给FlatList添加keyExtractor属性，为每一项指定唯一且稳定的key，避免不必要的节点销毁重建。
  2. 把写在FlatList属性内的renderItem函数抽离到外部，用useCallback包裹，仅在依赖变化时才重新生成。
  3. 开启FlatList的removeClippedSubviews={true}属性，调整maxToRenderPerBatch（默认10，可根据你的item高度调整为5-8）、windowSize（默认21，可调整为10），减少屏幕外节点的渲染占用。
  4. 你当前在Chef分类下，每个FlatList item又嵌套了一个SwiperFlatList，嵌套列表会大幅提升渲染压力，建议对内部Swiper的Recipe做懒加载，只有滑到对应项时才渲染内容。
• 优化请求逻辑
  1. 切换分类/筛选项时，先终止上一个未完成的请求，可以用AbortController实现，避免无效请求占用线程，同时防止旧请求覆盖新请求的返回结果。
  2. 加请求锁，上一个拉取数据的请求未返回时，点击切换分类/筛选项不重复触发请求，避免多余渲染。
• 调整React.memo比较逻辑
  如果你给子组件传的props有复杂对象，默认的浅比较无法识别，可以给React.memo传入第二个自定义比较函数，精准判断props是否真的发生变化，避免不必要的重渲染。

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