react如何确保组件已渲染完
使用 useEffect Hook
在 React 函数组件中，useEffect 是监听组件渲染完成的常用方法。将依赖数组留空时，回调函数会在组件首次渲染完成后执行：
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
console.log('组件已完成渲染');
// 执行渲染后的操作
}, []); // 空依赖数组确保只执行一次
return <div>组件内容</div>;
}监听特定状态或属性变化
通过指定依赖项，可以在特定状态或属性更新后触发回调，此时 DOM 已完成更新：
useEffect(() => {
console.log('数据更新后DOM已渲染');
}, [props.data]); // 当props.data变化时触发类组件中使用 componentDidMount
对于类组件，componentDidMount 生命周期方法会在组件挂载后立即执行：
class MyComponent extends React.Component {
componentDidMount() {
console.log('组件已完成渲染');
// 可安全操作DOM
}
render() {
return <div>组件内容</div>;
}
}结合 useRef 获取 DOM 引用
需要直接操作 DOM 元素时，可通过 useRef 获取节点引用，并在 useEffect 中访问：
function MyComponent() {
const divRef = useRef(null);
useEffect(() => {
console.log('DOM节点已可访问:', divRef.current);
}, []);
return <div ref={divRef}>内容</div>;
}使用 useLayoutEffect 同步执行
若需要在浏览器绘制前同步执行逻辑，可使用 useLayoutEffect。其执行时机早于 useEffect，但会阻塞渲染：
useLayoutEffect(() => {
console.log('DOM更新后，浏览器绘制前执行');
}, []);注意事项
- 避免在渲染逻辑中直接依赖 DOM 计算结果，这可能导致布局抖动。
- 对于需要等待子组件渲染的场景，可考虑使用
forwardRef或状态提升。 - 服务端渲染 (SSR) 环境下，部分生命周期方法不会执行，需通过
typeof window !== 'undefined'做环境判断。
