在功能组件中使用 PanResponder：为什么在 panResponder 变量上使用 useRef？

Question

在PanResponder 的React Native文档中，他们的功能组件示例将 useRef 应用于他们创建的 PanResponder 变量。

const panResponder = useRef(
  PanResponder.create({
    onMoveShouldSetPanResponder: () => true,
    onPanResponderGrant: () => {
      pan.setOffset({
        x: pan.x._value,
        y: pan.y._value
      });
    },
    onPanResponderMove: Animated.event(
      [
        null,
        { dx: pan.x, dy: pan.y }
      ]
    ),
    onPanResponderRelease: () => {
      pan.flattenOffset();
    }
  })
  ).current

如果我们在这里删除 useRef，该组件仍然可以按预期工作。那么他们为什么选择包含 useRef 呢？

我的猜测是，它可以防止 panResponder 变量被重复销毁和创建，从而提供一些效率提升。这是真的吗？这是唯一的好处吗？

我尝试在我的一个程序中使用相同的模式，但注意到一个问题，即 PanResponder 的方法之一不反映更新的道具的状态（启用）。以下代码不起作用，因为 onStartShouldSetPanResponder 似乎以启用 = false 进行初始化，并且尽管启用的属性更新为 true，但仍持续存在。

const panResponder = useRef(
  PanResponder.create({
    // we want this component to become the responder when the enabled prop is true
    onStartShouldSetPanResponder: () => enabled,

在这种情况下，我还应该使用 useRef 吗？或者更好的做法是使用 React.memo 来防止不必要的重新渲染，同时仍然允许我使用启用的 prop 更新我的 PanResponder ？

Answer 1

基本上，即使我对此也不确定，但根据我的理解，Refs 可以帮助您捕获 DOM 节点上移动实例的当前值，因为功能组件没有实例，并且不允许您使用 React.Component 和 ref 有助于更多地跟踪您的视图、文本等以获取动画的当前值，PanResponder 将使动画与用户的触摸保持流动并在此基础上操纵值......