如何使用钩子将类组件转换为功能组件答案

【问题标题】：How to convert class component to function component with hooks如何使用钩子将类组件转换为功能组件
【发布时间】：2021-08-06 07:35:21
【问题描述】：

我的代码类组件

raf = (callback) => {
     var self = this;
        if (this.requestFrame) raf.cancel(this.requestFrame);
        this.requestFrame = raf(function () {
            self.requestFrame = undefined;
            callback();
        });
    }

update = (callback) => {
    this.raf(function () { this._update(callback) });
}

我的代码功能组件

const raf = (callback) => {
        if (Scrollbars.requestFrame) raf.cancel(Scrollbars.requestFrame);
        Scrollbars.requestFrame = raf(() => {
            Scrollbars.requestFrame = undefined;
            callback();
        });
    };

    const update = (callback) => {
        raf(() => _update(callback));
    };

我正在从类组件切换到函数组件，但是当我切换时，函数 raf 中出现错误“超出最大调用堆栈大小”。有人请帮帮我。

【问题讨论】：

您能否更新您的问题以包含更全面的组件代码示例，包括您正在处理的类组件和函数组件，以便我们可以看到更多您的代码在做什么？通常发生此错误时，是因为组件无条件更新状态并渲染循环。
这是我的错误代码“imgur.com/rGYtx9X”尝试使用类组件但没问题，但使用功能组件会出现类似“imgur.com/DAMyhpt”的错误。这是我的组件“imgur.com/yKAh4wt”

标签： reactjs react-hooks

【解决方案1】：

在您的函数组件中添加以下代码并尝试：

const update = (callback) => {
  useEffect(() => {
    raf(() => _update(callback));
  }, []);
};

【讨论】：

这破坏了Rules of Hooks，你不能从嵌套函数中调用 React 钩子。