使用 useEffect,如何跳过在初始渲染时应用效果? [英] With useEffect, how can I skip applying an effect upon the initial render?
问题描述
使用 React 的新效果挂钩,如果某些值在重新渲染之间没有更改,我可以告诉 React 跳过应用效果 - React 文档中的示例:
With React's new Effect Hooks, I can tell React to skip applying an effect if certain values haven't changed between re-renders - Example from React's docs:
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes
但上面的示例将效果应用于初始渲染,以及 count
已更改的后续重新渲染.如何告诉 React 跳过初始渲染的效果?
But the example above applies the effect upon initial render, and upon subsequent re-renders where count
has changed. How can I tell React to skip the effect on the initial render?
推荐答案
如指南所述,
Effect Hook,useEffect,增加了从函数组件执行副作用的能力.它的用途与 React 类中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 相同,但统一到一个 API 中.
The Effect Hook, useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.
在本指南的示例中,预计 count
仅在初始渲染时为 0:
In this example from the guide it's expected that count
is 0 only on initial render:
const [count, setCount] = useState(0);
所以它将作为 componentDidUpdate
使用额外的检查:
So it will work as componentDidUpdate
with additional check:
useEffect(() => {
if (count)
document.title = `You clicked ${count} times`;
}, [count]);
这基本上是可以用来代替 useEffect
的自定义钩子的工作方式:
This is basically how custom hook that can be used instead of useEffect
may work:
function useDidUpdateEffect(fn, inputs) {
const didMountRef = useRef(false);
useEffect(() => {
if (didMountRef.current) {
return fn();
}
didMountRef.current = true;
}, inputs);
}
感谢 @Tholle 建议 useRef
而不是 setState
.
Credits go to @Tholle for suggesting useRef
instead of setState
.
这篇关于使用 useEffect,如何跳过在初始渲染时应用效果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!