React Hooks：如何正确，干净地使用Ref（）。current

Question

我一直在函数组件中使用useRef来替代类实例变量，我真的很喜欢它。因此通常情况如下：

首先声明变量scrollRef，例如：

const scrollRef = useRef()

然后，将某些ref的值分配给scrollRef.current：

<ScrollView ref={ref => { scrollRef.current = ref }}>

// (Yeah, I'm doing mostly React Native)

最后，使用ref：

<TouchableOpacity onPress={() => scrollRef.current.scrollToEnd()} />

这很好。但是当我有很多useRef时，似乎有两个问题：

1. .current无处不在
2. 当在组件之间传递引用时，如果我们不能立即确定是否应该直接读取该值或读取.current键，就会遇到一些棘手的情况和混乱。

所以我想知道是否有更好的方法。

我想到了用let而不是const声明变量，然后直接分配给.current：

let myRef = useRef().current

然后直接读取和变异myRef

此方法有哪些弊端，是否有某些情况不起作用？是否有更好的解决方案来避免在整个地方使用.current？

Answer 1

我有这个指导原则，每个功能组件只有一个引用（通过useRef()）。

重构您的代码以遵守SRP（单一职责原则）。

function ScrollComponent() {
   const scrollRef = useRef(null);
   ...
}

function OtherComponent() {
   const otherRef = useRef(null);
   ...
}

Answer 2

我迟到了，甚至不是反应专家。但是，如果您创建一个指向 current 的变量，然后将一个新对象写入该变量，那么您的变量将不再指向 ref.current。唯一可以保留该链接的方法就是修改变量的属性。