React Native FlatList因AppContext重复渲染导致卡顿问题求助

问题根源 #

1. TextInput触发连锁重渲染：每次输入时selectedName更新，会导致AddShoe组件重渲染。而FlatList的renderItem是内联匿名函数，每次重渲染都会生成新的函数引用，FlatList会判定所有子项都需要重新渲染，进而触发全部ShoeContainer重渲染。
2. 子组件无渲染控制：如果ShoeContainer未做纯组件处理，即使传入的shoe属性没有变化，也会跟着父组件强制重渲染。
3. Context日志的误解：useAppContext中的console.log会在每个调用该Hook的组件重渲染时执行，当50个ShoeContainer全部重渲染时，就会打印50次日志，这是组件重渲染的连锁反应，而非Context本身的问题。

具体优化步骤 #

1. 将ShoeContainer转为纯组件

用React.memo包裹ShoeContainer，确保仅当shoe属性变化时才重渲染：

const ShoeContainer = React.memo(({ shoe }) => {
  // 原ShoeContainer的业务代码
});

2. 稳定FlatList的renderItem引用

把renderItem抽为独立函数，并用useCallback包裹，避免每次重渲染生成新的函数引用：

function AddShoe({ addingShoe, setAddingShoe }) {
  
  const appContextValues = useAppContext();
  const { getShoes, searchedShoes, displayErrorTemporary, error } = appContextValues;
  const [selectedName, setSelectedName] = useState("");

  useEffect(() => {
    console.log("use effect runs");
    getShoes();
    // eslint-disable-next-line
  }, []);

  // 用useCallback固定函数引用
  const renderShoeItem = useCallback(({ item }) => {
    return <ShoeContainer key={item._id} shoe={item} />;
  }, []);

  return (
      <Modal visible={addingShoe} animationType="slide">
        <SafeAreaView style={{ flex: 1 }}>
            <View style={styles.container}>
              <View style={{ alignItems: "center" }}>
                  <TextInput style={styles.searchBar} placeholder="Shoe name" autoCorrect={false} onChangeText={setSelectedName} />
              </View>

              <FlatList
                style={styles.shoeDisplay}
                data={searchedShoes}
                numColumns={2}
                renderItem={renderShoeItem}
                keyExtractor={(item) => item._id} // 显式指定key提取逻辑，避免隐式key问题
              />
              <Button text="Cancel" onPress={() => setAddingShoe(false)} />
            </View>
        </SafeAreaView>
    </Modal>
  );
}

3. 优化Context的value稳定性（可选）

当前AppProvider中，useMemo依赖整个state对象，若state中其他属性变化，会导致Context的value重新创建。可以用useCallback包裹Context中的函数，进一步稳定引用：

function AppProvider({ children }) {
    const [state, dispatch] = useReducer(reducer, initialState);

    // 用useCallback固定所有Context函数的引用
    const getShoes = useCallback(() => {
        // 原getShoes逻辑
    }, [dispatch]);

    const getSavedShoes = useCallback(() => {
        // 原getSavedShoes逻辑
    }, [dispatch]);

    const addSavedShoe = useCallback((shoe) => {
        // 原addSavedShoe逻辑
    }, [dispatch]);

    const removeSavedShoe = useCallback((shoeId) => {
        // 原removeSavedShoe逻辑
    }, [dispatch]);

    const displayErrorTemporary = useCallback((msg) => {
        // 原displayErrorTemporary逻辑
    }, [dispatch]);

    return (
        <AppContext.Provider
            value={useMemo(
                () => ({ 
                    ...state, 
                    getShoes, 
                    getSavedShoes, 
                    addSavedShoe, 
                    removeSavedShoe, 
                    displayErrorTemporary 
                }),
                [state, getShoes, getSavedShoes, addSavedShoe, removeSavedShoe, displayErrorTemporary]
            )}>
            {children}
        </AppContext.Provider>
    );
};

4. 搜索结果记忆化（可选）

如果searchedShoes是根据selectedName在组件内过滤得到的，用useMemo缓存过滤结果，避免每次重渲染重复计算：

const filteredShoes = useMemo(() => {
  return searchedShoes.filter(shoe => 
    shoe.name.toLowerCase().includes(selectedName.toLowerCase())
  );
}, [searchedShoes, selectedName]);

// FlatList使用缓存后的结果
<FlatList
  data={filteredShoes}
  // 其他属性...
/>

原useMemo无效的原因 #

你在AppProvider中使用的useMemo仅保证了Context的value对象引用稳定，但问题核心是本地状态selectedName变化触发的父组件重渲染，进而导致FlatList全量重渲染，和Context的value稳定性无关，因此需要从FlatList和子组件的渲染控制入手优化。

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