React useUndo 钩子

我是 Web 开发新手，这是我的第一篇博客，欢迎任何建议或评论，这将有助于我学习和成长。
那么，我们就从钩子开始吧useUndo。
上周，我们公司接到一个需求，需要一张卡片，上面有两个选项Accept和Decline，在选择任意一个选项后，我们会给用户一个时间，比如说 10 秒，在这段时间内，他们可以撤消操作。

eg --->

如果他们接受/删除

所以我想做一个撤销函数，它能帮我解决这个问题，而且如果我想在任何地方使用这个撤销函数，我都会用到它。所以我想出了一个useUndo办法，可以用React lifecycle

因此，让我们讨论一下代码以及我如何实现它。

首先我将展示完整的代码，然后将其分成不同的部分并讨论每个部分。

首先我使用useStatereact hook

1. 调用撤消功能
2. 存储超时 ID
3. 检查方法执行是否完成。

接下来是onUnloadevent-listener 函数

它会在你尝试关闭标签页或窗口时抛出异常并发出警报。我们这样做是因为我们使用了 setTimeout 和 clearTimeout，所以它们是窗口作用域的，每次我们关闭或打开一个新标签页时都会创建一个新的作用域。所以，如果我们关闭标签页，setTimeout（web-api）将从回调队列中清除，即使时间间隔结束后也不会进入执行堆栈。

因此我们将监听event-listenerie beforeunload。

接下来，我认为此代码中最重要的部分useEffect是

所以我们在这里做的是

1. 首先，我们检查是否invokeUndo为真，如果是，则beforeunload在窗口上添加一个事件监听器。然后，我们将函数放入超时函数中，该函数将在 10000 毫秒（即 10 秒）后执行。现在，setTimeout每次运行 web-api 时，它都会返回一个唯一的数字，用于清除超时函数。

在 setTimeout 内部，我们调用该函数，当函数执行完成时，该函数被resolveMethod()设置为 null，当函数执行完成时，该函数被设置为 true，并且当使用钩子时，如果我们在执行后有任何要执行的操作，则可以执行 & 。undoTimerIdsetMethodExecutedsetInvokeUndo(false)

现在重要的部分是我们需要在 component-unmount 上做一些清理，因此我们将在 useEffect 中有一个返回语句来清除 eventListener。

现在要调用撤消，我们有invokeUndoMethod，它将是一个返回值，并且在使用这个钩子时我们可以使用它。

我们有一个undoMethod将执行撤消方法（即将clearTimeoutsetInvokeUndo 设置为 false）。

现在我们将得到最终的回报声明

1. undoMethod执行撤消操作
2. invokeUndoMethod调用 undo 或启动 undo 方法
3. isMethodExecuted这将判断方法执行是否完成。

现在正在使用它。

我们可以导入这个 useUndo 钩子并将其传递到onAcceptance我们需要在 10 秒后执行的方法中。

就这些了，伙计们😃

Update ---> github repo link

https://github.com/mishrabhavesh/useUndo