Jak zarządzać stanem w komponencie drzewa w reactjach

Question

Od paru dni borykam się z tym, próbując znaleźć sposób "zareagowania", aby to zrobić.

Zasadniczo mam drzewo, listę list (list ...), które można dowolnie zagnieżdżać, i chcę element, który to wyświetli, a także umożliwi przegrupowanie.

Oto moje dane:

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

Mój pierwszy przebieg był po prostu mieć jeden „zielony” komponent, który buduje zagnieżdżonych list elementów DOM w jego nadania funkcji (look at the code here). To faktycznie działało całkiem dobrze dla niewielkiej liczby elementów, ale chcę móc obsługiwać setki elementów, a koszt był bardzo wysoki, gdy element został przesunięty wewnątrz drzewa (~ 600ms, gdy było ich kilkaset elementy).

Więc myślę, że każdy z "węzłów" drzewa będzie jego własną instancją tego komponentu. Ale tutaj jest moje pytanie (przepraszam za długie wprowadzenie):

Czy każdy węzeł dynamicznie zapytać o listę to identyfikatory dzieci z centralnej "bazy danych" i przechowywać je w stanie? A może najwyższy węzeł powinien załadować całe drzewo i przekazać wszystko przez rekwizyty?

Nadal staram się zawinąć w moim umyśle, w jaki sposób należy obsługiwać podpory & & podzielone.

Dzięki

Answer 1

chciałem wypróbować strukturę drzewa z React i wymyślił prosty komponent, który ukrywa poddrzewa po kliknięciu na <h5>. Wszystko to jest TreeNode. Czy to jest podobne do tego, o czym myślałeś?

Można zobaczyć go w akcji w tym 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

Wydaje się, że to będzie ładniejszy przekazać wszystko w dół jako rekwizyty, ponieważ uniemożliwi trud zarządzania indywidualny wstawiania/kasowania. Ponadto, podobnie jak w komentarzach, atrybuty key zapobiegają ogromnemu fragmentowi niepotrzebnego ponownego renderowania.

Możesz chcieć sprawdzić ten link: http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html. Opisuje rodzaj dylematu, który masz i jak do niego podejść.

(Przypadkowo, Zrobiłem reagować drzewo obejrzeć jakiś czas temu. https://github.com/chenglou/react-treeview Weź co chcesz z nim!)

Answer 3

Oto krótki przykład sposobu tworzenia widoku drzewa za pomocą React i Flux. http://www.syntaxsuccess.com/viewarticle/5510d81be1ce52d00e93da55

Komponent React jest rekursywny, a stan jest zarządzany za pomocą strumienia Flux.