【问题标题】:Why on earth is not this return statement executed here in my codesandbox UseEffect为什么这个返回语句不是在我的代码和框 UseEffect 中执行
【发布时间】:2021-07-07 23:15:33
【问题描述】:

我学习 React JavaScript 并拥有这个 Sandbox to play around

正如您在 PromiseLoader.js 中看到的那样

useEffect 中的return 有一个console.log(.. 永远不会触发,为什么会这样? 我以为 JavaScript setInterval 是异步的?

【问题讨论】:

标签: javascript asynchronous setinterval use-effect


【解决方案1】:

useEffect 返回的函数在 React 执行清理时被调用。

来自https://reactjs.org/docs/hooks-effect.html

React 究竟何时清理效果? React 在组件卸载时执行清理。然而,正如我们之前所了解的,效果会为每次渲染运行,而不仅仅是一次。这就是为什么 React 还会在下次运行效果之前清理上一次渲染中的效果。我们将在下文讨论为什么这有助于避免错误以及如何选择退出这种行为,以防它在后面产生性能问题。

查看此修改后的沙箱以查看其效果:https://codesandbox.io/s/promise-hotpink-loader-forked-xujbl?fontsize=14&hidenavigation=1&theme=dark

单击按钮以显示/隐藏 Promise Loader 组件。请注意,当您隐藏组件时,它会卸载,并且 console.log 显示清理功能确实正在执行。

【讨论】:

    猜你喜欢
    • 2021-06-10
    • 1970-01-01
    • 2012-05-18
    • 2011-09-19
    • 2021-04-02
    • 1970-01-01
    • 2013-11-29
    • 2020-06-23
    • 1970-01-01
    相关资源
    最近更新 更多