Làm thế nào để quản lý nhà nước trong một thành phần cây trong reactjs

Question

Tôi đã đấu tranh này trong một vài ngày, cố gắng tìm ra cách "phản ứng" để làm điều đó. Về cơ bản, tôi có một cây, một danh sách các danh sách (trong danh sách ...) có thể được tùy ý lồng nhau, và tôi muốn một thành phần sẽ hiển thị điều này và cũng cho phép sắp xếp lại.

Dưới đây là dữ liệu của tôi:

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

vượt qua đầu tiên của tôi là chỉ có một single "cây" thành phần xây dựng danh sách lồng nhau của các yếu tố DOM trong làm cho chức năng của nó (look at the code here). Điều đó thực sự hoạt động khá tốt với số lượng nhỏ các phần tử, nhưng tôi muốn có thể hỗ trợ hàng trăm phần tử và có chi phí tái xuất rất cao khi một phần tử được di chuyển bên trong cây (~ 600ms khi có vài trăm phần tử yếu tố).

Vì vậy, tôi nghĩ rằng tôi sẽ có mỗi "nút" của cây là thể hiện riêng của thành phần này. Nhưng đây là câu hỏi của tôi (xin lỗi vì phần giới thiệu dài):

Nếu mỗi nút truy vấn động danh sách đó là ID của trẻ em từ cơ sở dữ liệu trung tâm và lưu trữ trong trạng thái? Hoặc nút trên cùng sẽ tải toàn bộ cây và truyền mọi thứ xuống qua các đạo cụ?

Tôi vẫn đang cố gắng suy nghĩ về cách tiểu bang & đạo cụ phải được xử lý & chia nhỏ.

Cảm ơn

Answer 1

tôi muốn thử ra các cấu trúc cây với phản ứng và đã đưa ra một thành phần đơn giản ẩn các subtrees khi bạn nhấp vào <h5>. Mọi thứ đều là TreeNode. Điều này tương tự như những gì bạn đang suy nghĩ?

Bạn có thể nhìn thấy nó trong hành động trong JSFiddle này: 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

Có vẻ như nó muốn được đẹp hơn để vượt qua tất cả mọi thứ xuống như đạo cụ, vì điều này sẽ ngăn cản bạn từ những rắc rối của việc quản lý cá nhân chèn/xóa. Ngoài ra, như các bình luận đã nói, các thuộc tính key ngăn chặn một đoạn rất lớn các kết xuất lại không cần thiết.

Bạn có thể muốn kiểm tra liên kết này: http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html. Nó mô tả loại tình huống khó xử mà bạn đang gặp phải và cách tiếp cận nó.

(Thật trùng hợp, tôi đã thực hiện một cây phản ứng xem một lúc trước:. https://github.com/chenglou/react-treeview Đi bất cứ điều gì bạn muốn từ nó!)

Answer 3

Dưới đây là một ví dụ nhanh về cách tạo ra một khung nhìn bằng cách sử dụng React và Flux. http://www.syntaxsuccess.com/viewarticle/5510d81be1ce52d00e93da55

Thành phần phản ứng là đệ quy và trạng thái được quản lý bằng cách sử dụng Thông lượng.