如何判断react初次渲染
判断 React 初次渲染的方法
使用 useEffect 钩子
通过 useEffect 钩子的依赖数组为空（[]），可以确保回调仅在组件挂载时执行一次。这是判断初次渲染的常用方式：
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
console.log('初次渲染完成');
}, []); // 空依赖数组
}利用 useRef 标记初次渲染useRef 可以在组件的生命周期中持久化数据，通过标记初始值来判断是否为初次渲染：
import { useRef, useEffect } from 'react';
function MyComponent() {
const isFirstRender = useRef(true);
useEffect(() => {
if (isFirstRender.current) {
console.log('初次渲染');
isFirstRender.current = false;
}
});
}类组件中的 componentDidMount
在类组件中，componentDidMount 生命周期方法会在初次渲染后触发：
class MyComponent extends React.Component {
componentDidMount() {
console.log('初次渲染完成');
}
}通过状态或属性变化判断
若需要区分初次渲染与后续更新，可以结合状态或属性变化进行判断：
import { useState, useEffect } from 'react';
function MyComponent({ propValue }) {
const [prevProp, setPrevProp] = useState(null);
useEffect(() => {
if (prevProp === null) {
console.log('初次渲染');
} else {
console.log('属性更新');
}
setPrevProp(propValue);
}, [propValue]);
}注意事项
useEffect的依赖数组：空依赖数组确保仅在挂载时执行，但需注意避免遗漏必要依赖。- 服务端渲染（SSR）：在 SSR 场景下，部分方法可能因执行环境差异需要额外处理。
- 性能优化：频繁的渲染检查可能影响性能，建议仅在必要时使用。
