React 中的延迟加载 util 函数

【问题标题】：Lazy load util function in ReactReact 中的延迟加载 util 函数
【发布时间】：2021-04-05 11:43:15
【问题描述】：

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

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

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

谢谢！什洛米

【问题讨论】：

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

标签： reactjs react-lazy-load webpack-module-federation

【解决方案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> : <></>
}

【讨论】：