如何在reactjs中管理树组件中的状态

我已经为此苦苦挣扎了几天，试图找出“反应”的方式来做到这一点。

基本上，我有一棵树，一个可以任意嵌套的列表列表（列表......），我想要一个能够显示它并启用重新排列的组件。

这是我的数据：

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

我的第一遍是只有一个“树”组件，在其渲染函数中构建 DOM 元素的嵌套列表（看这里的代码 https://github.com/notablemind/tree/blob/fa9cd0af481204aef36ab89d162cc03dd1dbc8b1/index.jsx#L96）。这实际上对于少量元素来说效果很好，但我希望能够支持数百个元素，并且当一个元素在树中移动时，重新渲染成本非常高（当有几百个元素时，重新渲染成本约为 600 毫秒）元素）。

所以我想我会让树的每个“节点”都是这个组件自己的实例。但这是我的问题（抱歉介绍太长）：

每个节点是否应该从中央“数据库”动态查询其子节点 ID 列表并将其存储在状态中？或者最顶层的节点应该加载整个树并通过 props 向下传递所有内容？

我仍在尝试思考如何处理和分配状态和道具。

Thanks

我想用 React 尝试树结构，并想出了一个简单的组件，当您单击时会隐藏子树<h5>。一切都是一个TreeNode。这和你的想法相似吗？

您可以在此 JSFiddle 中看到它的实际效果：http://jsfiddle.net/ssorallen/XX8mw/ http://jsfiddle.net/ssorallen/XX8mw/

树节点.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")
);