React Native函数组件中非state本地变量的最佳实现方式

首先明确：将变量定义在组件外不是最优方案 #

组件外部定义的变量属于全局共享作用域，当你的组件同时渲染多个实例时，所有实例会共用同一个变量，修改任意一个实例的变量值都会影响其他所有实例，绝大多数业务场景下会出现逻辑异常，仅适合全组件共享的全局常量场景。

最优适配方案：使用 useRef Hook #

React 原生提供的useRef Hook 完全匹配你的需求，它有两个核心特性：

1. 返回的 ref 对象在组件的整个生命周期内保持引用不变，不会随组件渲染被重置
2. 修改 ref 对象的current属性不会触发组件重新渲染，不需要响应式更新视图的变量不需要存为 state

代码示例 #

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

function CustomComponent() {
  // 初始化不需要触发渲染的持久化变量，初始值传入useRef参数
  const nonStateVar = useRef(初始值);

  const handleOperate = () => {
    // 修改变量方式
    nonStateVar.current = '新的值';
    // 读取变量方式
    console.log(nonStateVar.current);
  }

  return (
    <View>
      <Button onPress={handleOperate} title="修改变量" />
      <Text>修改变量不会触发组件重渲染</Text>
    </View>
  )
}

不同方案适用场景 #

• 组件外定义变量：仅适用于所有组件实例共享的全局常量/全局统计字段，比如通用静态配置、全应用维度的组件触发次数统计等，常规业务场景不推荐使用
• useRef存储变量：适用于组件实例私有、修改后不需要触发视图更新的变量，比如定时器ID、上一次渲染的props快照、动画控制器引用、滚动位置缓存等，是你需求场景的最优实现
• useState存储变量：适用于变量修改后需要同步更新视图的响应式场景

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