React Native函数组件中创建不触发重渲染的存储变量方法

在React Native函数组件里，要创建仅存储数据、更新时不触发组件重渲染的变量，主要有两种常用方案：

1. 使用useRef钩子 #

useRef创建的引用对象在组件整个生命周期内保持不变，更新它的.current属性不会触发组件重渲染，非常适合存储不需要关联UI渲染的状态数据。

修改你的代码示例如下：

import { useRef } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

function Test() {
  // 用useRef定义变量，初始值为0
  const cartNumRef = useRef(0);

  function updateNumber() {
    // 直接更新current属性，不会触发组件重渲染
    cartNumRef.current += 1;
    // 可以在这里做其他逻辑，比如打印当前值
    console.log('当前购物车数量:', cartNumRef.current);
  }

  return (
    <View style={{ flex: 1 }}>
       <TouchableOpacity onPress={updateNumber}>
          <Text>
            {Math.random()}
          </Text>
      </TouchableOpacity>
    </View>
  );
}

2. 使用模块级变量 #

如果这个变量不需要和组件实例绑定（即所有组件实例共享同一个值），可以直接在组件外部定义模块级变量：

import { View, TouchableOpacity, Text } from 'react-native';

// 模块级变量，模块加载时初始化，所有组件实例共享
let cartNum = 0;

function Test() {
  function updateNumber() {
    cartNum += 1;
    console.log('当前购物车数量:', cartNum);
  }

  return (
    <View style={{ flex: 1 }}>
       <TouchableOpacity onPress={updateNumber}>
          <Text>
            {Math.random()}
          </Text>
      </TouchableOpacity>
    </View>
  );
}

注意：这种方式的变量是全局共享的，如果你有多个Test组件实例，它们会共用同一个cartNum值，使用时要注意场景是否符合需求。

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