react如何判断渲染完成
判断 React 渲染完成的常用方法
使用 useEffect Hook
在函数组件中，useEffect 是监听渲染完成的常用方式。通过传递空依赖数组 []，可以确保回调仅在组件挂载后执行一次：
useEffect(() => {
console.log('组件渲染完成（仅挂载时）');
}, []);若需监听每次渲染（包括更新），省略依赖数组即可：
useEffect(() => {
console.log('组件渲染完成（每次更新后）');
});类组件中使用 componentDidMount
对于类组件，componentDidMount 生命周期方法会在首次渲染后触发：
componentDidMount() {
console.log('组件渲染完成（挂载后）');
}结合 useLayoutEffect 同步执行useLayoutEffect 与 useEffect 类似，但会在浏览器绘制前同步执行，适合需要立即操作 DOM 的场景：
useLayoutEffect(() => {
console.log('DOM 更新完成，但浏览器未绘制');
}, [dependencies]);通过 ref 监听 DOM 节点
结合 useRef 和 useEffect 可以判断特定 DOM 节点是否渲染完成：
const ref = useRef(null);
useEffect(() => {
if (ref.current) {
console.log('DOM 节点已挂载', ref.current);
}
}, []);
return <div ref={ref}>内容</div>;使用 Promise 或回调通知
在异步场景中，可通过回调或 Promise 通知父组件渲染完成：
const Child = ({ onReady }) => {
useEffect(() => {
onReady();
}, []);
return <div>子组件</div>;
};注意事项
useEffect的执行时机在浏览器绘制之后，若需避免页面闪烁，优先选择useLayoutEffect。- 类组件的
componentDidUpdate可用于监听更新后的渲染完成状态。 - 对于复杂嵌套组件，考虑使用 Context 或状态管理工具传递渲染完成事件。
