为什么useEffect获取不到dom

useEffect 在组件渲染完成后会执行，但是某些 DOM 操作需要等待 DOM 元素渲染完成后才能执行，如果在 useEffect 中操作 DOM 元素，可能会出现获取不到该元素的情况。可以通过 useRef 获取 DOM 元素，或者将 DOM 操作放在 useCallback 中执行，在该函数中传递 dom 元素的引用，这样可以避免出现获取不到 DOM 元素的问题。

相关问题

useEffect初学

### useEffect React Hooks 学习教程

#### 基本用法

`useEffect` 是 React 提供的一个 Hook，用于处理副作用。所谓副作用是指那些不是直接由函数计算返回值的操作，例如数据获取、订阅或手动修改 DOM 等[^1]。

当定义了一个 `useEffect` 函数时，该函数会在每次组件重新渲染完成后被调用。可以向此钩子提供第二个参数——依赖数组来控制何时触发副作用逻辑。如果省略了这个可选的依赖项列表，则每当有新的属性或状态更新时都会运行效果；而指定为空数组则意味着仅在首次挂载和卸载期间执行一次[^3]。

下面展示如何利用 `useEffect` 来设置文档标题：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // 类似于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

这段代码展示了怎样使用 `useEffect` 钩子，在页面加载完成以及每次点击按钮改变计数器数值后自动更改浏览器标签页的名字[^4]。

#### 示例

这里有一个更完整的例子说明了带有不同依赖关系的效果是如何工作的:

import React, { useState, useEffect } from 'react';

function App() {
  const [message, setMessage] = useState('Hello React!');
  
  // 当组件初次装载时打印消息
  useEffect(() => {
    console.log('Component mounted.');
  }, []);

  // 每次 message 发生变化时打印新旧值对比
  useEffect(() => {
    console.log(`Message was updated to "${message}"`);
  }, [message]);

  const changeMessage = () => {
    setMessage('Message changed!');
  };

  return (
    <div>
      <p>{message}</p>
      <button onClick={changeMessage}>Change Message</button>
    </div>
  );
}

export default App;

上述示例中包含了两个独立的作用域内的 `useEffect` 调用。第一个只会在初始渲染阶段被执行一次，因为它接收的是一个空数组作为其第二参数。第二个将在任何影响到 `message` 的变动发生之后立即响应并记录最新的文本内容至控制台日志里。

react中获取自定义组件的dom节点

在React中，获取自定义组件的DOM节点通常发生在生命周期方法`componentDidMount`或`useEffect`钩子函数中。这是因为React本身并不保证在所有时候都能立即提供最新的DOM引用，因为它是虚拟DOM技术，只有在真正渲染到浏览器时才操作真正的DOM。

如果你想在`render`方法外访问DOM，可以按照以下步骤：

1. 定义一个state变量来保存DOM节点，例如：

class CustomComponent extends React.Component {
  domNodeRef = React.createRef();

  // ...
}

这里使用了`React.createRef()`创建了一个ref实例。

2. 在`render`方法中设置这个ref到实际需要的元素上：

render() {
  return (
    <div ref={this.domNodeRef}>
      {/* 组件内容 */}
    </div>
  );
}

3. 在`componentDidMount`或`useEffect`中访问这个ref并获取DOM：

// 使用class组件的方式
componentDidMount() {
  if (this.domNodeRef.current) {
    console.log(this.domNodeRef.current);
  }
}

// 或者使用hook的方式
import { useRef } from 'react';

function CustomComponentWithHook() {
  const domNodeRef = useRef(null);

  useEffect(() => {
    if (domNodeRef.current) {
      console.log(domNodeRef.current);
    }
  }, []);

  // ...
}

记得在使用ref之前检查它是否已经被初始化。