如何判断react是否渲染完成
检测 React 组件渲染完成的方法
使用 useEffect 钩子（函数组件）
在函数组件中，可以通过 useEffect 钩子监听渲染完成。传入空依赖数组 [] 时，回调函数会在组件首次渲染后执行：
useEffect(() => {
console.log('组件渲染完成');
}, []);类组件的 componentDidMount
对于类组件，生命周期方法 componentDidMount 会在组件挂载（首次渲染）后触发：
componentDidMount() {
console.log('组件渲染完成');
}监听状态或 Props 更新后的渲染
若需检测状态或 Props 变更后的渲染完成，在函数组件中使用 useEffect 并指定依赖项：
useEffect(() => {
console.log('依赖项更新后渲染完成');
}, [props.someProp, state.someState]);使用 useLayoutEffect 同步检测useLayoutEffect 与 useEffect 类似，但会在浏览器绘制前同步执行，适合需要在渲染后立即操作的场景：
useLayoutEffect(() => {
console.log('同步检测渲染完成');
}, []);结合 Refs 判断 DOM 就绪
通过 Ref 获取 DOM 节点，确认其是否已渲染到页面：
const ref = useRef(null);
useEffect(() => {
if (ref.current) {
console.log('DOM 节点已渲染');
}
}, []);
return <div ref={ref}>内容</div>;注意事项
- 异步渲染问题：React 的并发模式可能导致渲染批次化，
useEffect回调执行时机可能与预期略有差异。 - 性能影响：频繁检测渲染完成可能引发性能问题，建议仅在必要时使用。
