ReactJs：如何在启动时选择性地加载反应功能组件？

Posted 2023-02-22

【中文标题】ReactJs：如何在启动时选择性地加载反应功能组件？

【英文标题】：ReactJs : How to load react functional components selectively at startup?

【发布时间】：2020-10-06 19:23:32

【问题描述】：

我试图仅在单击时加载组件，而不是在启动期间全部加载。

index.js：

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

App.js：

    const App = (props) => 
      return (
     <React.Fragment> 
        <AProvider>
           <Route exact path="/A" component=A />
         <AProvider>
          <BProvider>
            <Route exact path="/B" component=B />
          </BProvider>
          <CProvider>
            <Route exact path="/C" component=C />
          </CProvider>
          <DProvider>
            <Route exact path="/" component=D />
          </DProvider>
    </React.Fragment>
      );
     export default App;

我的每个提供程序组件都在对端点进行 get 调用以获取组件的数据

export const AContext = React.createContext();
export const AProvider = (props) => 
  const [A, setA] = useState([]);
  useEffect(() => 
    async function getA() 
      try 
        const result = await axios.get(http://localhost/a", 
          params: 
            id: 1,
          ,
        );
        setA(result.data);
       catch (e) 
        console.log(e);
      
    
    getA();
  , []);
  return (
    <AContext.Provider value=[A, setA]>
      props.children
    </AContext.Provider>
  );
;

当我在http://localhost:3000/ 上浏览我网站的根目录时，我希望只加载组件 D，但是当我查看浏览器网络调用时，我看到所有四个组件的 get 调用，而不是只加载路线，我如何有选择地加载组件？我已经尝试过 react-loadable 和 React.Lazy 但它仍然会进行所有四个调用。非常感谢任何帮助。

【问题讨论】：

你是说有 4 个 XHR/Ajax 请求？这是有道理的，因为 App.js 正在渲染 A、B、C 和 D 提供程序。这些组件中的每一个都发出 XHR/Ajax 请求。

据我所知，Provider相关组件内的逻辑应该在路由相关组件内处理。这将确保仅根据路由触发所需的调用？

【参考方案1】：

调用所有 Provider 的原因是您没有在 Route 中渲染它们。在特定路由上调用组件的正确方法是将它们呈现为 Route 子级而不是 Route 包装器

const App = (props) => 
  return (
     <React.Fragment> 
           <Route exact path="/A" render=(rp) => <AProvider><A ...rp /></AProvider> />
            <Route exact path="/B" render=(rp) => <BProvider><B ...rp /></BProvider> / />
            <Route exact path="/C" render=(rp) => <CProvider><C ...rp /></CProvider> / />
            <Route exact path="/" render=(rp) => <DProvider><D ...rp /></DProvider> / />
    </React.Fragment>
  )
;
export default App;

【讨论】：

我在任何地方都没有看到这方面的文档。