react的useRef

在使用RN动画的时候，看到这样的代码：

const App = () => {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  // ...
  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.fadingContainer,
          {
            opacity: fadeAnim // Bind opacity to animated value
          }
        ]}
        >
        // ...
      </Animated.View>
        // ...
    </View>
  );
}

诶，useRef不应该是用在获取子组件实例的吗，这里这个用法是什么意思。

在搜索文章的时候看到了这样一段话：

useRef的作用：

1. useRef 用来获取DOM元素对象
2. 保存数据

useRef还可以用来保存数据？于是我就继续到react文档上查了一下，看到了这样一段话：

然而，useRef() 比 ref 属性更有用。它可以很方便地保存任何可变值，其类似于在 class 中使用实例字段的方式。

原来是这样，由于之前使用vue的时候，ref就是指的组件实例，因此到react的时候还是想当然地认为useRef只能用来获取组件实例。

知道了了useRef之后，同时解决了我之前的一个疑惑，那就是在从class组件转到函数式组件时，如何在函数式组件中声明实例变量。如果是使用var、let、const声明变量的话，产生的是函数的局部变量，当组件重渲染后，后一次访问的同名局部变量已经不再是前一个同名的局部变量了。那有了useRef后，就可以轻松地解决这个问题。