使用useEffect，如何跳过对初始渲染的效果？

  • Z时代
  • 2024-01-10
  • 分类：问答

使用React的新效果挂钩，如果重新渲染之间某些值没有改变，我可以告诉React跳过应用效果-来自React文档的示例：

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

但是上面的示例将效果应用于初始渲染，以及随后在count已更改的地方重新渲染。如何告诉React跳过初始渲染的效果？

回答：

如指南所述，

效果挂钩（useEffect）增加了从功能组件执行副作用的功能。它的作用与React类中的componentDidMount，componentDidUpdate和componentWillUnmount相同，但统一为一个API。

在指南中的此示例中，预期count仅在初始渲染时为0：

const [count, setCount] = useState(0);

因此，它将componentDidUpdate与其他检查一起使用：

useEffect(() => {
  if (count)
    document.title = `You clicked ${count} times`;
}, [count]);

基本上，这是可以使用而不是可以使用的自定义挂钩的useEffect工作方式：

function useDidUpdateEffect(fn, inputs) {
  const didMountRef = useRef(false);
  useEffect(() => {
    if (didMountRef.current)
      fn();
    else
      didMountRef.current = true;
  }, inputs);
}

致谢@Tholle useRef而不是进行建议setState。

以上是 使用useEffect，如何跳过对初始渲染的效果？ 的全部内容， 来源链接： utcz.com/qa/435896.html

回到顶部