Question

我最近开始研究React，并且了解如何使用ref来获取DOM节点。在React文档中，他们提到了创建引用的两种方法。您能在什么情况下让我知道回调ref比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可以做的任何事情，反之亦然。 createRef为我们提供了简化的语法，仅此而已。

createRef无法做的事情：

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

Answer 3

createRef返回DOM节点或组件的已安装实例，具体取决于调用位置。无论哪种方式，您所拥有的确实确实很简单。但是，如果您想通过该引用做某事呢？如果您想在组件安装时这样做怎么办？

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

Answer 4

这个答案在React-Native上有些偏颇，但是如果React组件类似于以下示例，它仍然适用。

<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 5

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

Answer 6

实际上，除了callback ref在初始渲染之前返回null以外，您将看不到其他区别。

反应createRef（）与回调引用。使用一个相对于另一个有什么优势吗？

6 个答案: