React 中的延迟加载 util 函数

Posted 2023-02-16

【中文标题】React 中的延迟加载 util 函数

【英文标题】：Lazy load util function in React

【发布时间】：2021-04-05 11:43:15

【问题描述】：

我想从一个异步加载的模块（由模块联合公开）运行一个 JS 函数 并在 React 组件中使用返回值。

例如，通过返回布尔值的函数的值来设置某些元素的可见性。

我找到的所有示例，解释了如何延迟加载 React 组件

谢谢！ 什洛米

【问题讨论】：

显示已经完成的工作。延迟加载仅适用于反应组件，不适用于函数

【参考方案1】：

如果您只需要在组件首次加载时运行一次函数，您可以简单地使用，例如 useEffect() 挂钩然后设置一些状态。例如

function MyComponent()
   const [someValue, setSomeValue] = useState()
   useEffect( () => 
     import('someRemote/module').then( module => 
        const valueFromFunction = module.myFunction()
        setSomeValue(valueFromFunction)
     )
   )
   return someValue != undefined ? <div>The value is someValue</div> : <></>