当组件卸载时停止执行我的 React for 循环

Question

当我的组件卸载时，我试图从运行ning 停止 for 循环。

孤立的例子如下：

我的小部件是一台打印机。当打印机打开时，它打印“hello world”1M 次。当打印机关闭时它会停止。

我的问题是无法让打印机在关闭时停止打印。当我关闭打印机时，for 循环继续到运行。我以为我可以通过更新 isOpen 来停止打印机打印。但是当我关闭打印机时，for 循环范围内的 isOpen 变量似乎停留在 true 上。当此组件卸载时，如何从运行ning 中断 for 循环？

我似乎对 React 状态和函数如何协同工作有一些根本性的误解。

const SelectionPrinter = (props: {isOpen: boolean}): JSX.Element => {


    useEffect(() => {
        runThePrinter()
    }, [props.isOpen])

    const runThePrinter = (isOpen: boolean) => {
        for (let x = 0; x < 1000000; x++) {
            if (isOpen) {
                print(isOpen)
            }  
        }
    }

    const print = (isOpen: boolean) => {
        setTimeout(() => {
            if (isOpen) {
                console.log("hello world")
            } else {
                console.log("goodbye")
            }
        })
    }

    return (<div> Printer </div>)
export default SelectionPrinter

Answer 1

React 组件函数只是常规的旧函数。您的 runThePrinter 函数也只是一个常规的旧同步函数，因此您的组件的渲染周期将是这样的（显然这已被简化）：

React 在某处看到一个 <SelectionPrinter isOpen={true} /> 组件（可能是您的 App 组件）并调用 SelectionPrinter 函数。
SelectionPrinter函数运行：它实例化了两个函数，runThePrinter和print。
React 调用您的效果函数，该函数又调用您的 runThePrinter 函数。此函数循环一百万次迭代并打印 isOpen 状态，或 true 一百万次。

如果您在第 1-3 步中的任何一个过程中更改了 prop isOpen，那没关系 - React 将使用新的 props 和 state 排队新的渲染，但它不会神奇地中断已经调用的函数。就像函数通常不会有任何特殊的“观察者”或除了它们被调用的变量之外的任何知识，React 组件函数只是用 props 和状态调用的函数。当这些组件中的 props 或 state 发生变化时，React 会用新的现实调用它们的函数，但它不会中断一个函数来“注入”新的 props 或 state - 它只是调用函数。

我强烈推荐 Dan Abramov 的 this article，它名义上是关于 useEffect 的，但它揭示了一些常见的 React 误解。

当组件卸载时停止执行我的 React for 循环

Stop my React for loop from executing when component umounts

state

reactjs

use-effect