React中直接操作DOM与使用Refs的区别及优劣势对比

Great question! Let's break down the pros and cons of using vanilla JavaScript DOM selectors versus React Refs when working with elements in React apps—both have their use cases, but understanding their tradeoffs will help you pick the right tool for the job.

These are the standard DOM methods you’d use in plain JavaScript to grab elements from the real DOM.

Advantages #

• No extra setup: You don’t need to learn any React-specific APIs to use them—if you know vanilla JS, you’re good to go.
• Works with non-React DOM: Perfect for interacting with elements that aren’t rendered by React (like third-party library widgets, static HTML on the page, or dynamically injected content).
• Flexible selection: You can target elements using any CSS selector, which is handy if you need to grab multiple elements at once (e.g., document.querySelectorAll('.list-item')).

Disadvantages #

• Sync issues with React’s virtual DOM: React updates the real DOM asynchronously, so if you try to select an element before React has finished rendering it, you’ll get null—this leads to frustrating bugs that are hard to debug.
• Breaks React’s data flow: React is built around a declarative, state-driven model. Directly querying and manipulating the DOM skips this flow, making your component’s state and the actual DOM out of sync. This makes code harder to maintain and reason about.
• Performance overhead: Querying the real DOM is slower than using a Ref, because the browser has to traverse the entire DOM tree to find your element every time you call the selector.
• Fragile to DOM changes: If you rename an ID, change a class, or restructure your JSX, your selector will break. Unlike Refs, there’s no type safety or warning from React when this happens.

Example of vanilla JS selector use:

function HighlightText() {
  useEffect(() => {
    // Risky: If the component hasn't rendered yet, this returns null
    const textElement = document.getElementById('highlight-me');
    if (textElement) {
      textElement.style.backgroundColor = 'yellow';
    }
  }, []);

  return <p id="highlight-me">This text might get highlighted...</p>;
}

Refs are React’s built-in way to get direct references to React-rendered elements or component instances. You’ll use useRef (for functional components) or createRef (for class components) to create them.

Advantages #

• Aligned with React’s lifecycle: Refs are populated after React has finished rendering the element, so you don’t have to worry about timing issues (as long as you access them in the right lifecycle hooks, like useEffect with an empty dependency array or componentDidMount).
• Type-safe and reliable: With TypeScript, you can define the type of your Ref (e.g., useRef<HTMLDivElement>(null)), which catches errors early. Even without TypeScript, React will warn you if you try to use a Ref on an invalid element.
• Direct and performant: Refs store a direct reference to the DOM element or component instance, so accessing ref.current is instant—no DOM traversal required.
• Works with React components: For class components, you can use a Ref to access the component’s methods and state (though this should be used sparingly, as it breaks encapsulation).

Disadvantages #

• Requires extra setup: You have to declare the Ref, attach it to the JSX element, and remember to check if ref.current is not null before using it—this adds a small amount of boilerplate.
• Only works with React-rendered elements: You can’t use a Ref to grab elements that aren’t part of React’s virtual DOM (like third-party library elements mentioned earlier).
• Easy to overuse: It’s tempting to reach for Refs when you could use React’s state/props to control the UI. Overusing Refs leads to imperative code that’s harder to maintain—always prefer state-driven UI when possible.

Example of React Refs use:

function HighlightText() {
  const textRef = useRef<HTMLParagraphElement>(null);

  useEffect(() => {
    // Safe: textRef.current is only available after the component mounts
    if (textRef.current) {
      textRef.current.style.backgroundColor = 'yellow';
    }
  }, []);

  return <p ref={textRef}>This text will definitely get highlighted!</p>;
}

• Use vanilla JS selectors only when you need to interact with non-React DOM elements.
• Use React Refs when you need direct access to React-rendered elements (e.g., focusing an input, measuring element dimensions, or integrating with a DOM-based library that requires an element reference).
• Whenever possible, use React’s state and props to control the UI instead of manipulating the DOM directly—this keeps your code declarative and easier to maintain.

内容的提问来源于stack exchange，提问作者Paul Gege