react如何判断渲染完成
判断 React 组件渲染完成的常用方法
使用 useEffect Hook
在函数组件中，useEffect 是监听渲染完成的标准方式。通过传递空依赖数组 []，可以确保回调仅在组件挂载后执行一次：
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
console.log('组件渲染完成（初次挂载）');
}, []); // 空数组表示仅执行一次
}若需监听每次渲染（包括更新），省略依赖数组：
useEffect(() => {
console.log('组件渲染或更新完成');
});类组件中的 componentDidMount
对于类组件，componentDidMount 生命周期方法会在首次渲染后触发：
class MyComponent extends React.Component {
componentDidMount() {
console.log('组件渲染完成（初次挂载）');
}
}监听 DOM 更新后的操作
若需在渲染后操作 DOM 或测量布局，结合 useLayoutEffect（同步执行，在浏览器绘制前）或 useEffect（异步执行，在绘制后）：
useLayoutEffect(() => {
// 适合需要同步读取 DOM 布局的场景
const element = document.getElementById('target');
console.log(element.offsetWidth);
}, [dependencies]);使用 ref 回调确认渲染
通过 ref 回调可以获取 DOM 节点的引用，间接判断渲染完成：
function MyComponent() {
const refCallback = (node) => {
if (node) {
console.log('DOM 节点已挂载', node);
}
};
return <div ref={refCallback}>内容</div>;
}注意事项
- 避免在渲染逻辑中直接依赖渲染完成的副作用，可能导致循环更新。
- 对于异步数据加载后的渲染，需结合状态管理（如
useState）和useEffect共同处理。
