如何判断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 回调执行时机可能与预期略有差异。
• 性能影响：频繁检测渲染完成可能引发性能问题，建议仅在必要时使用。