What is the difference with using ref and document

问题:

What is the difference/advantages/disadvantages between using:

  React.findDOMNode(this.refs.elementReferenceName)

and

  document.getElementById(elementId)

when using ReactJS?

回答1:

The main advantage and reason to use React.findDOMNode is that it stays within the React paradigm, since you pass it a component--And in most cases you are dealing with React components (either handling a lifecycle function or calling a function that is implemented in the component descriptor).

Relying on the id in a DOM element breaks encapsulation in React because it doesn't use id.

That being said, it is up to you and your specific app's needs to determine which is best to use. As with other React functions, you do have to be careful because the calling React.findDOMNode at the wrong time (in render or if the component is not mounted) will raise an exception. OTOH, document.getElementById won't throw an exception if the component is unmounted; but it could return the wrong element if multiple elements exist with that id.

If you haven't yet found it, here is documentation for findDOMNode.

Also, here is the implementation of findDOMNode