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;我可以将这个组件拆分为2，这样我可以在没有改变DOM输出的情况下获得不重新渲染所有子项的mobx优化吗？

或者再说一次：为什么纯粹的优化/重构要求我修改我的dom最终结果？

Answer 1

目前，我最终会使用类似https://github.com/mwiencek/react-packages的东西，以使React / JSX感到高兴，而不必改变我的dom结构。它比一个合适的解决方案更像是一个hacky解决方案，但它确实解决了我的问题。

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

无论如何，感谢大家的帮助，我真的很感激（并再次感谢@mweststrate for MobX :)）

Answer 2

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

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

更快

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

2 个答案: