如何判断react初次渲染
判断 React 初次渲染的方法
在 React 中，可以通过多种方式判断组件是否是初次渲染。以下是几种常见的方法：
使用 useEffect 钩子
useEffect 钩子的依赖数组为空时，仅在组件挂载时执行一次。可以利用这一特性判断初次渲染。
import { useEffect, useState } from 'react';
function MyComponent() {
const [isFirstRender, setIsFirstRender] = useState(true);
useEffect(() => {
if (isFirstRender) {
console.log('初次渲染');
setIsFirstRender(false);
} else {
console.log('非初次渲染');
}
}, []);
return <div>MyComponent</div>;
}使用 useRef 钩子
useRef 的值在组件生命周期内保持不变，可以用于标记初次渲染。
import { useEffect, useRef } from 'react';
function MyComponent() {
const isFirstRender = useRef(true);
useEffect(() => {
if (isFirstRender.current) {
console.log('初次渲染');
isFirstRender.current = false;
} else {
console.log('非初次渲染');
}
}, []);
return <div>MyComponent</div>;
}使用类组件的生命周期
在类组件中，可以通过 componentDidMount 生命周期方法判断初次渲染。
import React from 'react';
class MyComponent extends React.Component {
componentDidMount() {
console.log('初次渲染');
}
render() {
return <div>MyComponent</div>;
}
}使用 React.memo 和 useState
结合 React.memo 和 useState 可以判断组件的初次渲染。
import { useState } from 'react';
const MyComponent = React.memo(() => {
const [isFirstRender, setIsFirstRender] = useState(true);
if (isFirstRender) {
console.log('初次渲染');
setIsFirstRender(false);
} else {
console.log('非初次渲染');
}
return <div>MyComponent</div>;
});注意事项
useEffect的依赖数组为空时，仅在组件挂载时执行一次，适合用于判断初次渲染。useRef的值在组件生命周期内保持不变，适合用于标记初次渲染。- 类组件的
componentDidMount仅在初次渲染后执行一次。 React.memo可以避免不必要的渲染，但需结合useState判断初次渲染。
