javascript - 使用 ReactDOM.render 渲染元素时如何访问 redux 存储？

Question

我构建了一个选项卡组件，它呈现 8 个选项卡项。每个选项卡都与执行非常昂贵的操作的组件相关联。将所有 8 个组件渲染在组件安装上会严重影响性能。

为了优化性能，我不是一次渲染所有 8 个组件，而是通过选项卡数组进行映射并渲染一个空的 div 占位符，该占位符将在每次单击选项卡时首次将组件延迟加载到空 div 。我已经成功地工作了，但是在安装每个选项卡组件后我无法访问 redux 存储。

有人可以解释一下原因并建议我如何解决这个问题吗？

谢谢

示例代码

const handleTabClick = tabIndex => event => {
   setSelectedTab(tabIndex);
   renderContentBlock(tabIndex);
};

const renderContentBlock = tabIndex => {
  const updatedTabs = [...tabs];

  // no need to rerender content block if already rendered
  if (updatedTabs[tabIndex].rendered) return;

  updatedTabs[tabIndex].rendered = true;

  ReactDOM.render(
    <LazyLoad component={updatedTabs[tabIndex].component} />,
    document.getElementById(updatedTabs[tabIndex].name)
  );

  setTabs(updatedTabs);
};

<小时/>

{
  tabs.map((tab, index) => (
    <div
        key={index}
        onClick={handleTabClick(index)}
    >
      {tab.name}
    </div>

  ))
}

{ 
  tabs.map((tab, index) => (
   <div
     key={index}
     id={tab.name}
     ref={el => (expandedContentBlockRef.current[index] = el)}
   /></div>
  ))
}

Answer 1

当您使用 ReactDOM.render() 将组件渲染到 React 树外部的 DOM 节点时，它不是原始树的一部分，并且无法访问上下文。这意味着它无法连接到通过上下文管理的 redux 存储。

一个可能的解决方案是使用 ReactDOM.createPortal() ，它维护与树的连接，同时将内容渲染到不同的 DOM 节点:

ReactDOM.createPortal(
  <LazyLoad component={updatedTabs[tabIndex].component} />,
  document.getElementById(updatedTabs[tabIndex].name)
);

但是，您主要关心的是延迟加载/渲染选项卡。由于只能显示单个选项卡的内容，因此您实际上不需要一次渲染所有选项卡。另外，react有一个内置代码splitting/lazy loading您可以为您的案例利用的机制。

示例(未测试):

import React, { Suspense, lazy, useState, useCallback } from 'react';

const tabs = [{ title: 'TabA', path: 'tabAFilePath' }, { title: 'TabB', path: 'tabBFilePath' }, ...] // an array of paths to Component's files in your code
  .map(o => ({ ...o, Page: lazy(() => import(o.path) }))

const Tab = ({ tab, setTab }) => {
  const setCurrentTab = useCallback(() => setTab(tab), [tab]);

  return (
    <div onClick={setCurrentTab}>{tab.title}</div>
  );
};

const Tabs = () => {
  const [current, setTab] = useState(tabs[0]);

  const { Page } = current;

  return (
    <div>{tabs.map(tab => <Tab tab={tab} setTab={setTab} />)}</div>

    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Page />
      </Suspense>
    </div>
  );
};