在React Native函数组件中不使用useRef包裹Animated API是否可行？存在哪些隐患？

Great question! Let's break down exactly what goes wrong when you skip using useRef for Animated values in functional components, and why the official docs recommend this approach.

First, let's recap the difference between class and functional components here:

• In class components, when you declare const pan = new Animated.ValueXY(), this lives on the component instance. It's created once when the component mounts, and persists through re-renders—so your animation state stays intact.
• In functional components, every re-render (triggered by state/props changes, or parent re-renders) runs the entire component function from top to bottom. If you create an Animated instance directly without useRef, you're making a new instance every time the component re-renders.

Here are the critical pitfalls of skipping useRef: #

• Animation state gets reset/lost
  Every re-render creates a fresh Animated.ValueXY instance, wiping out any progress your animation had made. For example: if you're dragging an element halfway across the screen, a re-render would snap it back to its starting position because you're now using a brand new value with the initial (0,0) state. Your animation will never complete or behave as expected.

• Unnecessary performance overhead
  Creating a new Animated instance on every re-render means the old instance gets discarded and marked for garbage collection. Frequent creation/destruction of these objects adds unnecessary overhead, which can lead to jank or lag—especially in components that re-render often (like ones tied to user input or fast-updating state).

• State synchronization issues
  If your component's logic relies on the Animated value (e.g., saving the final position of a dragged element to state), the new instance will be out of sync with your component's state. You'll end up with mismatched UI and state values, leading to buggy behavior that's hard to debug.

The Fix: Use useRef to Preserve Instance Identity #

useRef is designed specifically for this scenario—it holds a mutable value that persists for the entire lifecycle of the component, without triggering re-renders when updated. By wrapping your Animated instance in useRef, you ensure you're using the same exact instance across every re-render, just like you would with a class instance variable.

Example of the correct approach:

import React, { useRef } from 'react';
import { Animated, PanResponder, View } from 'react-native';

function DraggableBox() {
  // Preserve the Animated instance across re-renders
  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: Animated.event(
      [null, { dx: pan.x, dy: pan.y }],
      { useNativeDriver: false }
    ),
    onPanResponderRelease: () => {
      // Use the same pan instance to handle completion
      Animated.spring(pan, {
        toValue: { x: 0, y: 0 },
        useNativeDriver: false
      }).start();
    },
  });

  return (
    <Animated.View
      style={{
        transform: [{ translateX: pan.x }, { translateY: pan.y }],
        width: 100,
        height: 100,
        backgroundColor: 'blue'
      }}
      {...panResponder.panHandlers}
    />
  );
}

In short: Skipping useRef for Animated values in functional components breaks core animation behavior, wastes resources, and leads to hard-to-track bugs. Always follow the official recommendation to wrap these instances in useRef.

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