使用React新的Effect Hooks，我可以告诉React在重新渲染时跳过应用效果，如果特定的值没有发生变化-来自React文档的示例：
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes
但是上面的例子应用了效果在初始渲染和count更改之后的重新渲染上。我该如何告诉React跳过初始渲染时的效果呢？
count只在初始渲染时为0。const [count, setCount] = useState(0);
componentDidUpdate工作，并附加检查：useEffect(() => {
if (count)
document.title = `You clicked ${count} times`;
}, [count]);
useEffect的自定义钩子的工作方式（更新以适用于严格模式）：function useDidUpdateEffect(fn, inputs) {
const isMountingRef = useRef(false);
useEffect(() => {
isMountingRef.current = true;
}, []);
useEffect(() => {
if (!isMountingRef.current) {
return fn();
} else {
isMountingRef.current = false;
}
}, inputs);
}
useRef 相对于 setState 的建议在哪里？我在这个页面上没有看到，我想了解为什么。 - rob-gordoneslint-disable或eslint-disable-next注释忽略某个规则。在这种情况下，fn不应该作为输入提供。请参阅说明 https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies 。如果fn中的某些内容引入了依赖项，则更好的做法是直接将它们作为inputs提供。 - Estus FlaskuseEffect或渲染函数中或者组件中的任何其他地方使用该标志。也许有人能提出一个更好的名字。import { useRef, useEffect } from 'react';
export const useIsMount = () => {
const isMountRef = useRef(true);
useEffect(() => {
isMountRef.current = false;
}, []);
return isMountRef.current;
};
您可以这样使用它：
import React, { useEffect } from 'react';
import { useIsMount } from './useIsMount';
const MyComponent = () => {
const isMount = useIsMount();
useEffect(() => {
if (isMount) {
console.log('First Render');
} else {
console.log('Subsequent Render');
}
});
return isMount ? <p>First Render</p> : <p>Subsequent Render</p>;
};
如果您感兴趣，在这里还有一个相关的测试：
import { renderHook } from '@testing-library/react-hooks';
import { useIsMount } from '../useIsMount';
describe('useIsMount', () => {
it('should be true on first render and false after', () => {
const { result, rerender } = renderHook(() => useIsMount());
expect(result.current).toEqual(true);
rerender();
expect(result.current).toEqual(false);
rerender();
expect(result.current).toEqual(false);
});
});
我们的使用情况是，如果初始属性表明它们应该被隐藏，就隐藏动画元素。在后续渲染中，如果属性发生了更改，我们确实希望元素进行动画处理。
isFirstRender可能可行。 - Scotty Waggoner我找到了一个更简单的解决方案，不需要使用另一个钩子，但它有一些缺点。
useEffect(() => {
// skip initial render
return () => {
// do something with dependency
}
}, [dependency])
这只是一个示例，如果您的情况非常简单，还有其他的做法。
这种方法的缺点是你不能清理效果，只有在依赖数组第二次改变时才会执行。
不建议使用这种方法，您应该使用其他答案提供的方法。但我在这里添加它只是为了让人们知道有多种方法可以做到同样的事情。
为了更清楚地说明，您不应该使用这种方法来解决问题（跳过初始渲染），这只是为了教学目的，展示可以用不同的方式做相同的事情。 如果您需要跳过初始渲染，请使用其他答案中提供的方法。
我使用普通状态变量而不是 ref。
// Initializing didMount as false
const [didMount, setDidMount] = useState(false)
// Setting didMount to true upon mounting
useEffect(() => { setDidMount(true) }, [])
// Now that we have a variable that tells us wether or not the component has
// mounted we can change the behavior of the other effect based on that
const [count, setCount] = useState(0)
useEffect(() => {
if (didMount) document.title = `You clicked ${count} times`
}, [count])
function useDidMount() {
const [didMount, setDidMount] = useState(false)
useEffect(() => { setDidMount(true) }, [])
return didMount
}
最后，我们可以像这样在我们的组件中使用它。
const didMount = useDidMount()
const [count, setCount] = useState(0)
useEffect(() => {
if (didMount) document.title = `You clicked ${count} times`
}, [count])
更新 使用useRef hook以避免额外的重新渲染（感谢@TomEsterez的建议）
这次，我们的自定义hook返回一个函数，该函数返回我们ref的当前值。您也可以直接使用ref，但我更喜欢这个。
function useDidMount() {
const mountRef = useRef(false);
useEffect(() => { mountRef.current = true }, []);
return () => mountRef.current;
}
使用方法
const MyComponent = () => {
const didMount = useDidMount();
useEffect(() => {
if (didMount()) // do something
else // do something else
})
return (
<div>something</div>
);
}
顺便提一下，我从来没有使用过这个钩子，可能有更好的方法来处理这个问题，这些方法更符合React编程模型。
useRef 更适合这种情况，因为 useState 会导致组件额外、无用的重新渲染：https://codesandbox.io/embed/youthful-goldberg-pz3cx - Tom EsterezuseDidMount 函数存在错误。你需要用花括号 { ...} 将 mountRef.current = true 封装在 useEffect() 中。如果不这样做，它就像写了 return mountRef.current = true，这会导致类似于“一个 effect 函数除了用于清理的函数之外，不能返回任何东西。你返回了：true”的错误。 - sutherimport useAsync from 'react-use/lib/useAsync';。详情请见：https://github.com/streamich/react-use/issues/483#issuecomment-514964179。 - cYeeuseUpdateEffect 和 useUpdateEffectOnce 之间的区别？两者都只运行一次。 - vsyncuseEffect，它还会使 node_modules 变得臃肿... - vsyncuseEffect，这个 hook 的工作方式类似于 useEffect，但不会在第一次渲染时被触发。import * as React from 'react'
export const useLazyEffect:typeof React.useEffect = (cb, dep) => {
const initializeRef = React.useRef<boolean>(false)
React.useEffect((...args) => {
if (initializeRef.current) {
cb(...args)
} else {
initializeRef.current = true
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, dep)
}
这是基于Estus Flask的答案编写的Typescript实现。它还支持清理回调。
import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
export function useDidUpdateEffect(
effect: EffectCallback,
deps?: DependencyList
) {
// a flag to check if the component did mount (first render's passed)
// it's unrelated to the rendering process so we don't useState here
const didMountRef = useRef(false);
// effect callback runs when the dependency array changes, it also runs
// after the component mounted for the first time.
useEffect(() => {
// if so, mark the component as mounted and skip the first effect call
if (!didMountRef.current) {
didMountRef.current = true;
} else {
// subsequent useEffect callback invocations will execute the effect as normal
return effect();
}
}, deps);
}
下面的演示展示了useEffect和 useDidUpdateEffect钩子之间的区别：
我本来要评论当前被接受的答案，但是空间不够了！
首先，在使用函数组件时，重要的是要摆脱生命周期事件的思维模式，而应该考虑属性/状态变化。我遇到了一个类似的情况，我只希望在特定属性（在我的例子中是parentValue）从其初始状态改变时才触发特定的useEffect函数。因此，我创建了一个基于其初始值的引用：
const parentValueRef = useRef(parentValue);
然后在 useEffect 函数的开头添加以下内容：
if (parentValue === parentValueRef.current) return;
parentValueRef.current = parentValue;
parentValue没有改变，则不运行效果。如果它已更改，则更新引用，为下一次检查做好准备，并继续运行效果。useState将提供该状态，但不要假设存储本地状态可以解决您的问题。useEffect中，但其目的是具有不受影响的干净渲染正在更改的东西的渲染。 useEffect钩子将在呈现完成后运行，正如您指出的那样，它将在每次呈现时运行-除非使用第二个参数以提供一系列道具/状态来标识什么改变项将导致它在随后运行。const useEffectAfterMount = (cb, dependencies) => {
const mounted = useRef(false);
useEffect(() => {
if (mounted.current) {
return cb();
}
mounted.current = true;
}, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
};
const useEffectAfterMount = (cb: EffectCallback, dependencies: DependencyList | undefined) => {
const mounted = useRef(false);
useEffect(() => {
if (mounted.current) {
return cb();
}
mounted.current = true;
}, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
};
例子：
useEffectAfterMount(() => {
document.title = `You clicked ${count} times`;
}, [count])
const mounted = useRef(false) 然后 mounted.current = true。 - Mik378const [isMount, setIsMount] = useState(true);
useEffect(()=>{
if(isMount){
setIsMount(false);
return;
}
//Do anything here for 2nd render onwards
}, [args])
useRef解决方案更可取。 - vsync
React.useMemo吗？ - Pankaj Parag