javascript - 如何在 useEffect() 之外调用函数

Question

我试图useEffect()通过这样做来调用一个函数：

const myComponent = () => {
  useEffect(() => {
    const aFunc = () => {
      console.log("function called")
    }
  }, [])

  return (
    <button onClick={() => aFunc()} />
  )
}

正如你所看到的，每次我点击<button>我想调用这个aFunc()函数。

如何在同一个组件中调用aFunc外部？useEffect()当我将它绑定在onClick

标签： javascriptreactjsecmascript-6

Answer 1

你不能。该函数存在于不同的范围内。

关键useEffect是隔离代码，这样它就不会在每次组件呈现时重新运行。最常见的用途是在将组件添加到文档时发出 Ajax 数据请求，而不会触发无限循环，因为每个 Ajax 响应都会导致组件重新呈现并触发再次发出 Ajax 请求。

只需直接在组件内部声明函数，或者，由于此特定示例中的函数不依赖于来自组件的任何数据，因此完全在组件外部。

---

如果您的示例被大量简化并且创建函数的过程很昂贵并且依赖于组件中的数据：查看useCallback.