React传递DOM元素的正确方法

本文深入探讨了React函数组件中向非React类实例传递DOM元素时，因渲染时机导致的获取失败问题，这在与第三方库或原生DOM操作交互时尤为常见。文章剖析了直接在渲染函数体中使用`document.getElementById`以及错误使用`useRef`的弊端，指出这些方法无法保证在DOM元素渲染完毕后获取。针对此问题，提出了基于`useLayoutEffect`和`useRef`的专业解决方案，确保在DOM元素可用时，正确地将其引用传递给外部类，从而实现React组件与外部库的无缝集成。文章强调了理解React生命周期和DOM可用性的重要性，并提供了useEffect与useLayoutEffect的选择建议，以及添加清理函数和正确设置依赖数组的最佳实践，助力开发者构建稳定高效的React应用。

理解问题：DOM元素获取的时机挑战

在React应用中，我们经常需要与第三方库或原生DOM操作进行交互。当这些外部代码需要一个实际的DOM元素作为其初始化参数时，如何在React组件的生命周期中正确地获取并传递这个DOM元素，就成了一个关键问题。常见的错误尝试通常源于对React渲染流程与浏览器DOM更新时机的不理解。

考虑以下场景：一个名为Foo的React组件需要实例化一个名为Bar的外部JavaScript类。Bar类的构造函数期望接收一个DOM元素作为其第一个参数。

初始错误尝试一：直接在组件渲染逻辑中获取DOM

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

const Foo = () => {
    // 尝试在渲染函数体中直接获取DOM元素
    const elem = document.getElementById('foo'); // 问题所在：此时DOM元素可能还未被渲染到页面
    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
      // 进一步操作会报错，例如 domElement.getElementsByClassName('bar')
    }
}

问题分析： 当Foo组件的渲染函数执行时，React仅仅是计算并返回了虚拟DOM。浏览器尚未将这个虚拟DOM渲染成真实的DOM元素。因此，document.getElementById('foo')在此时会返回null，因为ID为foo的元素尚未存在于实际的文档对象模型中。

初始错误尝试二：使用useRef但未正确处理其值

为了解决DOM获取时机问题，开发者可能会想到使用useRef。useRef可以创建一个可变的引用对象，其.current属性在DOM元素挂载后会指向该DOM元素。

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

const Foo = () => {
  const elemRef = useRef(null);
  // 错误：直接将ref对象传递给Bar的构造函数
  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元素
      console.log(domElement.getElementsByClassName('bar'));  // 报错: Uncaught TypeError: domElement.getElementsByClassName is not a function
    }
}

问题分析：useRef本身返回的是一个普通JavaScript对象，它的.current属性在组件首次渲染时通常是null，只有在React将DOM元素挂载到页面后，elemRef.current才会指向该DOM元素。直接将elemRef（即{current: null}）传递给Bar的构造函数是错误的，因为Bar期望的是一个DOM元素，而不是一个ref对象。即使elemRef.current最终指向了DOM元素，Bar的构造函数在执行时，elemRef.current也可能仍为null。

解决方案：利用useLayoutEffect或useEffect确保DOM可用性

正确的做法是利用React的副作用钩子（useEffect或useLayoutEffect），它们在组件渲染到DOM之后执行，此时DOM元素已经可用。

方案一：使用useLayoutEffect直接获取DOM元素

useLayoutEffect钩子会在DOM更新后同步执行，但在浏览器绘制屏幕之前。这使得它非常适合需要测量DOM布局或进行DOM操作的场景，因为它可以防止视觉上的闪烁。

// Foo.js (推荐方案)
import { useLayoutEffect } from 'react'; // 引入 useLayoutEffect
import Bar from './Bar';

