反应 createRef() 与回调引用。 使用一个比另一个有什么优势吗？

Question

我最近开始研究 React 并了解如何使用 refs 来获取 DOM 节点。 在 React 文档中，他们提到了创建 Refs 的两种方法。 你能告诉我在什么情况下回调引用比 createRef() 更好吗？ 我发现 createRef 更简单。 尽管文档说“回调引用为您提供了更精细的粒度控制”，但我无法理解以何种方式。 谢谢

Answer 1

除了 jmargolisvt 所说的，我发现回调非常有趣的一件事是我可以在一个数组中设置多个引用，以便我可以更好地控制它。 像这样：

class A extends React.Component {
    constructor(props) {
        super(props);
        this.inputs = [];
    }

    render() {
        return [0, 1, 2, 3].map((key, index) => (
            <Input 
                key={key} 
                ref={input => this.inputs[index] = input}
            />)
        );
    }
}

Answer 2

createRef会返回 DOM 节点或组件的已安装实例，具体取决于您调用它的位置。 无论哪种方式，正如您所指出的，您手头的东西确实很简单。 但是如果你想用那个引用做一些事情呢？ 如果您想在组件安装时执行此操作怎么办？

Ref 回调对此非常有用，因为它们在componentDidMount和componentDidUpdate之前被调用。 这就是你如何对 ref 进行更细粒度的控制。 你现在不仅仅是命令式地获取 DOM 元素，而是在 React 生命周期中动态更新 DOM，而是通过 ref API 对你的 DOM 进行细粒度的访问。

Answer 3

在用例方面，回调引用可以做任何createRef可以做的事情，但反之则不行。 createRef为我们提供了一个简化的语法，仅此而已。

你不能用createRef做的事情：

• 对被设置或清除的ref做出反应
• 同时在同一个 React 元素上使用外部和内部提供的ref 。 （例如，您需要测量 DOM 元素的clientHeight同时允许将外部提供的ref （通过forwardRef ）附加到它。）

Answer 4

实际上，除了callback ref 在初始渲染之前返回 null 之外，您不会看到任何区别。

Answer 5

这个答案有点偏向于 React-Native，但如果 R​​eact 组件类似于以下示例，它仍然适用。

<Animated.View>是可以动画化的<View>的包装组件。

但是，如果您想直接访问<View>以执行诸如调用measure()方法之类的操作，那么您可以这样做：

interface State {
  ref: View;
}

public render() {
  <Animated.View ref={(component) => {
      if (component !== null) {
        this.state.ref = component.getNode();
      }
    }}
  >
    ...
  </Animated.View>
}

否则，您需要执行： this.state.ref.getNode() 。

TL;DR：您可以控制如何处理元素或如何存储它。

Answer 6

如果 ref 回调被定义为内联函数，它将在更新期间被调用两次，首先是 null，然后是 DOM 元素。 这是因为每次渲染都会创建一个函数的新实例，所以 React 需要清除旧的 ref 并设置新的。 您可以通过将 ref 回调定义为类上的绑定方法来避免这种情况，但请注意，在大多数情况下这无关紧要。