TA貢獻1785條經驗 獲得超4個贊
使用 ref，您可以跟蹤第一個渲染，在第一個渲染后設置為 false。
const firstRenderRef = useRef(true);
const [name, setName] = useState('');
useEffect(() => {
if (firstRenderRef.current) {
firstRenderRef.current = false;
} else {
alert('Hi ' + name);
}
}, [name]);
不過，我會把它分解成一個自定義的鉤子。
const useSkipFirstEffect = (callback, dependencies) => {
const firstRenderRef = useRef(true);
useEffect(() => {
if (firstRenderRef.current) {
firstRenderRef.current = false;
} else {
callback();
}
}, [callback, ...dependencies]);
};
用法：
useSkipFirstEffect(() => {
alert('SkipFirstEffect: Hi ' + name);
}, [name]);
TA貢獻1827條經驗 獲得超9個贊
有一些方法可以跳過初始渲染的效果（如ref和使用變量）。我通常使用并發現最簡單的方法是使用useEffect。在我看來，這是一種有點黑客的方式，但它有效 -return
const [name, setName] = useState('');
useEffect(() => {
//don't do anything on initial render
return () => {
alert('Hi ' + name);
}
}, [name]);
現在，僅當依賴項發生更改時，才會運行此功能。我不確定它是否被推薦，但它總是為我工作，沒有任何問題。離開這里以防萬一。name
注意：：這也將在組件卸載更改時運行。為了防止這種情況，您可以只使用檢查。
TA貢獻1883條經驗 獲得超3個贊
這導致自定義鉤子多次重新運行，因為您正在依賴項數組中重新創建一個新數組，我會像這樣更改它：[callback, ...dependencies]
import { useEffect, useRef } from 'react'
function useEffectSkipFirst(callback, dependencies) {
const firstRenderRef = useRef(true)
useEffect(() => {
if (firstRenderRef.current) {
firstRenderRef.current = false
return
}
callback()
}, dependencies)
}
export default useEffectSkipFirst
舉報