如何判断react初次渲染
判断 React 初次渲染的方法
React 组件在挂载时会经历初次渲染（首次渲染）和后续更新渲染。以下是几种判断组件是否处于初次渲染阶段的常见方法：
使用 useEffect 钩子
useEffect 的依赖数组为空时，回调函数仅在组件初次渲染后执行一次。
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
console.log('初次渲染完成');
}, []); // 空依赖数组表示仅在初次渲染后执行
return <div>My Component</div>;
}使用 useRef 跟踪渲染状态
useRef 可以存储一个标志位，用于判断是否是初次渲染。
import React, { useRef, useEffect } from 'react';
function MyComponent() {
const isInitialRender = useRef(true);
useEffect(() => {
if (isInitialRender.current) {
console.log('初次渲染');
isInitialRender.current = false;
} else {
console.log('更新渲染');
}
});
return <div>My Component</div>;
}类组件的 componentDidMount
在类组件中，componentDidMount 生命周期方法仅在初次渲染后调用。
import React, { Component } from 'react';
class MyComponent extends Component {
componentDidMount() {
console.log('初次渲染完成');
}
render() {
return <div>My Component</div>;
}
}通过 React.memo 和自定义比较
如果使用 React.memo 包装组件，可以结合 useRef 或 useState 来检测是否初次渲染。
import React, { useRef } from 'react';
const MyComponent = React.memo(() => {
const isInitialRender = useRef(true);
if (isInitialRender.current) {
console.log('初次渲染');
isInitialRender.current = false;
}
return <div>My Component</div>;
});适用场景
useEffect方法：适用于函数组件，仅在初次渲染后执行副作用逻辑。useRef方法：适用于需要明确区分初次渲染和更新的场景。- 类组件方法：适用于传统类组件，通过生命周期方法判断。
React.memo方法：适用于优化渲染性能，同时检测初次渲染。
选择合适的方法取决于具体需求，如是否需要在初次渲染时执行特定逻辑或避免重复渲染优化。
