javascript - React useuse钩子(Hook)如何处理多个调用

我正在使用React useScript hook (from useHooks website)。它允许轻松加载外部脚本并在加载后对其进行缓存。

它工作正常，但是我发现一个极端的情况导致了我一些问题。
问题出在caching of scripts上。

如果我使用useScript在页面中将组件加载了2次，如下所示：

const ScriptDemo = src => {
  const [loaded, error] = useScript("https://hzl7l.codesandbox.io/test-external-script.js");

  return (
    <div>
      <div>
        Script loaded: <b>{loaded.toString()}</b>
      </div>
      <br />
      {loaded && !error && (
        <div>
          Script function call response: <b>{TEST_SCRIPT.start()}</b>
        </div>
      )}
    </div>
  );
};

function App() {
  return (
    <div>
      <ScriptDemo />
      <ScriptDemo />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

您可以在此处查看和复制：https://codesandbox.io/s/usescript-hzl7l

如果我的App只有一个ScriptDemo很好，但是如果有两个或更多将失败。

实际上，流程将是：


ScriptDemo->是否缓存脚本？否->将脚本添加到缓存->提取->渲染
ScriptDemo2->是否缓存脚本？是->渲染（但尚未完成加载
还..）


解决该问题的一种方法是将useScript挂钩更改为仅在成功执行onScriptLoad回调后才缓存脚本。
这种方法的问题是外部脚本将被调用两次。
看到这里：https://codesandbox.io/s/usescript-0yior


ScriptDemo->是否缓存脚本？否->获取它->将脚本添加到缓存->渲染
ScriptDemo->是否缓存脚本？否->获取它->将脚本添加到缓存->渲染


我曾考虑过将脚本src和一个加载布尔值进行缓存，但是这意味着设置了超时处理，在我看来它变得非常复杂。

那么，为了仅一次加载外部脚本但确保正确加载它，更新钩子的最佳方法是什么？

最佳答案

在useScript模块中，我们需要跟踪加载脚本的状态。

因此，现在我们不再需要cachedScripts是简单的字符串数组，而是需要保留一个表示加载状态的对象。

修改后的useScript实现将解决以下问题：

import { useState, useEffect } from 'react';

let cachedScripts = {};
export function useScript(src) {
  // Keeping track of script loaded and error state
  const [state, setState] = useState({
    loaded: false,
    error: false
  });

  useEffect(
    () => {
      const onScriptLoad = () => {
        cachedScripts[src].loaded = true;
        setState({
          loaded: true,
          error: false
        });
      };

      const onScriptError = () => {
        // Remove it from cache, so that it can be re-attempted if someone tries to load it again
        delete cachedScripts[src];

        setState({
          loaded: true,
          error: true
        });
      };

      let scriptLoader = cachedScripts[src];
      if(scriptLoader) { // Loading was attempted earlier
        if(scriptLoader.loaded) { // Script was successfully loaded
          setState({
            loaded: true,
            error: false
          });
        } else { //Script is still loading
          let script = scriptLoader.script;
          script.addEventListener('load', onScriptLoad);
          script.addEventListener('error', onScriptError);
          return () => {
            script.removeEventListener('load', onScriptLoad);
            script.removeEventListener('error', onScriptError);
          };
        }
      } else {
        // Create script
        let script = document.createElement('script');
        script.src = src;
        script.async = true;

        // Script event listener callbacks for load and error


        script.addEventListener('load', onScriptLoad);
        script.addEventListener('error', onScriptError);

        // Add script to document body
        document.body.appendChild(script);

        cachedScripts[src] = {loaded:false, script};

        // Remove event listeners on cleanup
        return () => {
          script.removeEventListener('load', onScriptLoad);
          script.removeEventListener('error', onScriptError);
        };
      }
    },
    [src] // Only re-run effect if script src changes
  );

  return [state.loaded, state.error];
}

编辑：

转到useHooks的GitHub页面提出此改进建议，发现其中一些已经发布了类似的修复程序：

https://gist.github.com/gragland/929e42759c0051ff596bc961fb13cd93#gistcomment-2975113

关于javascript - React useuse钩子(Hook)如何处理多个调用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57917049/