拆分组件时避免 dom 容器元素

Question

我正在使用 React，我想在子组件中拆分一个组件，以对其进行优化（我正在使用 mobX 并尝试实现此处的列表示例 https://mobxjs.github.io/mobx/best/react-performance.html）

然而，这样做似乎是我被迫引入额外的 dom 元素。考虑一个 NodeComponent 来渲染一棵树

const NodeComponent = ({node}) => (
  <div>
    <div that access some stuff with node properties/>
    {children.map(childNode => <NodeComponent node={childNode} />)}
  </div>
);

这是伪代码，希望你能理解。

如何将第一个内部 div 与递归渲染分开，而不在子元素周围引入额外的包装器 dom 元素（如下面的 div）？

const NodeComponent = ({node}) => (
  <div>
    <div that access some stuff with node properties/>
    **<useless div>**
      {children.map(childNode => <NodeComponent node={childNode} />)}
    **<useless /div>**
  </div>
);

如果我有数以千计的节点，这意味着数以千计的额外无用 dom 元素，此外，我正在移植具有特定 dom 结构和 CSS 的现有控件，并且我如果我想拆分它们，必须更改它。

TL;DR;我可以将这个组件一分为二，这样我就可以在不更改 DOM 输出的情况下获得不需要重新渲染所有子项的 mobx 优化吗？

或者再说一次：为什么纯粹的 optimization/refactoring 迫使我修改我的 dom 最终结果？

Answer 1

这似乎是一个递归数据结构。我认为你可以很好地将它分成多个组件而没有不必要的节点：

Node = observer({ node } => (
  <div>
    {node.title}
    <Children={node.children} />
  </div>
))

Children = observer({ children } => (
  !children ? null :
  <ul>
    {children.map(child => <Node node={child} />
  </ul>
))

我认为这是您可以获得的最小树，mobx 可以很好地优化它，因为子集合被呈现为单独的组件。您可能认为 ul 是不需要的，但我认为出于所有实际的样式原因，您可能需要此 dom 节点，否则很难在不定位父代的情况下定位后代。

除此之外，如果没有一些经验证明它是瓶颈，我不会太在意您 DOM 中的其他节点。它可能根本不重要，或者例如你的 CSS 选择器使用 ul 比没有 ul

快得多

Answer 2

目前，我最终会使用 https://github.com/mwiencek/react-packages 之类的东西来让 React/JSX 开心，而不是被迫改变我的 dom 结构。这与其说是一个正确的解决方案，不如说是一个棘手的解决方法，但它确实解决了我的问题。

希望 https://github.com/facebook/react/issues/2127 修复后我就不再需要它了。

感谢大家的帮助，我真的很感激（再次感谢@mweststrate 对 MobX 的总体帮助:)）

拆分组件时避免 dom 容器元素

avoid dom container elements when splitting components

reactjs

mobx