reactjs - React useEffect Hook return () => cleanup() 与 return cleanup

Question

我对 useEffect 的清理回调函数有疑问。简而言之，return cleanup 会出错，但 return () => cleanup() 效果很好。是的，它们是不同的，但是它们有什么不同呢？有谁知道如何解释吗？谢谢，

我在使用 codemirror 编写时遇到了这个问题。

我看到的错误消息是

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'plugins')

我的钩子(Hook)

export const useCodeMirror = () => {
  const state = ...
  const parent = ...
  
  useEffect(() => {
    const view = new EditorView({state: state, parent: parent})
    // return view.destroy raises an error
    return () => view.destroy()  // works perfectly
  }, [element])
}

node_modules/@codemirror/view/dist/index.js L:6740-6750

    destroy() {
        for (let plugin of this.plugins)
            plugin.destroy(this);
        this.plugins = [];
        this.inputState.destroy();
        this.dom.remove();
        this.observer.destroy();
        if (this.measureScheduled > -1)
            cancelAnimationFrame(this.measureScheduled);
        this.destroyed = true;
    }

package.json

{
  "dependencies": {
    ...
    "codemirror": "^6.0.1",
    ...
  }
}

Answer 1

通常可以直接返回清理函数，而不是将其包装在附加的箭头函数中。在这种情况下需要附加函数的唯一原因是 destroy 使用 this。

对于常规函数，this 的值由函数的调用方式决定。因此，如果您的代码显示 view.destroy()，那么字符 view. 就是 this 设置为 的原因查看。这就是 () => view.destroy() 有效的原因:在调用该函数时，您明确说明了 this 应该是什么。

但是如果你只是返回view.destroy，你就没有调用该函数，只是返回它的引用来使用react。 React 对 view 一无所知，它只知道你返回了一个函数。因此，当 React 稍后调用您的函数时，它不知道将 this 设置为什么，因此 this 被设置为未定义。由于它未定义，this.plugins 会导致您看到的错误。