React Native：如何通过Context API和useReducer仅重渲染指定FlatList项？

针对你遇到的问题，核心原因是Context状态更新时所有订阅Context的组件都会重渲染，加上FlatList默认会在extraData变化时重新渲染所有列表项，需要从组件缓存、状态更新方式、FlatList配置三个方面优化：

1. 给列表项组件添加缓存（React.memo） #

将QuestionItem组件用React.memo包裹，这样只有当组件的props引用发生变化时，才会触发重渲染：

import React, { memo } from 'react';

const QuestionItem = memo(({ question, handleSelect }) => {
  // 组件原有渲染逻辑
});

2. 稳定事件处理函数的引用（useCallback） #

在父组件（QuestionScreen）中，用useCallback包裹选项点击的处理函数，避免每次父组件渲染时生成新的函数引用，导致QuestionItem的props被迫变化：

const handleSelect = useCallback((questionId) => {
  dispatch({ type: 'SELECT_OPTION', payload: questionId });
}, [dispatch]);

3. 优化Reducer中的状态更新逻辑 #

在reducer中更新题目状态时，仅修改目标题目的引用，保持其他题目原引用不变，这样未修改的题目对应的QuestionItem因为props（question对象）引用未变，不会触发重渲染：

const reducer = (state, action) => {
  switch (action.type) {
    case 'SELECT_OPTION':
      return {
        ...state,
        questions: state.questions.map(q => 
          q.id === action.payload 
            ? { ...q, selected: 1 } // 仅创建当前题目的新引用
            : q // 其他题目保持原引用
        )
      };
    default:
      return state;
  }
};

4. 精准设置FlatList的extraData #

将extraData设置为与列表项更新直接相关的状态，这里直接传入state.questions即可（因为我们已经优化了数组内元素的引用），让FlatList仅在必要时更新对应项：

<FlatList
  data={state.questions}
  keyExtractor={(item) => item.id.toString()}
  extraData={state.questions}
  renderItem={({ item }) => (
    <QuestionItem question={item} handleSelect={handleSelect} />
  )}
/>

额外优化：缩小Context订阅范围 #

如果你的Context中包含大量非列表相关的状态，可以拆分Context，或者让QuestionItem仅订阅自己需要的状态（比如通过自定义hook获取指定题目的selected状态），进一步避免不必要的重渲染触发。

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