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

Question

我已经苦苦挣扎了几天,试图找出"做出反应"的方法.

基本上,我有一个树,一个列表(列表...),可以任意嵌套,我想要一个组件,将显示这一点,并启用重新排列.

这是我的数据:

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

我的第一个传递是只有一个"树"组件,它在其渲染函数中构建嵌套的DOM元素列表(请查看此处的代码).对于少量元素来说,这实际上效果很好,但是我希望能够支持数百个元素,并且当一个元素在树中移动时有很高的重新渲染成本(当有几百个元素时,大约600毫秒)元件).

所以我想我会让树的每个"节点"都是它自己的这个组件的实例.但这是我的问题(对不起长篇介绍):

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

我仍然试图围绕如何处理和分配状态和道具.

谢谢

Answer 1

我想用React尝试树结构,并想出一个简单的组件,当你点击时隐藏子树<h5>.一切都是TreeNode.这与你的想法相似吗？

你可以在这个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

似乎将所有内容作为道具传递更好,因为这可以防止您管理单个插入/删除的麻烦.此外,正如评论所说,这些key属性可以防止大量不必要的重新渲染.

您可以查看以下链接:http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html.它描述了你所面临的困境以及如何处理它.

(巧合的是,我刚才做了一个反应树视图:https://github.com/chenglou/react-treeview.从中获取你想要的任何东西!)