const Foo = () => {
  // 不再需要在渲染函数体中直接实例化Bar
  // let barInstance = null; // 如果需要在组件的其他地方引用bar实例，可以定义在外部

  useLayoutEffect(() => {
    // 确保DOM元素已挂载，此时 document.getElementById('foo') 将返回实际的DOM元素
    const elem = document.getElementById('foo');
    if (elem) { // 添加检查以确保元素存在
      const bar = new Bar(elem, {});
      // console.log("Bar instance created with:", elem);
      // 如果Bar实例需要被清理，可以在这里返回一个清理函数
      // return () => {
      //   if (bar && typeof bar.destroy === 'function') {
      //     bar.destroy(); // 假设Bar类有一个destroy方法用于清理
      //   }
      // };
    }
  }, []); // 空依赖数组表示此Effect只在组件挂载后运行一次

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

export default Foo;

// Bar.js (保持不变)
export default class Bar {
    constructor(domElement, config = {}) {
      console.log(domElement);  // 输出: <div id="foo">...</div> (实际的DOM元素)
      console.log(domElement.getElementsByClassName('bar')); // 可以正常调用DOM方法
    }
}

解释：

1. useLayoutEffect确保了其回调函数在React完成所有DOM更新后、浏览器绘制之前执行。
2. 此时，document.getElementById('foo')能够成功获取到实际的DOM元素。
3. 我们将Bar的实例化逻辑放在useLayoutEffect内部，从而解决了DOM元素获取时机的问题。
4. 空依赖数组[]确保这个副作用只在组件首次挂载时执行一次。

方案二：结合useRef和useLayoutEffect（更React惯用）

虽然document.getElementById在useLayoutEffect中是可行的，但更符合React惯例的做法是使用useRef来获取对DOM元素的引用。

// Foo.js (更推荐的React惯用方案)
import { useRef, useLayoutEffect } from 'react';
import Bar from './Bar';

const Foo = () => {
  const elemRef = useRef(null); // 创建一个ref对象来引用DOM元素

  useLayoutEffect(() => {
    // 在useLayoutEffect中访问ref的.current属性
    if (elemRef.current) { // 确保ref已指向DOM元素
      const bar = new Bar(elemRef.current, {});
      // console.log("Bar instance created with:", elemRef.current);
      // 清理函数（如果需要）
      // return () => {
      //   if (bar && typeof bar.destroy === 'function') {
      //     bar.destroy();
      //   }
      // };
    }
  }, []); // 空依赖数组，只在组件挂载时执行一次

  return (
    <div id="foo" ref={elemRef}> {/* 将ref绑定到DOM元素 */}
      {/* 组件内容 */}
    </div>
  );
};

export default Foo;

// Bar.js (保持不变)
export default class Bar {
    constructor(domElement, config = {}) {
      console.log(domElement);  // 输出: <div id="foo">...</div> (实际的DOM元素)
      console.log(domElement.getElementsByClassName('bar')); // 可以正常调用DOM方法
    }
}

解释：

1. useRef(null)创建一个可变的引用对象elemRef。
2. ref={elemRef}将这个引用对象绑定到div元素上。在React将div渲染到DOM后，elemRef.current会自动更新为指向这个div的DOM节点。
3. useLayoutEffect的回调函数在DOM更新后执行，此时elemRef.current已经包含了实际的DOM元素引用。
4. 我们通过elemRef.current获取到DOM元素，并将其传递给Bar的构造函数。

useEffect与useLayoutEffect的选择

• useLayoutEffect: 在所有DOM更新后同步执行，但在浏览器绘制屏幕之前。适用于需要读取DOM布局信息（如元素尺寸、位置）或进行DOM操作以避免视觉闪烁的场景。如果你的外部库需要在DOM完全稳定且可见之前进行初始化或测量，useLayoutEffect是更安全的选择。
• useEffect: 在DOM更新后异步执行，且在浏览器绘制屏幕之后。通常用于不涉及DOM测量或不要求立即同步更新的副作用（如数据获取、订阅事件等）。对于大多数不直接影响视觉布局的场景，useEffect是首选，因为它不会阻塞浏览器绘制。

在本教程的场景中，由于Bar类可能需要对DOM进行操作或测量，useLayoutEffect通常是更稳健的选择，因为它保证了在执行副作用时DOM是最新的且尚未被浏览器绘制。

总结与最佳实践

• 理解React生命周期和DOM可用性：避免在组件渲染函数体中直接进行document.getElementById或访问useRef().current，因为此时DOM可能尚未准备好。
• 利用副作用钩子：将需要DOM元素的逻辑封装在useLayoutEffect或useEffect中，以确保在DOM元素可用时执行。
• useRef是React惯用方式：对于组件内部管理的DOM元素，使用useRef并将其绑定到JSX元素上是获取DOM引用的推荐方式。
• 添加清理函数：如果外部类Bar创建了事件监听器、订阅或任何需要清理的资源，务必在useLayoutEffect或useEffect中返回一个清理函数，以防止内存泄漏和不必要的行为。
• 依赖数组：根据需求正确设置副作用钩子的依赖数组。空数组[]表示只在组件挂载和卸载时执行一次。

通过遵循这些原则，您可以有效地将React组件与需要DOM元素的外部JavaScript库或原生DOM操作进行集成，确保应用的稳定性和性能。

本篇关于《React传递DOM元素的正确方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！