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的作用：

useRef 用来获取DOM元素对象

保存数据

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

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

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

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

巴特西

react的useRef

最新文章

热门文章