ReactuseLayoutEffect与DOM操作实战解析

在React开发中，与外部JavaScript库交互时，安全地传递DOM元素至关重要。本文针对React组件渲染生命周期中，DOM元素未就绪的常见问题，深入剖析了直接使用`document.getElementById`和`useRef`的局限性。重点介绍了利用`useLayoutEffect` Hook的有效策略，确保在DOM元素可用时获取并传递，从而实现React组件与传统JavaScript类库的无缝集成，避免因DOM未就绪导致的错误。同时对比了`useLayoutEffect`与`useEffect`的应用场景，为开发者提供了最佳实践，助力构建稳定且高性能的React应用，是React开发者不可错过的实用指南。

理解问题：React组件与DOM元素的生命周期

在React应用中，我们经常需要与非React的JavaScript库或类进行交互，这些库可能需要直接操作或引用DOM元素。然而，React组件的渲染过程是异步的，并且DOM元素的实际创建和插入发生在组件渲染逻辑执行之后。这导致了一个常见问题：如果在组件渲染函数中尝试获取DOM元素，往往会发现元素尚未存在或无法正确引用。

考虑以下场景：一个React组件Foo需要实例化一个外部的JavaScript类Bar，并将Foo组件内部渲染的一个特定DOM元素传递给Bar的构造函数。

初始尝试与遇到的挑战

1. 直接使用 document.getElementById

// Foo.js
import Bar from './Bar';

const Foo = () => {
    // 在组件函数体执行时，div#foo 尚未被渲染到DOM中
    const elem = document.getElementById('foo'); 
    const bar = new Bar(elem, {}); // 此时 elem 为 null

    return (
        <div id="foo">
            {/* 其他内容 */}
        </div>
    );
};

export default Foo;

// Bar.js
export default class Bar {
    constructor(domElement, config = {}) {
      console.log(domElement);  // 输出: null
    }
}

问题分析： Foo组件的函数体在React渲染流程的早期执行。此时，return语句中的JSX（代表DOM结构）尚未被React转换为真实的DOM元素并插入到文档中。因此，document.getElementById('foo')在这一阶段自然会返回null。

2. 使用 useRef

React提供了useRef Hook来引用DOM元素。看似可以解决问题，但其工作方式需要注意：

// Foo.js
import { useRef } from 'react';
import Bar from './Bar';

const Foo = () => {
  const elemRef = useRef(null);
  // 此时 elemRef.current 仍然是 null，因为 ref 赋值发生在渲染之后
  const bar = new Bar(elemRef, {}); 

  return (
    <div id="foo" ref={elemRef}>
      {/* 其他内容 */}
    </div>
  );
};

export default Foo;

// Bar.js
export default class Bar {
    constructor(domElement, config = {}) {
      console.log(domElement);  // 输出: {current: null}
      // domElement 是一个 ref 对象，不是 DOM 元素本身
      // domElement.getElementsByClassName 会报错：domElement.getElementsByClassName is not a function
    }
}

问题分析：

• 时序问题： elemRef.current 只有在组件首次渲染（或更新）并完成DOM操作后才会被React赋值为实际的DOM元素。在Foo组件函数体执行时，elemRef.current仍然是其初始值null。
• 类型问题： 即使elemRef.current最终被赋值为DOM元素，我们传递给Bar构造函数的是elemRef这个ref对象本身，而不是elemRef.current所引用的DOM元素。因此，Bar类接收到的不是一个可操作的DOM元素，而是一个包含current属性的对象。

解决方案：利用 useLayoutEffect 或 useEffect

为了确保在DOM元素可用时才进行操作并将其传递给外部类，我们需要利用React的生命周期Hook，特别是那些在DOM更新后执行的Hook。useLayoutEffect和useEffect是理想的选择。

推荐方案：使用 useLayoutEffect

useLayoutEffect Hook在所有DOM突变（DOM元素创建、更新）完成后，但在浏览器执行任何视觉绘制之前同步触发。这意味着，当useLayoutEffect回调函数执行时，DOM元素已经完全就绪并且可以被安全地访问。

// Foo.js
import { useRef, useLayoutEffect } from 'react';
import Bar from './Bar';

