Come gestire lo stato in un componente ad albero in reactjs

Question

Sono stato in difficoltà per un paio di giorni, cercando di capire il modo "reagire" per farlo.

Fondamentalmente, ho un albero, un elenco di liste (di elenchi ...) che possono essere annidate arbitrariamente, e voglio un componente che visualizzerà questo e consentirà anche il riarrangiamento.

Ecco miei dati:

var data = [{ 
     id: 1 
    }, { 
     id: 2, children: [ 
     { 
      id: 3, children: [{id: 6}] 
     }, { 
      id: 4 
     }, { 
      id: 5 
     }] 
    }] 

Il mio primo passo era quello di avere solo un singolo componente "albero" che costruisce le liste nidificate di elementi DOM nella sua funzione render (look at the code here). In realtà ha funzionato abbastanza bene per un piccolo numero di elementi, ma voglio essere in grado di supportare centinaia di elementi, e c'era un costo di re-rendering molto alto quando un elemento veniva spostato all'interno dell'albero (~ 600ms quando c'erano poche centinaia elementi).

Quindi penso che avrò ciascun "nodo" dell'albero come istanza di questo componente. Ma ecco la mia domanda (scusa per la lunga introduzione):

Se ciascun nodo esegue query dinamiche per l'elenco, gli ID figli provengono da un "database" centrale e lo memorizzano nello stato? O il nodo più in alto carica l'intero albero e passa tutto attraverso i sostegni?

Sto ancora provando a pensare a come lo stato & deve essere gestito da & diviso.

Grazie

Answer 1

ho voluto provare la struttura ad albero con Reagire e si avvicinò con un componente semplice che nasconde i sottostrati quando si fa clic su <h5>. Tutto è un TreeNode. È simile a quello che stavi pensando?

Si può vedere in azione in questo JSFiddle: http://jsfiddle.net/ssorallen/XX8mw/

TreeNode.jsx:

var TreeNode = React.createClass({ 
    getInitialState: function() { 
    return { 
     visible: true 
    }; 
    }, 
    render: function() { 
    var childNodes; 
    if (this.props.node.childNodes != null) { 
     childNodes = this.props.node.childNodes.map(function(node, index) { 
     return <li key={index}><TreeNode node={node} /></li> 
     }); 
    } 

    var style = {}; 
    if (!this.state.visible) { 
     style.display = "none"; 
    } 

    return (
     <div> 
     <h5 onClick={this.toggle}> 
      {this.props.node.title} 
     </h5> 
     <ul style={style}> 
      {childNodes} 
     </ul> 
     </div> 
    ); 
    }, 
    toggle: function() { 
    this.setState({visible: !this.state.visible}); 
    } 
}); 

bootstrap.jsx:

var tree = { 
    title: "howdy", 
    childNodes: [ 
    {title: "bobby"}, 
    {title: "suzie", childNodes: [ 
     {title: "puppy", childNodes: [ 
     {title: "dog house"} 
     ]}, 
     {title: "cherry tree"} 
    ]} 
    ] 
}; 

React.render(
    <TreeNode node={tree} />, 
    document.getElementById("tree") 
); 

Answer 2

sembra che sarebbe più bello di passare tutto giù come oggetti di scena, in modo da evitare che si dalla difficoltà di gestione individuale inserzione/delezione. Inoltre, come dicevano i commenti, gli attributi key impediscono una grande quantità di re-rendering non necessario.

È possibile controllare questo collegamento: http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html. Descrive il tipo di dilemma che stai avendo e come affrontarlo.

(Casualmente, ho fatto un albero di reagire vista qualche tempo fa:. https://github.com/chenglou/react-treeview Prendete quello che volete da esso!)

Answer 3

Ecco un rapido esempio di come creare una vista ad albero usando React e Flux. http://www.syntaxsuccess.com/viewarticle/5510d81be1ce52d00e93da55

Il componente React è ricorsivo e lo stato è gestito tramite Flux.