1

私は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 の最終結果を変更する必要があるのはなぜですか?

4

2 に答える 2

1

とりあえず、https://github.com/mwiencek/react-packagesのようなものを使用して、React/JSX を満足させ、dom 構造を変更する義務を負わないようにします。適切な解決策というよりもハックな回避策ですが、問題は解決します。

https://github.com/facebook/react/issues/2127が修正されたら、もう必要ないことを願っています。

とにかく助けてくれてありがとう、私は本当に感謝しています（そしてMobX全般について@mweststrateにもう一度感謝します:)）

于 2016-08-19T09:45:00.473 に答える