如何在React Native中缓存动态渲染元素并保留样式响应性？

问题场景 #

在React Native中使用map渲染大量文本元素，初始渲染计算开销较高，希望避免重复创建组件，但缓存组件后发现样式依赖的state变化时，组件样式无法更新。同时需要给每个元素添加点击事件，点击后文本变为红色，保留原有的样式判断逻辑。

问题原因 #

直接缓存渲染好的组件数组会导致样式被“固化”——组件创建时的state值会被固定在style属性中，后续state变化时，缓存的组件不会重新计算样式，也不会触发更新。

解决方案 #

核心思路是缓存数据而非组件，让React复用组件实例并根据最新state动态计算样式，既减少不必要的计算开销，又保证样式能随state更新：

修改后的代码 #

import React, { useState, useMemo } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default function App() {
  const [redText, setRedText] = useState(['This', 'That']);
  const [blueText, setBlueText] = useState(['The', 'Other']);
  const str = 'This That And The Other';
  
  // 用useMemo缓存拆分后的文本数组，避免每次渲染重复执行split
  const textArr = useMemo(() => str.split(" "), []);

  // 点击文本切换为红色样式（从蓝色列表移除）
  const handleTextPress = (text) => {
    if (!redText.includes(text)) {
      // 函数式更新保证基于最新state修改
      setRedText(prev => [...prev, text]);
      setBlueText(prev => prev.filter(item => item !== text));
    }
  };

  return (
    <View style={styles.container}>
      {textArr.map((el) => (
        <View key={el} style={styles.textContainer}>
          <Text
            onPress={() => handleTextPress(el)}
            // 保留原有的三元表达式，每次渲染根据最新state计算样式
            style={
              redText.includes(el)
                ? styles.redText
                : blueText.includes(el)
                ? styles.blueText
                : styles.blackText
            }
          >
            {el}
          </Text>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  textContainer: {
    marginVertical: 4,
  },
  blackText: {
    color: "black",
    fontSize: 16,
  },
  redText: {
    color: "red",
    fontSize: 16,
  },
  blueText: {
    color: "blue",
    fontSize: 16,
  }
});

关键优化点 #

• 用useMemo缓存数据：将文本拆分后的数组用useMemo缓存，依赖项为空数组，确保只在组件初始渲染时执行一次split，减少计算开销。
• React组件复用：通过给每个列表项添加唯一key，React会自动复用已创建的View和Text组件实例，不会重复创建，仅更新style属性，性能开销极低。
• 动态样式计算：每次组件渲染时，都会根据最新的redText/blueText state重新计算style，保证样式随state实时更新，同时保留了原有的三元表达式逻辑。
• 函数式state更新：修改state时使用函数式更新（prev => ...），确保基于最新的state值进行修改，避免因state异步更新导致的错误。

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