const Foo = () => {
  const elemRef = useRef(null); // 用于获取DOM元素的引用
  let barInstance = null; // 用于存储 Bar 的实例

  useLayoutEffect(() => {
    // 确保 elemRef.current 存在，即DOM元素已挂载
    if (elemRef.current) {
      // 在这里，elemRef.current 已经是真实的 DOM 元素
      barInstance = new Bar(elemRef.current, {}); 
      console.log("Bar 实例已创建，并接收到 DOM 元素:", elemRef.current);
    }

    // 可选：返回一个清理函数，在组件卸载时执行
    return () => {
      // 如果 Bar 类有销毁方法，可以在这里调用
      // barInstance?.destroy(); 
    };
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <div id="foo" ref={elemRef}>
      <h1>Hello from Foo Component</h1>
      <div className="bar-content">This content is inside the #foo div.</div>
    </div>
  );
};

export default Foo;

// Bar.js
export default class Bar {
    constructor(domElement, config = {}) {
      if (!domElement || !(domElement instanceof HTMLElement)) {
          console.error("Bar: Invalid DOM element provided.", domElement);
          return;
      }
      console.log("Bar constructor received DOM element:", domElement); 
      // 现在 domElement 是一个真实的 HTML 元素
      const innerBars = domElement.getElementsByClassName('bar-content');
      console.log("Found inner elements with class 'bar-content':", innerBars);
      // 在这里可以对 domElement 进行操作
    }
    // 如果需要，可以添加一个销毁方法
    // destroy() {
    //   console.log("Bar instance destroyed.");
    // }
}

工作原理：

1. Foo 组件渲染时，div#foo 被创建并插入到DOM中。
2. React将elemRef.current赋值为这个真实的div#foo DOM元素。
3. useLayoutEffect的回调函数在DOM更新完成后、浏览器绘制前同步执行。
4. 在useLayoutEffect内部，elemRef.current已经包含了正确的DOM元素引用。
5. 此时，我们可以安全地将elemRef.current传递给Bar的构造函数，Bar类就能接收到一个有效的DOM元素进行操作。
6. 空依赖数组[]确保useLayoutEffect只在组件挂载时执行一次，避免不必要的重复实例化。

useEffect 作为替代方案

如果你的操作不需要在浏览器绘制前同步发生（例如，它不涉及DOM测量或可能导致视觉闪烁的操作），那么useEffect也是一个可行的选择。useEffect在浏览器完成绘制后异步执行，通常对性能影响较小。

import { useRef, useEffect } from 'react';
// ... 其他代码与 useLayoutEffect 示例类似 ...

useEffect(() => {
    if (elemRef.current) {
      // 在这里，elemRef.current 已经是真实的 DOM 元素
      barInstance = new Bar(elemRef.current, {}); 
      console.log("Bar 实例已创建 (useEffect)，并接收到 DOM 元素:", elemRef.current);
    }
    return () => { /* 清理函数 */ };
}, []);

useLayoutEffect vs useEffect：

• useLayoutEffect： 同步执行，在DOM更新后、浏览器绘制前。适用于需要同步读取DOM布局、进行DOM测量或修改DOM以避免视觉闪烁的场景。
• useEffect： 异步执行，在浏览器绘制后。适用于大多数副作用操作，如数据获取、订阅事件、手动DOM操作（不涉及布局读取）。

对于将DOM元素传递给外部库的场景，如果外部库需要在DOM就绪后立即进行布局计算或初始化，useLayoutEffect是更安全的选择。如果仅仅是引用DOM元素进行后续操作，useEffect通常也足够。

总结与最佳实践

• 理解React生命周期： 在React组件的渲染函数内部，DOM元素可能尚未就绪。
• 利用Hook管理副作用： useLayoutEffect和useEffect是处理DOM交互和外部库集成的关键。
• 正确使用 useRef： useRef返回的是一个可变对象，其current属性在DOM挂载后才持有实际的DOM元素。在传递给外部类时，应传递elemRef.current，而不是elemRef本身。
• 清理副作用： 如果外部类实例创建了资源（如事件监听器、计时器），确保在组件卸载时通过useLayoutEffect或useEffect的返回函数进行清理，防止内存泄漏。
• 类型检查： 在外部类中，对接收到的domElement进行类型检查（例如domElement instanceof HTMLElement）是一个良好的防御性编程习惯。

通过遵循这些原则，您可以有效地将React组件与需要直接操作DOM的传统JavaScript类库结合起来，构建稳定且高性能的应用程序。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~