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 或状态管理工具传递渲染完成事件。